UpdatePanel和jQuery不兼容 局部刷新jquery失效

在做项目中发现，在使用了UpdatePanel的地方，局部刷新后，jquery失效了。

后来网上一查，才发现，jquery中的ready事件会在DOM完全加载后运行一次，而当我们实用了UpdatePanel，它只局部更新，并未重新加载页面所有Dom，所以jquery中ready事件将不会再次执行。所以，我们可以将ready事件中执行的代码提取出来，然后通过捕获ScriptManager的EndRequest事件，在每次 UpdatePanel局部刷新之后执行一次jQuery初始化代码：


代码如下:

//处理ajax和ScriptManager的冲突
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
function EndRequestHandler() {
$(function () {
$("tbody").find("input:checkbox").each(function (key, val) {
$(val).click(function () {
var cbxId = $(this).attr("id");
var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state, "fid": "SamID" }, isReturnStatus);
});
});
$("thead").find("input:checkbox").click(
function () {
if (confirm("确定要更新这一列数据吗？") == true) {
var cbxId = $(this).attr("id");

var name = cbxId.substr(16);
var v = "tbody ." + name + " input[type='checkbox']";
if ($(this).attr("checked") == "checked") {
$(v).attr("checked", true);
}
else {
$(v).attr("checked", false);
}

var state = $(this).attr("checked");
$.post("Ajax/UpdateStatus.ashx", { "id": cbxId, "isChecked": state }, isReturnStatus);
}
else {
if ($(this).attr("checked") == "checked") {
$(this).attr("checked", false);
}
else {
$(this).attr("checked", true);
}
}
});

});
initCheckedStaus();
}

赞 (0)

相关推荐

  • vs.net控件updatePanel实现无刷新的方法

    页面部分 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server">    </asp:ScriptManager>    <h2>        使用VS控件updatePanel实现无刷新    </h2>    <p>         <asp:UpdatePanel ID="UpdatePanel1"

  • 使用updatepanel局部刷新实现注册时对用户名的检测示例

    通过将控件放入到updatepanel中,实现局部刷新.前台代码: 复制代码 代码如下: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> //必须有且写在updatepanel前面<asp:updatepanel runat="server" id="updatepanel1"><c

  • asp.net UpdatePanel实现无刷新上传图片

    1)前台 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • UpdatePanel和jQuery不兼容 局部刷新jquery失效

    在做项目中发现,在使用了UpdatePanel的地方,局部刷新后,jquery失效了. 后来网上一查,才发现,jquery中的ready事件会在DOM完全加载后运行一次,而当我们实用了UpdatePanel,它只局部更新,并未重新加载页面所有Dom,所以jquery中ready事件将不会再次执行.所以,我们可以将ready事件中执行的代码提取出来,然后通过捕获ScriptManager的EndRequest事件,在每次 UpdatePanel局部刷新之后执行一次jQuery初始化代码: 复制代码

  • jQuery+ajax实现局部刷新的两种方法

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(). 第一种: 当某几个页面都有相同的头部.导航.底部的时候,点击导航链接可以在几个页面中切换,此时想要的效果是点击链接后只切换内容部分,其他不再重新加载.上代码. jq-load.html: <!DOCTYPE html> <html> <head> <title>ajax局部刷新</title> </h

  • 使用jquery局部刷新(jquery.load)从数据库取出数据

    使用jquery局部刷新(jquery.load)从数据库取出数据

    因为Jquery 是一个很好的javascript框架,我对他的运用还只是表面的,处于一个初步学习的阶段,所以通过博客记录我学习的点滴,大神可以略过,写此文章希望可以帮到和我一样的初学者,共同分享,共同进步. 现在ajax越来越受到web开发者的青睐,jquery提供了很好的ajax交互,我这里用的是直接返回字符串,用的是jquery.load方法,是很基础的. 项目下载 需要注意两点: 1.jquery.js的路径要正确,不然很难达到你想要的效果. 2.需要使用$(document).read

  • jQuery实现AJAX定时刷新局部页面实例

    方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func

  • JQuery的Ajax请求实现局部刷新的简单实例

    JQuery的Ajax请求实现局部刷新的简单实例

    请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面. 案例:如图 我要实现状态的更改,用JQuery的Ajax更改完之后图标发生改变,实现页面的局部刷新 原理:局部刷新是刷新页面的一部分,在此案例中实现的只是图标的改变,把后台代码和前台现实的图标分离,并不是对数据库重新做查询,二是后台数显数据修改之后,前台直接改

  • 用Jquery.load载入页面实现局部刷新

    因为开始不懂Jquery,一直想用jquery.load的方法载入新的页面,以实现局部刷新,结果发现载入进来的页面与原来单独的页面不一样,样式没了,后来在网上查了一下,发现了解决办法,这是别人的回答: 是这样的,如果不过滤掉一些内容的话,直接加载,会使页面混乱的,比如新的页面也存在<body>标签,加载进来后,一个页面就会存在两个<body>标签是不规范的的HTML.这个是在jquery.load()函数中规定的.一般加载进来的页面需要自己根据加载的内容的元素重新定义CSS样式和添

  • jQuery ajaxSubmit 实现ajax提交表单局部刷新

    AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域

  • jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    jQuery 翻页组件yunm.pager.js实现div局部刷新的思路

    前端的翻页插件有很多,bootstrap的翻页界面看起来就不错,做起来也易于上手,但应用于项目中的翻页实现还有有几个难点,分别是: 如何封装一个翻页插件,如题中的yunm.pager.js. 涉及到的div局部刷新该如何做. 在没给大家介绍正文之前,先给大家展示下效果图,如果感觉还不错,请继续往下阅读: 翻页的总体流程涉及到的知识点很多,这篇文章我们也主要来关注以上两点,其余的内容,请自悟. 一.如何定义局部刷新的div 翻页时,我们一般只会刷新页面中涉及到翻页的父级div,那么该如何定义呢?

  • 基于jQuery捕获超链接事件进行局部刷新代码

    基于jQuery捕获超链接事件进行局部刷新代码

    核心代码: 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>A Click Event Test</title> <script type="text/javascript" src="jquery.min.js"

  • JQuery 又谈ajax局部刷新

    JQuery 再谈ajax局部刷新. 案例: 描述: 1. 点击登录则弹出登录对话框 2. 如果用户名密码不正确,则提示错误信息 3. 当输入信息正确,则刷新登录信息,显示用户名和退出按钮 4. 点击退出弹出提示信息,然后确定后再次刷新用户名,回到了第一幅图片的位置 那这些简单的操作,都需要做一些什么工作呢? 1. 加载登录/(用户名-退出)的页面 2. 点击登录连接,打开登录对话框 3. 登录form表单提交时,对信息进行验证. 4. 验证通过后,关闭对话框,同时刷新1中的页面,显示"用户名-

随机推荐