CODEWITHSUNDEEP
javascriptjqueryhtmlcss
developer
developer

Reputation: 5478

Reload/Refresh section of page using jquery

I have a HTML page that is broken into DIVS. Each div contains a particular section. Only one section gets displayed at a time. My requirement is to refresh each section when as it moves from one section to another. Please take a look at the code at below URL,

http://jsfiddle.net/martyk/VE4sU/15/ jquery code,

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

});

The page basically displays Activity1 then Activity2 and so on. My requirement is to refresh the contents as it moves from Activity1 to Activity2 before displaying it. That way I can have most current information from the server.

Upvotes: 0

Views: 5336

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21234

While one section is active (in the this.callback function or in .run) add an ajax call to get your data

    $.ajax()

for the current+1 section and fill it into the html of the section

    $(yoursectiondata).html()

Edit: The ajax call addet to the callback function would be something like this:

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

Edit: Since you insist to do a page reload and not just retrieve the section. The only way to do this is to tell your server at which section you are at, so that the newly served page will know from which section to continue. This is definitely the less elegant option, so I want to encourage you to use the ajax call. However, this is how it could work:

  1. After a section finishes, you call and pass the sectionid through GET to the server

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

  2. At the server you get your section id and pass it back with the new page (serverside you integrate it into the table, or reorder the sections, whatever), something like this in 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. When the DOM loads in a browser the sectionid can be retrieved with jQuery

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

And now you can use this sectionid in the jQuery script to display the sections contents.

However, if you do this after each section, you might as well just load one section at a time on the page, since you wont be showing more at a time. I don't see why you would prefer this approach over an ajax call. But here you go.

Last edit:

Here is my final solution. No, you can not just reload the page after each section and magically expect it will know from where to start. But with ajax you can call the same html page and extract the next section and put it into the current pages 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.

With such a solution you can also take out the onFullCycleCompleted reload, since the sections are always up to date.

Upvotes: 3

Related Questions