Updatepanel 后端返回后,在 Updatepanel 内控件的前端 js 失效问题
实际情况:点击下箭头弹出列表,点击列表上的隐藏按钮隐藏列表。
背景:模块没有使用Js或者Jquery的Ajax功能,而是使用Asp.Net的Ajax控件——UpdatePanel + ScriptManager 的方式
问题:按钮均使用.Net的单击事件,页面加载时功能正常,当使用了如Ask后端事件返回后,前端的 Hide 功能失效
截图如下:
代码如下:
$(document).ready(function () {
RegisterJs();
}); function RegisterJs() { $(".NewestArea").hide(); //显示Note区域
$(".ShowNoteListArea").click(function () {
$(".NewestArea").hide("slow");
$(".NoteListArea").slideDown("slow");
}); //隐藏Note区域
$(".HideNoteListArea").click(function () {
$(".NewestArea").show("slow");
$(".NoteListArea").slideUp("slow");
return false;
});
}
<asp:UpdatePanel ID="UpdatePanelNoticeControl" runat="server">
<ContentTemplate> <!-- NoticeControl控件 -->
<div class="NoticeControl"> <!-- 最新Note区域 -->
<div class="NewestArea"> <!-- 点击显示Note区域 -->
<span class="ShowNoteListArea glyphicon glyphicon-chevron-down"></span> <!-- 最新Note标签 -->
<asp:Label ID="NewestShow" runat="server"></asp:Label> </div> <!-- NoteList区域 -->
<div class="NoteListArea">
<ul>
<li>
<ul>
<asp:Repeater ID="NoteList" runat="server">
<ItemTemplate>
<li>
<%#Eval("NoteContent")%>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
<li>
<asp:TextBox ID="TxtNoteContentValue" runat="server" TextMode="MultiLine" Width="500px" Height="50px"></asp:TextBox>
</li>
<li>
<!--<input class="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" type="button" value="Hide" />-->
<asp:LinkButton ID="HideNoteListArea" CssClass="HideNoteListArea ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" runat="server">
<span class="glyphicon glyphicon-chevron-up" style="margin-right: -8px;"></span>
<span class="ButtonText">Hide</span>
</asp:LinkButton>
<asp:LinkButton ID="AskGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" OnClick="AskGo_Click" runat="server">
<span class="glyphicon glyphicon-question-sign" style="margin-right: -8px;"></span>
<span class="ButtonText">Ask</span>
</asp:LinkButton>
<asp:LinkButton ID="AnswerGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="AnswerGo_Click" runat="server">
<span class="glyphicon glyphicon-info-sign" style="margin-right: -8px;"></span>
<span class="ButtonText">Answer</span>
</asp:LinkButton>
<asp:LinkButton ID="CompleteGo" CssClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" OnClick="CompleteGo_Click" runat="server">
<span class="glyphicon glyphicon-ok-circle" style="margin-right: -8px;"></span>
<span class="ButtonText">Complete</span>
</asp:LinkButton>
<asp:Label ID="ResultShow" runat="server"></asp:Label>
</li>
</ul>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AskGo" />
<asp:AsyncPostBackTrigger ControlID="AnswerGo" />
<asp:AsyncPostBackTrigger ControlID="CompleteGo" />
</Triggers>
</asp:UpdatePanel>
后端事件省略。
——————————————————————————————————————————————————————
问题解决方案一:
该方法网络上均有提及,然而并没有解决我的问题(求圈子朋友帮忙解答),个人表示对原理还是半知不解,继续研究中。方法如下:
在每一个可能引起对前端Js影响的后端事件结束位置使用下面代码注册Js:
ScriptManager.RegisterClientScriptBlock(UpdatePanelNoticeControl, this.GetType(), "RegisterJs", "RegisterJs();", true);
——————————————————————————————————————————————————————
问题解决方案二:
百度另寻来方法:
因为Updatapanel没有postback,你的js不会重新加载。所以失效。更改你的页面代码如下就可以了:
<script type="text/javascript"> var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () { // re-bind your jquery events here
$(document).ready(function () {
RegisterJs();
}); }); $(document).ready(function () {
RegisterJs();
}); function RegisterJs() { $(".NewestArea").hide(); //显示Note区域
$(".ShowNoteListArea").click(function () {
$(".NewestArea").hide("slow");
$(".NoteListArea").slideDown("slow");
}); //隐藏Note区域
$(".HideNoteListArea").click(function () {
$(".NewestArea").show("slow");
$(".NoteListArea").slideUp("slow");
return false;
});
} </script>
果然,问题解决了!
但是到此时,问题的第一个解决方案没有行通,不免心不安,所以挂单求解答!圈子的大牛们,帮帮忙!我也继续到百度寻求答案!
Updatepanel 后端返回后,在 Updatepanel 内控件的前端 js 失效问题的更多相关文章
- WebForm服务器验证控件与前端js自定义验证共同使用
问题: 前端aspx页面中需要在button中添加OnClientClick事件后,这个OnClientClick所执行的自定义的客户端js验证:这个时候,所有的服务器验证控件都会失效! ...
- WinForm容器内控件批量效验是否同意为空?设置是否仅仅读?设置是否可用等方法分享
WinForm容器内控件批量效验是否同意为空?设置是否仅仅读?设置是否可用等方法分享 在WinForm程序中,我们有时须要对某容器内的全部控件做批量操作.如批量推断是否同意为空?批量设置为仅仅读.批量 ...
- WinForm容器内控件批量效验是否允许为空?设置是否只读?设置是否可用等方法分享
WinForm容器内控件批量效验是否允许为空?设置是否只读?设置是否可用等方法分享 在WinForm程序中,我们有时需要对某容器内的所有控件做批量操作.如批量判断是否允许为空?批量设置为只读.批量设置 ...
- Duilib 鼠标在某控件例如按钮上悬停后,对目标控件操作
其实对WM_MOUSEHOVER消息的处理,因为WindowImplBase基类中对此消息未处理,所以在自己的窗口类中实现: .h文件中加入 LRESULT OnMouseHover( UINT uM ...
- Repeater事件OnItemCommand取得行内控件
记录一下,主要是这句:TextBox txtNum = e.Item.FindControl("txtNum") as TextBox; Repeater真是太强了,太灵活.除了R ...
- TGraphicControl(自绘就2步,直接自绘自己,不需要调用VCL框架提供的函数重绘所有子控件,也不需要自己来提供PaintWindow函数让管理框架来调用)与TControl关键属性方法速记(Repaint要求父控件执行详细代码来重绘自己,还是直接要求Invalidate无效后Update刷新父控件,就看透明不透明这个属性,因为计算显示的区域有所不同)
TGraphicControl = class(TControl) private FCanvas: TCanvas; procedure WMPaint(var Message: TWMPaint) ...
- SELECT控件操作的JS代码示例
SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...
- Webfrom 生成流水号 组合查询 Repeater中单选与复选控件的使用 JS实战应用
Default.aspx 网页界面 <%@ Page Language="C#" AutoE ...
- 整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用
整理部分JS 控件 WEB前端常用的做成Jsp项目,方便今后直接用 最近又没时间了,等用时间了,再加入更多的, 源码下载: http://download.csdn.net/detail/liang ...
随机推荐
- 常用的头文件—— common.h
#include <stdio.h> #include <stdlib.h> #include <sys/types.h> #include <sys/sta ...
- Senparc.Weixin.TenPay 正式发布
微信支付刚出来的时候,和公众号的绑定关系很深(甚至旧版本使用的就是公众号的appId),随着微信生态的逐步丰富,微信支付越来越成为一个独立的平台,同时服务于公众号.小程序.开放平台.企业号/企业微信等 ...
- CentOS 7 - 更新JDK,删除旧JDK,安装新JDK
一,检查是否安装JDK. yum list installed | grep java 二,删除旧JDK. yum -y remove java-1.7.0-openjdk* yum -y remov ...
- Windows下Tomcat内存占用过高问题跟踪(ProcessExplorer+jstack)
一.问题描述 Tomcat下面部署很多个java项目的war包,tomcat启动一段时间后,发现cpu占用过高,整个界面卡死! 二.通过process explorer查看java进程下的线程 pro ...
- python写的压缩软件
import tkinterimport tkinter.filedialogimport osimport zipfileimport tkinter.messagebox #创建住窗口root = ...
- GIT的初级使用
安装git [root@localhost ~]# yum -y install git [root@localhost ~]# git --version git version 1.8.3.1 初 ...
- Mac OS Sierra如何打开任何来源
我们知道在Mac升级到最新的Mac OS Sierra系统之后,随之而来的是第三方应用都无法打开,提示的是无法打开或扔进废纸篓.而在之前的版本系统中,我们知道在系统偏好设置-->安全性与隐私-- ...
- Google Chrome 书签导出并生成 MHTML 文件
目的 因为某些原因需要将存放在 Google Chrome 内的书签导出到本地,所幸 Google Chrome 提供了导出书签的功能. 分析 首先在 Google Chrome 浏览器当中输入 ch ...
- Struts标签<bean:write><logic:iterate></logic:equal>的组合使用小例
form表单中的一个下拉列表控件的代码如下 <select name="taskname" id="taskname" class="selec ...
- SonarQube 集成 GitLabCI
本文是用于分析SonarQube代码的质量,每次在GitLab上提交代码时都使用GitLab-CI运行器进行检查. 1.SonarQube with GitLab 安装插件GitLab-plugin ...