Jquery UIダイアログ内の入力は送信されませんか？ 、私のダイアログボックスで

Question

入力フィールドが掲載されていない、と私はなぜ...

私は同じ結果とマックのFirefoxとSafari、およびWindows 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> 

何も、右？なぜ私のためにこれは動作しません！

ありがとうございました！

Answer 1

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")); 

はそれを修正する必要があります。

Answer 2

jQuery UIは、ダイアログのセクションをDOM内の通常の場所から外し、別の場所に移動していることを確認しています。それはフォームの親要素から入力要素を取り除きます。フォーム要素なしでフォームを送信することはできないため、失敗します。

私はとしてHTMLを書き換えることをお勧め：publishSettingsボタンがポップアップにならないために必要がある場合は、フォームの外に移動することができ、ちょうど提出するイベントで、その値をキャプチャし、

<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> 

何かが提出される前に隠された入力要素として追加してください。

幸運のベスト。

Answer 3

html5に準拠したブラウザ（IEではなく最新のff、chrome、safariがサポートしています）では、入力フィールドに "form"属性を設定することができます。私はこの問題にも苦しんで、なぜダイアログ入力を送信しなかったのかを理解するまでに時間がかかりました。

Answer 4

私はこれが古い質問ですけど、同じ問題を持っている人のために、より新しいと簡単な解決策があります：「appendTo」オプションは、jQueryのUIで1.10.0

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

を導入されています

$("#dialog").dialog({ 
    appendTo: "form" 
    .... 
}); 

Answer 5

私は同じ問題を抱えていましたが、あなたのコードに「appendTo = '#yourform'」を追加する（user2100025のように）解決策がありました。ここで私のコードとそれは正常に動作しています。

私は誰か:)

<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>