2012-10-01 25 views
1

我有一個完美工作的引導模式窗口中的表單 - 結果在表單提交後發佈到窗口。該表格被硬編碼到頁面的html中。綁定遠程表單到引導模式

現在我試圖遠程加載表單。它加載形式就好(把它放入模態體)。然而,現在當我點擊提交模式消失,整個頁面轉到表單url。

我是否需要在父頁面或遠程URL中定義我的綁定?我的想法是,在頁面加載的遠程窗體的ID是不知道的DOM。也不確定遠程URL是否可以引用父頁面上的div。

所以看起來我不同步 - 父DOM不能識別窗體,因爲它是遠程的,並且不確定遠程窗體可以綁定到父窗體中定義的模態。

有什麼想法?

謝謝!

從父頁:

<div class="modal hide fade in" id="mymodal"> 
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div> 
<div class="modal-body"></div> 
</div> 

負載遠程URL這裏:

<form class="form-horizontal" id="delivery_date_form" action="/change_delivery/submit_change"> 
.... 
</form> 

以及在所述遠程URL /形式的端部:從遠程URL

<a class="tip" data-toggle="modal" data-target="#mymodal" href="/index.php/change_delivery/change/2" rel="tooltip" title="Change Delivery Date"><i class="icon-calendar"></i></a> 

形式:

<script> 
$(function() { 
$('#delivery_date_form').bind('submit', function() { 
    $.ajax({ 
     url: "change_delivery/submit_change", 
     type: "POST", 
     dataType: "html", 
     contentType: "application/html", 
     success: function(msg) { 
      // this is returned value from your PHP script 
      //your PHP script needs to send back JSON headers + JSON object, not new HTML document! 
      // update your "message" element in the modal 
      $("#modal-body").text(msg); 
     } 
    }); 
}); 
}); 
</script> 

回答

0

這就是我要做的:

$(function(){ 
    var $mymodal = $('#mymodal'); 
    $('[data-toggle=modal]').click(function() { 
     $mymodal.attr('data-form-action', $(this).attr('data-remote')); 
    }); 

    $mymodal.find('.save-button').click(function() { 
     $.post($mymodal.attr('data-form-action'), function(data) { 
      $mymodal.find('.modal-body').html(data); 
     }); 
    }); 
});