客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
jquery-easyui是一个基于jquery的图形界面插件，利用easyui可以创建很多好看的网页界面效果，easyui的相关地址是：http://jquery-easyui.wikidot.com/； easyui的中文文档地址是：http://www.easyui.net/，本人也利用easeyUI在做一些页面效果。由于我很喜欢那种弹出的对话框界面，因此在界面中应用了Dialog类来处理一些确认的信息，但在利用中发现，弹出的对话框，不能再继续执行asp.net按钮的后台响应代码。界面如下所示。 操作是在按钮提交后，弹出一个对话框层，用来确认流程的信息，不过奇怪的是里面原本是asp.net图片服务器控件却不能提交了，无法触发后台按钮，其中页面的代码如下所示，注意如果要对话框默认开始不显示出来，通过设置closed:true，属性即可。
<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> 对应的弹出层内容如下所示：
<div id="dd" title="处理流程" icon="icon-save" style="overflow:auto;padding:10px;">
<table width="100%" cellpadding="0" cellspacing="1" border="0" id="Table1"> <tr> <td > <asp:DataGrid ID="dg" runat="server" Width="100%" CssClass="dg" AutoGenerateColumns="False" PageSize="20" AllowSorting="True" DataKeyField="ID" Height="0px" OnItemDataBound="dg_ItemDataBound"> <EditItemStyle CssClass="EditItem"></EditItemStyle> <AlternatingItemStyle CssClass="AlternatingItem"></AlternatingItemStyle> <ItemStyle CssClass="Item"></ItemStyle> <HeaderStyle CssClass="Header"></HeaderStyle> <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="序号"> <ItemTemplate> <asp:Label ID="lblOrderbyId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.OrderbyId") %>'></asp:Label> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="处理类型"> <ItemTemplate> <asp:Label ID="lblproctype" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.proctype") %>'></asp:Label> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="流程名称"> <ItemTemplate> <asp:Label ID="lblflowname" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.flowname") %>'></asp:Label> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn HeaderText="流程处理人"> <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="流程步骤描述"> <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> <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" /> <img src="http://www.cnblogs.com/Themes/Default/btn_close.gif" border="0" onclick="close1()"/> </td> </tr> </table> </div> <br /><br /> <div align="center"> <img src="http://www.cnblogs.com/Themes/Default/btn_savetobox.gif" border="0" onclick="open1()"/> <asp:ImageButton ID="imgbtnBack" runat="server" ImageUrl="~/Themes/Default/btn_back.gif" CausesValidation="false" OnClick="imgbtnBack_Click" /> </div>
搜索相关问题发现，其中主要问题是出在：JQuery会把Dialog的元素append到Body里面，而不是form里面。研究了页面源码后发现，jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部、form元素的后面，而原始的Dialog模板部分（其内包含表单元素）也被移到了 动态生成的HTML元素内。也就是说，原先在form内的表单在Dialog初始化后就被移到form外了，这就导致了Dialog模板内表单全部失效。 解决方法是增加一行代码即可：dlg.parent().appendTo(jQuery("form:first")); 也就是修改开始部分创建对话框的脚本即可：
<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>
另外你也可以通过这种方法来处理该问题： $('#dialog_link').click(function () {
$('#dialog').dialog('open'); }); 上述的解决问题详细可以参考老外的一篇问题回复文章：JQuery UI Dialog with Asp .NET button postback..
|
请发表评论