0

我有一个分解为 DIVS 的 HTML 页面。每个 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 然后 Activity2 等等。我的要求是在显示内容之前从 Activity1 移动到 Activity2 时刷新内容。这样我就可以从服务器获得最新信息。

4

1 回答 1

3

当一个部分处于活动状态时（在this.callback函数中或中.run）添加一个ajax 调用来获取您的数据

    $.ajax()

对于当前+1部分并将其填充到该部分的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 调用。但是，这就是它的工作方式：

  1. 在一个部分完成后，您调用并sectionid通过 GET 传递给服务器

    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 在浏览器中加载时，可以使用 jQuery 检索 sectionid

    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");
                }
            });

我把这段代码也放在了 jsfiddle 上。

有了这样的解决方案，您还可以取消onFullCycleCompleted重新加载，因为这些部分始终是最新的。

于 2013-03-11T18:17:00.893 回答