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;\" οnchange=\"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>  &nbsp;\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>

转载于:https://www.cnblogs.com/xust/articles/2730730.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值