CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Phill Healey
Phill Healey

Reputation: 3180

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?

Upvotes: 1

Views: 736

Answers (2)

Phill Healey
Phill Healey

Reputation: 3180

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.

Upvotes: 1

Juliyanage Silva
Juliyanage Silva

Reputation: 2699

Try putting your gallery code inside pagecreate blinded function.

jQuery( ".selector" ).on( "pagecreate", function( event ) {
  //Gallery code here
})

Here .selector is the page that you put the jQuery-Mobile page.

Upvotes: 1

Related Questions