I have a jQuery UI Dialog working great on my ASP.NET page:
jQuery(function() {
jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
});
jQuery(document).ready(function() {
jQuery("#button_id").click(function(e) {
jQuery('#dialog').dialog('option', 'position', [e.pageX + 10, e.pageY + 10]);
jQuery('#dialog').dialog('open');
});
});
My div:
<div id="dialog" style="text-align: left;display: none;">
<asp:Button ID="btnButton" runat="server" Text="Button" onclick="btnButton_Click" />
</div>
But the btnButton_Click is never called... How can I solve that?
More information: I added this code to move div to form:
jQuery("#dialog").parent().appendTo(jQuery("form:first"));
But still without success...
Using this code solved my problem and it worked in every browser, Internet Explorer 7, Firefox 3, and Google Chrome. I start to love jQuery... It's a cool framework.
I have tested with partial render too, exactly what I was looking for. Great!
I know this is an old question, but for anyone who have the same issue there is a newer and simpler solution: an "appendTo" option has been introduced in jQuery UI 1.10.0
http://api.jqueryui.com/dialog/#option-appendTo
Primarily it's because jQuery moves the dialog outside of the form tags using the DOM. Move it back inside the form tags and it should work fine. You can see this by inspecting the element in Firefox.
You are close to the solution, just getting the wrong object. It should be like this:
With ASP.NET just use
UseSubmitBehavior="false"
in your ASP.NET button:Reference: Button.UseSubmitBehavior Property
The solution from Robert MacLean with highest number of votes is 99% correct. But the only addition someone might require, as I did, is whenever you need to open up this jQuery dialog, do not forget to append it to parent. Like below:
var dlg = $('#questionPopup').dialog( 'open'); dlg.parent().appendTo($("form:first"));