編集：なぜjQuery UIダイアログから送信ボタンをトリガーできないのですか？
フォームに直接送信することを提案している人もいます。これは私が達成しようとしていることではありません。具体的には、入力タイプ= 'submit'でclick（）イベントを呼び出し、通常と同じようにフォームを送信するようにしたいと思います。 jQuery UIダイアログがこの通常の動作を妨害しているように見えます。問題が再現可能なので、私が作成したjsFiddleリンクを確認してください。
（まず第一に、私はすでにStackOverflowの上でこの質問を見てきましたが、答えは私の状況では動作しません：jQuery UI Dialog with ASP.NET button postback）
望ましい行動：私は両方を持っている私のページで
隠しフィールドと送信ボタン（CSSを介して隠されています）。
JavaScriptを使用してこのボタンをクリックすると、フォームが送信されます。最も重要なことは....私はjQuery UIダイアログの内側からこれをすべてトリガーしたいと思っています。基本的に、ユーザーはjQuery UIダイアログ内で選択して、ページ全体を送信してリロードします。
問題文
このようなボタンのクリックは、通常、フォームを送信するために正常に動作トリガ。ただし、アクションがjQuery UIダイアログ内でトリガーされると失敗します。
私のjsFiddleコードに見られるように、私はsubmitボタンのjQueryのclick（）関数を呼び出します....しかし、フォームは実際には送信されません！ボタンは実際にはJavaScriptによってクリックされていますが、「フォーム送信動作」自体は発生しません。ページは投稿されていません。
jQuery UIダイアログが、プログラムでクリックしようとしているボタンのフォーム送信動作を妨害していると思います。
私はプログラムでボタンのクリックをトリガーにしたい理由：
私は内部ダイアログにあるボタンは、ボタン自体を提出することはできません。私の場合、jQuery UIダイアログをラップする、再利用可能なJavaScriptコントロールを作成しました。このJSコントロールにより、ユーザーは従業員を選ぶことができます。ただし、従業員が選出された場合、希望の動作はであり、常にになるとは限りません。
この問題はASP.NETに固有のものではないが、ここではいくつかの追加の詳細は、以下のとおりです。
追加の詳細は、（。時々私はまだ提出行うページに選んだ従業員を表示していないしたい場合があります）なぜ私がこのすべてを試みているのかを説明するのに役立ちます。 NET 4.5を使用してASP.NET Webフォームアプリケーションを作成しています。私は自分のページでJavaScriptをますます使い始めましたが、この特定のページでは、サーバーの実際のポストバックをトリガーしたいので、ASP.NETページのライフサイクルからボタンのクリックイベントを処理してGridViewに移入できます。そのため、JavaScriptを使用してasp：ボタンをクリックしてフォームの送信を可能にしたいのです。
そして、最も重要なのは...それを自分で試してみてください---> ASP.NETに
繰り返しますが、この問題は、それ固有のものではありません.....以下jsFiddleリンクを参照してください。私は通常の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;
}