Question

我有一个分为DIVS的HTML页面。每个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();

});

该页面基本上显示Activity1，然后显示Activity2，依此类推。我的要求是在显示内容之前刷新内容，因为它从Activity1移动到Activity2。这样我就可以从服务器获得最新信息。

Answer 1

当一个部分处于有效状态时（在this.callback函数或.run中）添加ajax call以获取数据

    $.ajax()

表示当前的+ 1部分和fill it into the html部分

    $(yoursectiondata).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调用。但是，这就是它的工作原理：

部分完成后，您调用并通过GET将sectionid传递给服务器

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

在服务器上你得到你的节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." />"

当DOM在浏览器中加载时，可以使用jQuery
检索sectionid
```
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重新加载，因为这些部分始终是最新的。

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

1 个答案: