web-dev-qa-db-ja.com

Jquery UIダイアログ内の入力が送信されていませんか？

ダイアログボックスの入力フィールドが投稿されていません。理由がわかりません...

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

異常なことは何もありませんよね？なぜこれがうまくいかないのですか！？

ありがとう！

htmlformsjquery-uipost
18
neil

JQueryがダイアログボックスを開くと、フォームの外に移動します。

そのための解決策は次のとおりです。

ASP.NETボタンのポストバックを使用したjQuery UIダイアログ

基本的にあなたの場合：

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

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

33
krishna

これは古い質問ですが、同じ問題を抱えている人には、より新しく簡単な解決策があります。「appendTo」オプションがjQuery UI1.10.0に導入されました。

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

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

JQuery UIは、Dialogセクションを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ボタンをポップアップに表示する必要がない場合は、フォームから移動して、送信イベントでその値をキャプチャし、何かが送信される前に非表示の入力要素として追加することができます。

幸運を祈ります。

1
Alex Sexton

私も同じ問題を抱えていましたが、解決策は（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>
0
Hugo Goyet

Html5準拠のブラウザ（IEではありませんが最新のff、chromeおよびsafariはそれをサポートしています））では、入力フィールドに「form」属性を設定できます。そうすることで、どこにでも配置できます。私もこの問題に苦しみ、ダイアログ入力を送信しなかった理由を理解するのに少し時間がかかりました。

0
macl