0

DIVSに分割されたHTMLページがあります。各divには特定のセクションが含まれています。一度に表示されるセクションは1つだけです。私の要件は、あるセクションから別のセクションに移動するときに各セクションを更新することです。以下の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

1 つのセクションがアクティブな間 (this.callback関数内または 内) 、データを取得するためのajax 呼び出し.runを追加します。

    $.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. セクションが終了したら、sectionidGET を呼び出してサーバーに渡します。

    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 がブラウザーに読み込まれると、セクション ID を jQuery で取得できます。

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

これsectionidを jQuery スクリプトで使用して、セクションの内容を表示できます。

ただし、各セクションの後にこれを行う場合は、一度に複数のセクションを表示することはないため、一度に 1 つのセクションをページにロードすることもできます。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 に答える