CODEWITHSUNDEEP
jqueryjquery-mobiledocument-ready
Bill Turner
Bill Turner

Reputation: 879

load and dismiss a page in jquery mobile

I am a noob to both jquery and jquery mobile. What I am trying to achieve is on a click of a link, to load a page, then after some period, automatically return to the original page. I don't care if this is done via jquery mobile "pages", or by following a link to another html page. While reading the docs, it sounded to me that it was preferable to keep pages in separate docs, so that is the path I followed. Clicking the link loads the new page just fine. However, I have not been able to get the new page to return.

The original page, football.html, has this link:

<li><a href="touchdown.html">Touchdown</a></li>

In touchdown.html, I have the following bit of javascript.

var TOUCHDOWN = {};

$(document).ready(function() {
    alert("readying touchdown");
    window.setTimeout(TOUCHDOWN.goBack, 5 * 1000);
});

TOUCHDOWN.goBack = function() {
    alert("timedOut()");
};

Actually, as you can see, I am not even calling window.load(), I am just looking for the alert, which never seems to happen. In fact, I never see the alert "readying touchdown".

My question is really two-fold. First, am I even going down the right path? Or, would using a multi-page template be better? Or something else?

Second, I came across discussion in the docs about pageinit and elsewhere about pageload. Should I be using these functions instead? I have yet to find any examples of actually using either. I understand things way better if I see an example. The docs seemed to make it sound as if $(document).ready would only be called once, on the first page. Is what I want $(document).pageinit (or pageload)? Would it be that simple?

I've googled but seem to be coming up empty.

Upvotes: 0

Views: 303

Answers (1)

GerjanOnline
GerjanOnline

Reputation: 1881

First, am I even going down the right path? Or, would using a multi-page template be better? Or something else?

Using multiple HTML files is perfectly fine

Second, please use: 

  $('#yourPageId').live('pageshow',function(event){
      setTimeout(function() { 
        $.mobile.changePage("football.html");
      }, 5 * 1000);
  });

Include this script in both files!

Upvotes: 1

Related Questions