Search code examples
javascriptjqueryjquery-mobile

How to run code every time page is loaded


In my jQuery Mobile project I have an image slider on the homepage. This works fine when entering via this page. However, if I navigate away, and then return to the page, it doesn't work.

I have 1 html file for each JQM page (eg 4 pages equals 4 html files).

The code JS given below is loaded via a reference in the header of the page to the JS file containing it.

$(function () {
    //Global variable that stores advertising banners.
    var featured = new Array();

    //Adds information about the new banners.
    featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
    featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
    featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);

    var featured_element = document.getElementById("slider");

    //Prints a new link with image in advertising box.
    $.each(featured, function (i, advert) {
        featured_element.innerHTML += "<img src=\"" + advert[1] + "\" data-plugin-slide-caption=\"<a href='" + advert[0] + "'>" + advert[2] + "<\/a>\"/>";
    });

    $("#slider").excoloSlider({
        mouseNav: false,
        interval: 3500, // = 3.5 seconds
        playReverse: true
    });
});

How can I adapt this so that it fires every time this given page is loaded?


Solution

  • CORRECTION Ive actually had to call the js file in the body to get it to work without causing issues with the 2nd page.


    After a bit of scrambling through past answers from @Omar, and trialing the various JQM events, Ive come up with the following.

    I've created a script in a js file and reference this in the head of the default.html. This will be turned into a PhoneGap app, so I know this will be the first page hit.

    In the JS file I've updated the code to:

    $(document).one("pageshow", function () {
    alert("LOADED SLIDER CODE");
    //Global variable that stores advertising banners.
    var featured = new Array();
    
      //Adds information about the new banners.
      featured.push(["http://www.google.co.uk/", "assets/temp/slider/01.jpg", "FEATURED: Cessna CItation XVII"]);
      featured.push(["http://www.mashable.com", "assets/temp/slider/02.jpg", "FEATURED: Cessna CItation XVII"]);
      featured.push(["http://www.engadget.com", "assets/temp/slider/16.jpg", "FEATURED: Cessna CItation XVII"]);
      /*
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      featured.push(["", "", ""]);
      */
    
    
      var featured_element = document.getElementById("slider");
    
      //Prints a new link with image in advertising box.
      $.each(featured, function(i, advert) {
            featured_element.innerHTML += "<img src=\""+advert[1]+"\" data-plugin-slide-caption=\"<a href='"+advert[0]+"'>"+advert[2]+"<\/a>\"/>";
      });
    
        $("#slider").excoloSlider({
            mouseNav: false,
            interval: 3500, // = 3.5 seconds
            playReverse: true
        });
    });
    

    Now the js is called whenever the page widgets etc have loaded into the DOM, and essential shows when the 'page' is first shown.