Обновить/Обновить раздел страницы с помощью jquery

Question

У меня есть HTML-страница, разбитая на DIVS. Каждый div содержит определенный раздел. Одновременно отображается только один раздел. Мое требование - обновлять каждую секцию, когда она перемещается из одной секции в другую. Пожалуйста, обратите внимание на код в ниже URL,

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(); 

}); 

страница в основном отображает Activity1 затем деятельности2 и так далее. Мое требование - обновить содержимое, когда оно перемещается из Activity1 в Activity2 перед его отображением. Таким образом, у меня может быть самая последняя информация с сервера.

Answer 1

В то время как один раздел активен (в функции this.callback или в .run) добавить ajax call, чтобы получить ваши данные

$.ajax() 

для текущего + 1 секции и fill it into the html секции

$(yoursectiondata).html() 

Редактировать: Аксессуар вызова ajax для функции обратного вызова будет примерно таким:

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. После завершения секции, вы вызываете и передать sectionid через GET на сервер

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

2. На сервере вы получите свой идентификатор раздела и пропуск он вернулся с новой страницы (на стороне сервера интегрировать его в таблицу, или изменить порядок разделов, что угодно), что-то вроде этого в 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(); 
   

И теперь вы можете использовать этот sectionid в сценарии JQuery, чтобы отобразить содержимое секций.

Однако, если вы сделаете это после каждого раздела, вы можете просто загрузить один раздел за раз на странице, так как вы не будете показывать больше за раз. Я не понимаю, почему вы предпочитаете этот подход по вызову 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 перезарядку, так как секции всегда в актуальном состоянии.