使用jquery重新加载/刷新页面部分

Question

我有一个HTML页面被分解为DIVS。每个div包含一个特定的部分。一次只显示一个部分。我的要求是在从一个部分移动到另一个部分时刷新每个部分。请看看代码以低于网址，

http://jsfiddle.net/martyk/VE4sU/15/ jQuery代码，

// overwrite $jScroller to supply asynchronous callback when end has been reached: 
    $jScroller.scroll = function() { 
     for (var i in $jScroller.config.obj) { 
      if ($jScroller.config.obj.hasOwnProperty(i)) { 
       var 
       obj  = $jScroller.config.obj[i], 
       left  = Number(($jScroller.get.px(obj.child.css('left'))||0)), 
       top  = Number(($jScroller.get.px(obj.child.css('top'))||0)), 
       min_height = obj.parent.height(), 
       min_width = obj.parent.width(), 
       height  = obj.child.height(), 
       width  = obj.child.width(); 

       if (!obj.pause) { 
        switch(obj.direction) { 
        case 'up': 
        if (top <= -1 * height) { 
         $jScroller.stop(); 
         obj.child.css('top','0px'); 
         manager.callback(); 
         break; 
        } 
        obj.child.css('top',top - obj.speed + 'px'); 
        break; 
        case 'right': 
        if (left >= min_width) {left = -1 * width;} 
        obj.child.css('left',left + obj.speed + 'px'); 
        break; 
        case 'left': 
        if (left <= -1 * width) {left = min_width;} 
        obj.child.css('left',left - obj.speed + 'px'); 
        break; 
        case 'down': 
        if (top >= min_height) {top = -1 * height;} 
        obj.child.css('top',top + obj.speed + 'px'); 
        break; 
        } 
       } 
      } 
     } 
    } 

    $jScroller.start = function() { 
     if ($jScroller.cache.timer === 0 && $jScroller.config.refresh > 0) { 
      $jScroller.cache.timer = window.setInterval($jScroller.scroll, $jScroller.config.refresh); 
     } 
    }; 

$(document).ready(function() { 

     function SectionManager() { 
      this.delayShortList = 15000; 
      this.marginShortList = 12; 
      this.currentSection = null; 
      this.sections = $("#content .section"); 
      this.numSections = this.sections.length; 

      this.transition = function(){ 
        //SCROLLER CODE STARTS HERE.... 
        $jScroller.config.refresh = 100; 
        // Add Scroller Object 
        $jScroller.config.obj = []; 
        $jScroller.add(
         "#content .section.active .activityTbl" 
         ,"#content .section.active .activityTbl > table" 
         ,"up" 
         , 3 
        ); 
        // Start Autoscroller 
        $jScroller.start(); 
        $jScroller.cache.init = true; 
        //SCROLLER CODE ENDS HERE.... 
      }; 
      this.onFullCycleCompleted = function() { 
       //window.location.replace(window.location.href); 
       alert("the following will trigger a page reload (UNLESS run from within jsfiddle): window.location.replace(window.location.href);"); 
      }; 
      this.callback = function() { 
       if (this.currentSection >= this.numSections-1) { 
        this.onFullCycleCompleted(); 
       }; 
       this.currentSection = (this.currentSection != null) 
        ? (this.currentSection + 1) % this.numSections 
        : 0 
       ; 
       $("#content .section").removeClass("active"); 
       var $currentSection = $("#content .section:eq(" + this.currentSection + ")"); 
       $currentSection.addClass("active"); 
       var itemCount = $(".activityTbl table.data tr", $currentSection).length; 
       if (itemCount < this.marginShortList) { 
        setTimeout(function() { 
         manager.transition(); 
        }, this.delayShortList); 
       } else { 
        this.transition(); 
       }; 
      }; 

      this.run = function(){ 
       this.callback(); 
      }; 

     } 

     manager = new SectionManager(); 
     manager.run(); 

}); 

的页面基本上显示活性1然后活性2等。我的要求是在显示它之前从Activity1移动到Activity2的时候刷新内容。这样我可以从服务器获得最新的信息。

Answer 1

虽然一个段是活动的（在this.callback功能或.run）添加ajax call获得所需的数据

$.ajax() 

当前+ 1部分和所述部分

$(yoursectiondata).html() 

的fill it into the html编辑：回调函数的ajax调用addet可能是这样的：

var nextSection = this.currentSection + 1; 
    $.ajax({ 
     url: 'your data source or update_script.php', 
     data: {'section_id': nextSection }, 
     dataType: 'html', 
     type: 'GET', 
     success: function (result) { 
      $("#content .section:eq(" + nextSection + ")").html(result); 
     } 
    }); 

编辑：由于您坚持做一个页面重新加载，而不只是检索部分。做到这一点的唯一方法是告诉你的服务器你在哪个部分，以便新提供的页面知道要从哪个部分继续。这绝对是不太优雅的选择，所以我想鼓励你使用ajax调用。然而，这是它如何能工作：

1. 后段完成后，您的呼叫，通过GET传递sectionid服务器

   var nextSection = this.currentSection + 1; 
   window.location.replace('your-page-url/page.php?sectionid=' + nextSection) 
   

2. 在服务器上，你得到你的部分ID和通行证它带回了新的页面（服务器端将它集成到表或重新排序部分，等等），这样的事情在PHP中：

   //get the section id 
   $sectionid = $_GET['sectionid']; 
   // for example integrate the id somewhere on the page 
   echo "<input type='hidden' id='sectionid' value=".$sectionid." />" 
   

3. 在浏览器中的DOM加载sectionid可以使用jQuery

   var sectionid = $("sectionid").val(); 
   

进行检索和现在你可以在jQuery脚本使用此sectionid显示的部分内容。

但是，如果您在每个部分之后执行此操作，则可能只需一次在页面上加载一个部分，因为您一次不会显示更多内容。我不明白为什么你会喜欢这种方法通过ajax调用。但是，你走了。

最后编辑：

这是我的最终解决方案。不，你不能在每个部分后重新加载页面，并且神奇地期望它会知道从哪里开始。但是使用ajax，您可以调用相同的html页面并提取下一节，并将其放入当前页面DOM中。

  $.ajax({ 
       url: 'your-page.html', 
       dataType: 'html', 
       success: function (result) { 
        content1 = $(result).find("#content .section:eq(" + nextSection + ")").html(); 
        $("#content .section:eq(" + nextSection + ")").html(content1); 
       }, 
       error: function (result) { 
        $("#content .section:eq(" + nextSection + ")").html("error refreshing"); 
       } 
      }); 

I put this code also in action on jsfiddle.

有了这样一个解决方案，您还可以拿出onFullCycleCompleted重装，因为段始终是最新的。