Why can't I trigger a submit button from within jQuery UI Dialog?
EDIT:
Some people have suggested calling submit directly on the form. This is not what I am trying to achieve. I want, specifically, to be able to call the click() event on an input type='submit' and have it submit the form like it normally would. jQuery UI Dialog appears to be interfering with this normal behavior. Please check out the jsFiddle link I have created, as the problem is re-creatable on there.
( First off I have already seen this question on StackOverflow, but the answer does not work in my situation: jQuery UI Dialog with ASP.NET button postback )
Desired Behavior:
On my page I have both a hidden field and a submit button (which is hidden via CSS).
What I want to do is use JavaScript to programmatically click this button, thereby causing the form to be submitted. Most importantly.... I want to trigger all of this from inside of a jQuery UI Dialog. Basically, the user will be making a selection inside the jQuery UI dialog that will cause the whole page to be submitted and reload.
Problem Statement
Triggering a button click like this normally works fine to submit the form. However, it fails when the action is triggered from within a jQuery UI Dialog.
As you can see in my jsFiddle code, I call jQuery's click() function on the submit button.... but the form does not actually submit! The button is indeed getting clicked by the JavaScript, but the "form submit behavior" does not occur itself. The page is not posted.
I believe the jQuery UI Dialog is somehow interfering with the form submit behavior of the button I am trying to programmatically click.
The reason I want to programmatically trigger the button click:
I cannot have the buttons located inside the dialog be submit buttons themselves. In my case, I have created a reusable JavaScript control that wraps a jQuery UI Dialog. This JS control allows the users to pick an employee. However, when an employee is picked, the desired behavior is not always going to be: form submit. (Sometimes I might want to display the picked employee on the page and not perform a submit yet.)
Additional details:
This problem is not specific to ASP.NET, but here are some additional details to help explain why I am attempting all this. I am writing an ASP.NET Web Forms app using .NET 4.5. I have begun to use JavaScript more and more for my pages, but on this particular page I want to trigger an actual postback to the server so I can handle a button click event from the ASP.NET page life cycle and populate a GridView. That is why I want to be able to use JavaScript to click an asp:button that, in turn, causes a form submit.
And most importantly... Try it Yourself ---> See jsFiddle link below.....
Again, this issue it not specific to ASP.NET. I have been able to recreate the same issue here on JsFiddle using regular HTML and jQuery UI. Here is the JsFiddle link:
As you can see in the code, I already attempted to use the "fix" of moving the jQuery UI Dialog inside the form via jQuery DOM manipulation. This does not appear to fix the issue.
Thanks! I appreciate any help!
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;
}
Answer
Just had a similar issue where I could step through the right submit button executing, but the form was just not submitting. After stepping through the jquery dialog code and not finding how it could keep the event from propagating, I just decided to do the obvious and hide the dialog right before submission. Works on your fiddle too: http://jsfiddle.net/Q4GgZ/1/
jqueryDialog.dialog('close'); // <- THIS WORKS
$('#btnSubmitForm').click();