实现页面的定时刷新功能:jquery使用的是jquery-1.8.3.min.js
1:定时刷新

A界面的一段代码如下:
<script type="text/javascript">
       $(document).ready(function () {
           fresh();
       });
       function fresh() {
           var id = $("#main").attr("rackId");
           $("#main").load("/RackLocations/kczt_refresh/" + id);
           setTimeout("fresh()", 1000 * 20);
       }        
    </script>
在界面中,需要刷新的DIV的ID是main。

2:加载内容
使用JQUERY的LOAD方法,加载新内容。这里的KCZT_REFRESH.cshtml由一个DIV构成及需要刷新的DIV内容。
这里采用MVC模式(C#),kczt_refresh.cshtml的内容如下:
@model IEnumerable<Wms.RackLocation>

@{
    Layout = null;
   
}
    <table id="table5" border="0" cellpadding="0" cellspacing="0" onselectstart="return false;">
    @foreach (var gp in Model.GroupBy(x => x.Level).OrderByDescending(x => x.Key))
    {
        <tr>
            @foreach (var loc in gp.OrderBy(x => x.Column))
            {      
                <td href="#details" class="loc fancybox fancybox.ajax @status(loc.kczt)  @(loc.IsLoaded ? "IsLoaded" : "")" userCode="@loc.UserCode" title="@title(loc)"  pz-gg-xs="@loc.pz@loc.gg@loc.xs">
                <div style="width:22.8px;height:32px;"></div>
                </td>
            }
        </tr>
    }
    </table>
@helper status(string kczt)
    {
    if (string.IsNullOrWhiteSpace(kczt))
    {
        return;
    }
   <text>kczt</text>@(((Wms.EnumKczt)Enum.Parse(typeof(Wms.EnumKczt), kczt)).ToString("D"))
        
   }

@helper title(Wms.RackLocation loc)
    {
       @loc.Column<text>列</text>@loc.Level<text>层</text>  
       @loc.kczt<text> </text>
        if (loc.kczt == "包装后成品")
        {
            @loc.pz  <text> </text>
            @loc.gg <text> </text>
            @loc.xs
        }
    }
当前面的LOAD方法加载时,这个VIEW返回给前面的界面是一个HTML的字符。由前面的界面执行,但是这个字符又不是普通的。前面的JQUERY并不能直接取到里面的元素。

A界面需要对kczt_refresh.cshtml中的一些元素操作时,不能简单的使用$,需要使用(例如) $(".loc").live("click",function(){})

下面是一具体的代码:
 $(document).ready(function () {
          $(".loc").live("dblclick", function () {
              var title = $(this).attr("title");
              $.ajax({
                  type: "POST",
                  cache: false,
                  url: "/racklocations/details",
                  data: {
                      userCode: $(this).attr('userCode')
                  },
                  success: function (data) {
       
                  }
              });
          });

使用jquery实现局部刷新DIV的更多相关文章

  1. jQuery 定时局部刷新(setInterval)方法总结

    来自:http://www.jbxue.com/article/8516.html 1.jQuery 定时局部刷新(setInterval),显示时间的代码. <head> <scr ...

  2. MVC采用Jquery实现局部刷新

    该文纯粹属于个人学习,有不足之处请多多指教! 效果图: 单击Detail下面出现详细,效果如下: 为了使操作时两个不同的数据源相互干扰,使用局部视图刷新,代码如下: 首先介绍主页Index代码: @m ...

  3. jQuery实现局部刷新页面数据绑定

    今天遇到了一个问题:怎么样才能做到只刷新页面中的Repeater控件中的数据,在不用UploadPannel的情况下? 试了好多方法,无意间在看jquery文件时发现,使用load()方法即可解决此问 ...

  4. Jquery Mobile局部刷新后js和css失效,需局部渲染

    $(function () {    $("#submit").click(function(){      var storage = window.localStorage;  ...

  5. jquery的div局部刷新

    jquery的div局部刷新 //div的局部刷新 $(".dl").load(location.href+" .dl"); 全页面的刷新方法 window.l ...

  6. spring mvc + ajax上传文件,页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  7. jquery 局部刷新load 某个div或者某个表格

    在使用 ajax 进行删除用户操作的时候,可以在 success 里写一个 window.location.reload(); 让页面刷新. 但是,我不想那样,我只想局部刷新 比如,我删除几个用户后, ...

  8. (局部刷新)jquery.ajax提交并实现单个div刷新

    web开发中我们经常会遇到局部刷新页面的需求,以前我经常使用ajax和iframe实现局部刷新,后来做政府的项目,对页面的样式要求比较多,发现使用iframe控制样式什么的很麻烦,所以就采用了新的办法 ...

  9. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

随机推荐

  1. 2016-3-25突然推送大量消息的问题及查找 -- Sangit

    起因:2016年3月25日 18:30 左右,突然接到客户投诉,说APP收到大量的任务推送消息,而且点击进去都是一些过期任务,我们将对此展开追踪,查找问题原因. 过程: 1.当时的第一反应是先查看re ...

  2. es 的集群状态

    es的集群状态一共有三种 : green yellow red 状态是基于 碎片的 等级进行划分的 .

  3. 转】Maven学习总结(五)——聚合与继承

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4058008.html 感谢! 一.聚合 如果我们想一次构建多个项目模块,那我们就需要对多个项目模块进行聚合 1. ...

  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情?

    这个问题是老生常谈的问题啦,虽然说到处百度都有的答案,还是希望自己能总结一下. 如今有很多答案,都是从硬件开始讲起,比如键盘的响应或者触屏的响应,然后CPU处理到OS的内核等等.这里不作为重点来讲,要 ...

  5. ocp 1Z0-051 106-140题解析

    106. Examine the data inthe LIST_PRICE and MIN_PRICE columns of the PRODUCTS table: LIST_PRICE MIN_P ...

  6. 读Qt Demo——Basic Layouts Example

    此例程主要展示用代码方式创建控件并用Layout管理类对其进行布局: 例程来自Qt5.2,如过是默认安装,代码位于:C:\Qt\Qt5.2.0\5.2.0\mingw48_32\examples\wi ...

  7. 苹果iOS锁屏制作

    下面我们开始. 一.锁屏界面 可以观察到,iphone的锁屏界面在时间和解锁部分有着透明强高光风格的背景,高光部分有非常明显的界限,边缘部分1像素的高光也是非常醒目的,整体感觉整个表面非常光滑,如同玻 ...

  8. hdu 4578 Transformation(线段树)

    线段树上的多操作... 题目大意: 树上 的初始值为0,然后有下列三种操作和求和. 1  x y c  在X-Y的之间全部加上C. 2  x y c  在X-Y的之间全部乘上C. 3  x y c   ...

  9. jquery ajax请求后台 的简单例子

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  10. Row_Number()over(order by....) as

    出自:http://www.2cto.com/database/201307/227103.html Sql Server Row_Number()学习   Row_Number():   row_n ...