jQuery UI Dialog with ASP.NET button postback
You are close to the solution, just getting the wrong object. It should be like this:
jQuery(function() { var dlg = jQuery("#dialog").dialog({ draggable: true, resizable: true, show: 'Transfer', hide: 'Transfer', width: 320, autoOpen: false, minHeight: 10, minwidth: 10 }); dlg.parent().appendTo(jQuery("form:first"));});
$('#divname').parent().appendTo($("form:first"));
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!
<script type="text/javascript"> function openModalDiv(divname) { $('#' + divname).dialog({ autoOpen: false, bgiframe: true, modal: true }); $('#' + divname).dialog('open'); $('#' + divname).parent().appendTo($("form:first")); } function closeModalDiv(divname) { $('#' + divname).dialog('close'); }</script>......<input id="Button1" type="button" value="Open 1" onclick="javascript:openModalDiv('Div1');" />......<div id="Div1" title="Basic dialog" > <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> postback test<br /> <asp:Button ID="but_OK" runat="server" Text="Send request" /><br /> <asp:TextBox ID="tb_send" runat="server"></asp:TextBox><br /> <asp:Label ID="lbl_result" runat="server" Text="prova" BackColor="#ff0000></asp:Label> </ContentTemplate> <asp:UpdatePanel> <input id="Button2" type="button" value="cancel" onclick="javascript:closeModalDiv('Div1');" /></div>
FWIW, the form:first technique didn't work for me.
However, the technique in that blog article did:
http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html
Specifically, adding this to the dialog declaration:
open: function(type,data) { $(this).parent().appendTo("form"); }