編集：
一部の人々は、フォーム上で直接 submit を呼び出すことを提案しています。これは私が達成しようとしているものではありません。具体的には、input type='submit' で click() イベントを呼び出して、通常どおりにフォームを送信できるようにしたいと考えています。jQuery UI ダイアログは、この通常の動作を妨げているようです。私が作成した jsFiddle リンクを確認してください。問題はそこで再現可能です。
(まず、StackOverflow でこの質問を既に見ましたが、私の状況では答えが機能しません: jQuery UI Dialog with ASP.NET ボタン ポストバック)
望ましい動作:
私のページには、非表示フィールドと送信ボタン (CSS で非表示) の両方があります。
私がやりたいことは、JavaScript を使用してプログラムでこのボタンをクリックし、フォームを送信することです。最も重要なのは.... jQuery UIダイアログ内からこれらすべてをトリガーしたいです。基本的に、ユーザーは jQuery UI ダイアログ内で選択を行い、ページ全体が送信されてリロードされます。
問題文
このようにボタンのクリックをトリガーすると、通常はフォームを送信するのに問題なく動作します。ただし、アクションが jQuery UI ダイアログ内からトリガーされると失敗します。
jsFiddle コードでわかるように、送信ボタンで jQuery の click() 関数を呼び出しますが、フォームは実際には送信されません! ボタンは確かに JavaScript によってクリックされますが、「フォーム送信動作」自体は発生しません。ページは掲載されていません。
jQuery UI ダイアログが、プログラムでクリックしようとしているボタンのフォーム送信動作に干渉していると思います。
ボタンのクリックをプログラムでトリガーしたい理由：
ダイアログ内にあるボタンを送信ボタン自体にすることはできません。私の場合、jQuery UI ダイアログをラップする再利用可能な JavaScript コントロールを作成しました。この JS コントロールにより、ユーザーは従業員を選択できます。ただし、従業員が選ばれたとき、望ましい動作が必ずしもフォーム送信になるとは限りません。(選択した従業員をページに表示し、まだ送信を実行したくない場合があります。)
追加の詳細：
この問題は ASP.NET に固有のものではありませんが、私がこれを試みている理由を説明するのに役立つ追加の詳細をいくつか示します。.NET 4.5 を使用して ASP.NET Web フォーム アプリを作成しています。ページで JavaScript をますます使用するようになりましたが、この特定のページでは、サーバーへの実際のポストバックをトリガーして、ASP.NET ページのライフ サイクルからボタン クリック イベントを処理し、GridView にデータを設定できるようにしたいと考えています。そのため、JavaScript を使用して asp:button をクリックし、フォーム送信を実行できるようにしたいと考えています。
そして最も重要なことは...自分で試してみてください-->以下のjsFiddleリンクを参照してください.....
繰り返しますが、これは ASP.NET に固有の問題ではありません。通常の HTML と jQuery UI を使用して、JsFiddle で同じ問題を再現できました。JsFiddle リンクは次のとおりです。
コードでわかるように、jQuery DOM 操作を介してフォーム内で jQuery UI ダイアログを移動する「修正」を使用しようとしました。これは問題を解決していないようです。
ありがとう！どんな助けにも感謝します！
HTML
<html>
<head></head>
<body>
<form action="http://www.google.com/index.html" method="post">
<input type="button" value="Open jQuery dialog" id="btnOpenDialog" />
<br /><br /><br />
The button below submits the form correctly if you click it.<br />
However, when I try to trigger click() event on this button <u>from within the jQuery UI Dialog above</u> then the form <b>fails to be submitted.
</b><br />
<input type="submit" value="Submit Form" id="btnSubmitForm" />
<input type="hidden" id="hdnEmployeeChosen" value="" />
</form>
<div id="divPopup" class="dialogClass" style="display: none;">
Picking an employee below <b>ought to</b> cause the form to submit, but sadly it does not...
<br /><br />
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Weird Al" />
Weird Al Yankovic
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="Dracula" />
Count Dracula
</div>
<div class="divOptions">
<input type="button" value="Pick" class="pickButton" employeeName="David" />
David Copperfield
</div>
</div>
</body>
JavaScript
$(document).ready(function ()
{
var jqueryDialog = $('#divPopup')
.dialog({
autoOpen: false,
modal: true,
title: 'My Dialog',
width: 300,
height: 300,
draggable: false,
resizable: false
});
// This "fix" does not appear to help matters..........
jqueryDialog.parent().appendTo($("form:first"));
$('#btnOpenDialog').click(function () {
jqueryDialog.dialog('open');
});
$('.pickButton').click(function () {
// Put picked value into hidden field
var pickedEmployee = $(this).attr('employeeName');
$('#hdnEmployeeChosen').val(pickedEmployee);
// Try to cause a submit (ASP.NET postback in my case)
// THIS PART DOES NOT WORK.................
$('#btnSubmitForm').click();
//alert($('#hdnEmployeeChosen').val());
});
});
CSS
form {
margin: 5px;
border: 1px solid black;
background-color: #EEE;
padding: 15px 5px;
}
.dialogClass {
border: 1px solid black;
padding: 5px;
margin: 5px;
background-color: LightBlue;
font-size: 14px;
}
.pickButton {
margin-right: 5px;
}
.divOptions {
margin-bottom: 3px;
}