使用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重裝，因爲段始終是最新的。