ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery UIのダイアログがsubmit_jqueryできない問題の解決策

jQuery UIのダイアログがsubmit_jqueryできない問題の解決策

WBOY
WBOYオリジナル
2016-05-16 18:12:21883ブラウズ

具体的な症状は次のとおりです:
1. 送信ボタンが無効であり、クリックしても応答がありません。
2. 他の手段を使用してページを送信した場合でも、サーバーはダイアログ内のフォーム データを取得できません。

理由: JQuery は、ダイアログ要素をフォームではなく本文に追加します。ページのソース コードを調査した結果、jQuery UI Dialog コントロールが初期化されたときに動的に生成された HTML 要素が、ページの最後と form 要素の後ろに追加され、元の Dialog テンプレート パーツ (form 要素が含まれている) が追加されたことがわかりました。 HTML 要素内で動的に生成されるものにも移動されました。つまり、Dialog が初期化された後、元々フォーム内にあったフォームがフォーム外に移動されたため、Dialog テンプレート内のすべてのフォームが無効になってしまいました。

方法 1:
jQuery UI のダイアログのデザインが機能なのかバグなのかわかりません。 Dialog で通常のページ送信を実現するために、上記の分析に基づいて、Dialog コントロールによって動的に生成された HTML 要素を jQuery UI コントロールの「open」イベント ハンドラーの form 要素に移動するという簡単な解決策を見つけました。コードは次のとおりです:
コードを使用します: $("#dialog").parent().appendTo("/html/body/form[0]");
または
$("#dlg") ).dialog({
open: function () {
$("body > div[role=dialog]").appendTo("form#aspnetForm");
}
});
コード中の「aspnetForm」はASP.NETアプリケーションが自動生成した現在のページのフォーム要素IDであり、ご利用の際はご自身のページのフォームIDに変更することができます。

2 番目の方法:

のような DIV を追加し、この DIV にダイアログを書き込みます。
$("#dialog").parent().appendTo("#dialog_target");

3 番目の方法:
1. Dialog の JS コードを変更し、 2. ダイアログ内のカスタム HTML は使用されませんが、IFRAME が直接追加され、内部の HTML が別のページに移動され、親ページと対話しても問題ありません (私が使っている方法は、これらの独立したコードを再利用できる方法です

2 番目の方法は、サーバーイベントに応答でき、効果が良いため、優先して使用できます。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。