ASP.NET中UpdatePanel的javascript脚本失效的问题
问题:大概意思如下:
<UpdatePanel> <ContentTemplate> <asp:TextBox ID="aaa"/> </ContentTemplate> </UpdatePanel>
<script> $(document).ready(function(){ var id = "<%= aaa.ClientID%>"; $("#"+id).click(function(){ alert("aaa"); }); }); </script>
第一次点击TextBox是能弹出对话框,但是经过刷新之后点击就失效了。请问怎么解决?
回答: 因为Updatapanel没有postback,你的js不会重新加载。所以失效。你在你的页面加一段这样的代码就可以了: <script type="text/javascript" language="javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_endRequest(function () { // re-bind your jquery events here
$(document).ready(function(){ var id = "<%= aaa.ClientID%>"; $("#"+id).click(function(){ alert("aaa"); }); }); }
); </script>
UpdatePanel 中js失效问题2010-06-21 18:02UpdatePanel来回往返不会保留 Javascript 或其他客户端技术(如 Adobe Flash)生成的任何效果。
因此在局部刷新之后要重新注册js
关于这个问题困扰了很久了 刚开始使用的时候 由于整个页面都只有一个updatepanel,发现只要有它页面回传之后 开始加载的js就会失效,问了同学 群里的朋友 也都没能说的特别清楚的。
只能自己琢磨,于是发现在后台用ScriptManager.RegisterStartupScript(),这个可以解决 问题是 每次回传都要调用一下很麻烦,总觉得应该有更好的解决办法,可是自己能力有限也找不出来。
在后来发现只要控件不再updatepanel里边 那先前加载的JS就不会失效,于是总是想办法吧缩小updatepanel的范围,导致一个页面有很多的Updatepanel,更愁人。
今天又遇到这个问题了 于是又是goole有事百度的 看了很多种方法 发现了一个比较好的方法。
在EndRequestHandler的方法里可以有多个方法 这样问题就很好的解决了效果还是挺好的。
提供两个参考网站:http://msdn.microsoft.com/zh-cn/library/bb311028.aspx
http://hi.baidu.com/a_longge2009/blog/item/9956cb23ca971ea94723e849.html
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void ProcessClick_Handler(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>PageRequestManager beginRequest Example</title> <style type="text/css"> body { font-family: Tahoma; } div.AlertStyle { background-color: #FFC080; top: 95%; left: 1%; height: 20px; width: 270px; position: absolute; visibility: hidden; } </style> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args) { var elem = args.get_postBackElement(); ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...'); } function EndRequestHandler(sender, args) { ActivateAlertDiv('hidden', 'AlertDiv', ''); } function ActivateAlertDiv(visstring, elem, msg) { var adiv = $get(elem); adiv.style.visibility = visstring; adiv.innerHTML = msg; } </script> <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel"> Last update: <%= DateTime.Now.ToString()%>. <br /> <asp:Button runat="server" ID="Button1" Text="Process 1" OnClick="ProcessClick_Handler" /> <asp:Button runat="server" ID="Button2" Text="Process 2" OnClick="ProcessClick_Handler" /> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <div id="AlertDiv" class="AlertStyle"> </div> </div> </form> </body> </html>
<div id="AlertDiv" class="AlertStyle" style="color:Red;width:100%; text-align:center;"></div> 或者 <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate><div style="color:Red;width:100%; text-align:center;">正在更新,请稍等...</div></ProgressTemplate> </asp:UpdateProgress> <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function BeginRequestHandler(sender, args) { var elem = args.get_postBackElement(); ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' 正在更新,请稍等...'); } function EndRequestHandler(sender, args) { doSearch(); //重新注册js ActivateAlertDiv('hidden', 'AlertDiv', ''); } function ActivateAlertDiv(visstring, elem, msg) { var adiv = $get(elem); adiv.style.visibility = visstring; adiv.innerHTML = msg; } </script> <script language="javascript" type="text/javascript"> doSelectChange = function (num) { var ctlSelectSearchFieldId = "#selSearchField_" + num; var ctlSelectSearchExpressionId = "#selSearchExpression_" + num; var ctlTxtSearch = "#txtSearch_" + num; var ctlLblUnitId = "#lblUnit_" + num; var ctlHiddenUnitId = "#hiddenUnit_" + num; var selValue = $(ctlSelectSearchFieldId).attr("value"); var selExpressionHtml1 = ""; selExpressionHtml1 += "<option value=\"请选择\">-请选择-</option>\r\n"; selExpressionHtml1 += "<option value=\"大于等于\">大于等于</option>\r\n"; selExpressionHtml1 += "<option value=\"等于\" >等于</option>\r\n"; selExpressionHtml1 += "<option value=\"小于等于\" >小于等于</option>\r\n"; var selExpressionHtml2 = ""; selExpressionHtml2 += "<option value=\"请选择\">-请选择-</option>\r\n"; selExpressionHtml2 += "<option value=\"为\">为</option>\r\n"; selExpressionHtml2 += "<option value=\"包含\" >包含</option>\r\n"; if (selValue) { //下拉框 if (selValue == "展现量" || selValue == "点击量" || selValue == "点击率" || selValue == "花费" || selValue == "平均点击花费") { $(ctlSelectSearchExpressionId).html(""); $(ctlSelectSearchExpressionId).append(selExpressionHtml1); } else if (selValue == "宝贝名称" || selValue == "关键词") { $(ctlSelectSearchExpressionId).html(""); $(ctlSelectSearchExpressionId).append(selExpressionHtml2); } //单位 if (selValue == "展现量" || selValue == "点击量") { $(ctlLblUnitId).html("次"); $(ctlHiddenUnitId).attr("value","次"); } else if (selValue == "点击率") { $(ctlLblUnitId).html("%"); $(ctlHiddenUnitId).attr("value", "%"); } else if (selValue == "花费" || selValue == "平均点击花费") { $(ctlLblUnitId).html("元"); $(ctlHiddenUnitId).attr("value", "元"); } else { $(ctlLblUnitId).html(""); $(ctlHiddenUnitId).attr("value", ""); } } } doRowDelete = function (num) { var ctlDivRow = "#divRowDelete_" + num; var strRowDel = $("#ctl00_ContentPlaceHolder1_hiddenSearchRowDel").attr("value"); $(ctlDivRow).remove(); $("#ctl00_ContentPlaceHolder1_hiddenSearchRowDel").attr("value", num + "," + strRowDel); } doSearch = function () { var iCount = $("#ctl00_ContentPlaceHolder1_hiddenSearchRowCount").attr("value"); var i = parseInt(iCount) + 1; $("#btnAddSearchCondition").click(function () { var res = ""; res = res + "<div class=\"box3\" id=\"divRowDelete_" + i + "\">\r\n"; res = res + "<div class=\"p_c\">\r\n"; res = res + "<select name=\"selSearchField_" + i + "\" id=\"selSearchField_" + i + "\" style=\"width:150px;height:25px;\" onchange=\"doSelectChange(" + i + ");\">\r\n"; res = res + "<option value=\"请选择\">-请选择-</option><option value=\"展现量\">展现量</option>\r\n"; res = res + "<option value=\"点击量\">点击量</option>\r\n"; res = res + "<option value=\"点击率\">点击率</option>\r\n"; res = res + "<option value=\"花费\">花费</option>\r\n"; res = res + "<option value=\"平均点击花费\">平均点击花费</option>\r\n"; res = res + "<option value=\"宝贝名称\">宝贝名称</option>\r\n"; res = res + "<option value=\"关键词\">关键词</option>\r\n"; res = res + "</select>\r\n"; res = res + "<select name=\"selSearchExpression_" + i + "\" id=\"selSearchExpression_" + i + "\" style=\"width:150px;height:25px;\">\r\n"; res = res + "<option value=\"请选择\">-请选择-</option>\r\n"; res = res + "</select>\r\n"; res = res + "</div>\r\n"; res = res + "<div class=\"serch\">\r\n"; res = res + "<input name=\"txtSearch_" + i + "\" type=\"text\" id=\"txtSearch_" + i + "\" class=\"TextBox\" style=\"width:157px;\">\r\n"; res = res + "</div>\r\n"; res = res + "<span id=\"lblUnit_" + i + "\" name=\"lblUnit_" + i + "\"></span> \r\n"; res = res + "<input type=\"hidden\" id=\"hiddenUnit_" + i + "\" name=\"hiddenUnit_" + i + "\" value=\"\" >\r\n"; res = res + "<a href=\"javascript:doRowDelete(" + i + ");\"><img alt=\"删除\" src=\"images/delete.jpg\" style=\"border:0px;\" /></a>\r\n"; res = res + "</div>\r\n"; $("#divSearchPanel").append(res); $("#ctl00_ContentPlaceHolder1_hiddenSearchRowCount").attr("value", i); i++; }); } </script> <script language="javascript"> $(document).ready(function () { doSearch(); }); </script>