2009-10-23 70 views
17

在我的對話框中輸入的字段沒有被公佈,我不知道爲什麼......Jquery UI對話框中的輸入沒有被髮送?

我測試過它在Mac Firefox和Safari和IE窗口的firefox &具有相同的結果,所以我不認爲它是瀏覽器,並且如果我禁用對話框,這些字段會很好地發佈。

我重新閱讀了jquery ui文檔,無法找到我在做什麼錯誤......對話框似乎不太可能不支持輸入。

這裏是我使用的代碼的精簡版:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#dialog").dialog({ 
    autoOpen: false, 
    buttons: { 
    "OK": function() { 
    $(this).dialog('close'); 
    } 
    } 
    }); 
    $("#publishSettings").click(function(){ 
    $("#dialog").dialog('open'); 
    }); 
}); 
</script> 

<form method="POST" action="publish.php"> 
<input type="button" id="publishSettings" value="Publish Settings"> 
<div id="dialog"> 
    Publish Date 
    <input type="text" name="publishOn"><br> 
    Unpublish Date 
    <input type="text" name="unPublishOn"> 
</div> 
<input type="submit" name="pubArticle" value="Publish"> 
</form> 

沒有什麼兩樣的,對不對?爲什麼這不適合我!?

謝謝!

回答

32

當JQuery打開對話框時,它將它移動到表單之外。

下面是該解決方案:

jQuery UI Dialog with ASP.NET button postback

基本上你的情況:

var dlg = $("#dialog").dialog({ 
    autoOpen: false, 
    buttons: { 
    "OK": function() { 
    $(this).dialog('close'); 
    } 
    } 
    }); 
dlg.parent().appendTo($("#yourformId")); 

應該修復它。

+0

整蠱!我看到了這個問題,但沒有看完,因爲我認爲它是特定於asp.net的。哎呦。 謝謝! – neil

+4

由於jQuery UI v1.10.0,你可以直接使用appendTo屬性來做到這一點 - http://api.jqueryui.com/dialog/#option-appendTo –

+0

這是愚蠢的。 jquery應該使它更容易。感謝您的幫助。 –

1

我敢肯定,jQuery UI將它的dom中的正常位置的對話框部分打開,然後將它移動到不同的位置。這將使您的輸入元素不在表單父元素中。你不能提交沒有表單元素的表單,所以這就是它失敗的原因。

我建議重寫HTML爲:

<div id="dialog"> 
<form method="POST" action="publish.php"> 
<input type="button" id="publishSettings" value="Publish Settings"> 
    Publish Date 
    <input type="text" name="publishOn"><br> 
    Unpublish Date 
    <input type="text" name="unPublishOn"> 
<input type="submit" name="pubArticle" value="Publish"> 
</form> 
</div> 

如果publishSettings按鈕需要不能在彈出窗口中,那麼你可以把它搬出形式的,只是捕捉提交事件的價值和在提交任何內容之前將其添加爲隱藏的輸入元素。

祝你好運。

0

在符合html5標準的瀏覽器上(不是IE,但最新的ff,chrome和Safari支持它),您可以在輸入框中設置「表單」屬性,這樣就可以將它們放到任何地方。我也遭受了這個問題,花了一些時間來弄清楚爲什麼ie沒有發送對話輸入。

10

我知道這是一個老問題,但任何人誰具有相同的問題,有一個新的和簡單的解決方案:一個「appendTo」選項中的jQuery UI的1.10.0

http://api.jqueryui.com/dialog/#option-appendTo

被引入
$("#dialog").dialog({ 
    appendTo: "form" 
    .... 
}); 
0

我有同樣的問題,解決方案是(如user2100025說)在您的代碼中添加「appendTo ='#yourform',」。在這裏我的代碼,它工作正常。

我希望有人直升機:)

<script> 
 
    $(function() { 
 
    $("#dialog").dialog({ 
 
     autoOpen: false, 
 
     resizable: false, 
 
     modal: true, 
 
     appendTo: '#myform', 
 
     buttons: { 
 
     "Yes"function() { 
 
      $('#myform').submit(); 
 
     }, 
 
     'No' function() { 
 
      $(this).dialog('close'); 
 
     } 
 
     } 
 
    }); 
 

 
    $("#button").click(function() { 
 
     $("#dialog").dialog("open"); 
 
    }); 
 
    }); 
 
    </script>