JQuery Easyui Popup dialog to resolve the way in which the ASP. NET server control cannot execute background code (GO)

Original: JQuery Easyui Popup Dialog to resolve the way that an ASP. NET server control cannot execute background code

Jquery-easyui is a jquery-based graphical interface plug-in, using Easyui can create a lot of good-looking web interface effects, Easyui the relevant address is: http://jquery-easyui.wikidot.com/; Easyui's Chinese document address is: http://www.easyui.net/, I also use Easeyui to do some page effect. Since I like the pop-up dialog interface, I have applied the dialog class in the interface to handle some of the confirmed information, but in the use of it, the popup dialog will no longer be able to execute the code of the back-end response of the ASP. The interface is shown below.

The action is after the button is submitted, a dialog layer is popped to confirm the flow of information, but it is strange that the original ASP. NET Image server control can not be submitted, can not trigger the background button, where the code of the page is shown below, note that if you want to start the dialog box default does not appear, by setting the closed : True, the property can be.

<script language= "JavaScript" >
$ (function () {
var dlg = jQuery ("#dd"). Dialog ({
Draggable:true,
Resizable:true,
Closed:true,
Show: ' Transfer ',
Hide: ' Transfer ',
Autoopen:false,
width:600,
Minheight:10,
Minwidth:10
});
});

function Open1 () {
$ (' #dd '). Dialog (' Open ');
}
function Close1 () {
$ (' #dd '). Dialog (' Close ');
}

</script>

The corresponding popup layer content is as follows:

<div id= "DD" title= "process Flow" icon= "Icon-save" style= "overflow:auto;padding:10px;" >
<table width= "100%" cellpadding= "0" cellspacing= "1" border= "0" id= "Table1" >
<tr>
&LT;TD >
<asp:datagrid id= "DG" runat= "Server" width= "100%" cssclass= "DG" autogeneratecolumns= "False"
Pagesize= "allowsorting=" True "datakeyfield=" ID "height=" 0px "onitemdatabound=" Dg_itemdatabound ">
<edititemstyle cssclass= "EditItem" ></EditItemStyle>
<alternatingitemstyle cssclass= "AlternatingItem" ></AlternatingItemStyle>
<itemstyle cssclass= "Item" ></ItemStyle>
<footerstyle cssclass= "Footer" ></FooterStyle>
<Columns>
<asp:templatecolumn headertext= "ID" visible= "false" >
<ItemTemplate>
<asp:label id= "Lblid" runat= "server" text= ' <%# DataBinder.Eval (Container, "dataitem.id")%> ' ></asp: Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:templatecolumn headertext= "serial number" >
<ItemTemplate>
<asp:label id= "Lblorderbyid" runat= "server" text= ' <%# DataBinder.Eval (Container, "Dataitem.orderbyid")%> ' ></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:templatecolumn headertext= "Processing Type" >
<ItemTemplate>
<asp:label id= "Lblproctype" runat= "server" text= ' <%# DataBinder.Eval (Container, "Dataitem.proctype")%> ' ></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:templatecolumn headertext= "process name" >
<ItemTemplate>
<asp:label id= "Lblflowname" runat= "server" text= ' <%# DataBinder.Eval (Container, "Dataitem.flowname")%> ' ></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
<asp:templatecolumn headertext= "Process handling Person" >
<ItemTemplate>
<asp:label id= "Lblproc_user" runat= "server" text= ' <%# DataBinder.Eval (Container, "Dataitem.procuser")%> ' ></asp:Label>
<asp:dropdownlist id= "Ddlproc_user" runat= "Server" visible= "false"/>
</ItemTemplate>
</asp:TemplateColumn>
<asp:templatecolumn headertext= "Process step description" >
<ItemTemplate>
<asp:label id= "Lblmayaddflow" runat= "server" text= ' <%# DataBinder.Eval (Container, "Dataitem.flownote")%> ' ></asp:Label>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</td>
</tr>
</table>

<table class= "Formitem_pagestyle" cellspacing= "0" cellpadding= "0" border= "0" style= "width:100%;
Border-collapse:collapse; " >
<tr>
&LT;TD class= "Pagebutton" align= "right" style= "height:30px; width:100%; " >
<asp:imagebutton id= "Imgbtnok" runat= "Server" imageurl= "~/themes/default/btn_savetobox.gif"
onclick= "Imgbtnok_click"/>&nbsp;

</td>
</tr>
</table>
</div>
<br/><br/>
<div align= "center" >

<asp:imagebutton id= "Imgbtnback" runat= "Server" imageurl= "~/themes/default/btn_back.gif"
Causesvalidation= "false" onclick= "Imgbtnback_click"/>

</div>

The main problem with search-related problems is that jquery will append the dialog elements into the body, not the form. After studying the source code of the page, it was found that the dynamically generated HTML elements were added to the end of the page and the form element after the JQuery UI dialog control was initialized, and the original dialog template part (which contained the form elements) was moved to the dynamically generated HTML element. That is, the form that was originally in the form is moved outside the form after the dialog is initialized, which causes the form to fail in the dialog template.

The workaround is to add one line of code: Dlg.parent (). AppendTo (JQuery ("Form:first"));

That is, the script that modifies the start section to create the dialog box:

<script language= "JavaScript" >
$ (function () {
var dlg = jQuery ("#dd"). Dialog ({
Draggable:true,
Resizable:true,
Closed:true,
Show: ' Transfer ',
Hide: ' Transfer ',
Autoopen:false,
width:600,
Minheight:10,
Minwidth:10
});
dlg.parent (). AppendTo (JQuery ( " Form:first " ));
});

function Open1 () {
$ (' #dd '). Dialog (' Open ');
}
function Close1 () {
$ (' #dd '). Dialog (' Close ');
}
</script>

You can also handle the problem in this way:

$ (' #dialog_link '). Click (function () {

$ (' #dialog '). Dialog (' Open ');
$ (' #dialog '). Parent (). AppendTo ($ ("Form:first"))
return false;

});

The above-mentioned problem can be referred to a foreigner's question. Reply to article: JQuery UI Dialog with ASP. NET button Postback.

JQuery Easyui Pop-up dialog box to resolve the way that an ASP. NET server control cannot execute background code (GO)