asked on

jQuery Mobile child page no events firing

Hi.

I want to perform an ajax call once a child page has been called. Obviously I want to replace the usual $(document).ready with $(document).bind('pagecreate'), (as per the documentation), however I can't trap for any events in the child page so that I can next place my ajax code and populate the child page dom dynamically, none of the alerts fire. Where am I going wrong please ???? Thanks..

<!DOCTYPE html> 
<html> 
	<head> 
	<title></title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>      
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>  
</head> 
<body> 
<div data-role="page" id="page_01">
	<div data-role="header">
		<h1>Page 01</h1>
	</div>
	<div data-role="content">	
		<p>Hello world</p>
    <a href="page_02.htm">Page 02</a>		
	</div>
</div>
</body>
</html>

Open in new window

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page 02</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
		$(document).bind("pagebeforeload pageload pageloadfailed pagebeforechange pagechange", function(e) {
			alert("here 1");
		});
		$(document).live("pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
			alert("here 2");
		});
		$(document).delegate("#page_02", "pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
			alert("here 3");
		});
	</script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>  
</head> 
<body> 
<div data-role="page" id="#page_02">
	<div data-role="header">
		<h1>Page 02</h1>
	</div>
	<div data-role="content">	
		<p>Hello world Page 02</p>
    <a href="page_01.htm">Go Back</a>		
	</div>
</div>
</body>
</html>

Open in new window

Kyle Hamilton

You're calling jqm methods before the jqm file has been loaded.

You need to move the reference to jqm above your custom scripts.

(yes, they say to put jqm after your custom scripts, but they mean regular jquery scripts.)

jonatec

ASKER

Hi, have made the change as you suggested, events still not firing...

<!DOCTYPE html> 
<html> 
	<head> 
	<title>Page 02</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>  
  <script>
		$(document).bind("pagebeforeload pageload pageloadfailed pagebeforechange pagechange", function(e) {
			alert("here 1");
		});
		$(document).live("pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
			alert("here 2");
		});
		$(document).delegate("#page_02", "pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
			alert("here 3");
		});
	</script>
</head> 
<body> 
<div data-role="page" id="#page_02">
	<div data-role="header">
		<h1>Page 02</h1>
	</div>
	<div data-role="content">	
		<p>Hello world Page 02</p>
    <a href="page_01.htm">Go Back</a>		
	</div>
</div>
</body>
</html>

Open in new window

Kyle Hamilton

you have an extraneous # mark in the id on line 22:

change to:

<div data-role="page" id="page_02">

jonatec

ASKER

Thanks for pointing the extraneous # mark, which I have now removed, as suggested.

However, events still not firing, and my alerts don't appear.

Kyle Hamilton

they do in my browser.

what browser are you using? Do you have other scripts on the page?

http://www.candpgeneration.com/EE/EE-pageload.html

jonatec

ASKER

Are you opening page_02.htm directly? If I do that then yes, the events fire ok.

But page_01.htm calls page_02.htm using JQM, suggest opening page_01.htm and calling page_02.htm via the page link, cheers...

Kyle Hamilton

there is only one page. the one you posted. the alerts fire on page load, and when you click the link. (I included a different page this time for the link)

Everything works as it should.

Can you post a link to your page?

jonatec

ASKER

Ok, apologies, my ambiguity.

Refering to my original post above then...

The first code block is page_01.htm (parent page).

Second code block is page_02.htm (child page),

So page_01.htm calls page_02.htm.

Kyle Hamilton

Is it page 2 that is not firing events?

You only posted one page. When I load the page you posted, the alerts fire. When I click on the link, the alerts also fire, and in the case of my example, the index.php page loads. (that would be your page 2)

What behavior are you expecting?

jonatec

ASKER

Hi. Yes.

Basically the documentation suggests single pages for any reasonable amount of content, so I have a main or primary page page_01.htm that has a link that references a child page called page_02.htm.

Now I want to build up the second page page_02.htm and use ajax when the page initialises to go off to the server and retrieve data for the page content. But in order to do that I need to know when page_02.htm has fully loaded by trapping for the correct event, inside this function I will write my ajax code to populate the content div. All straight forward stuff. However the problem I have is that when Page_02.htm load it doesn't want to fire any events and that's where I'm at.

Kyle Hamilton

The alert "here 3" will not fire when you click of the link, because it is bound to #page_02. It is looking for that id in the linked page: page_01.htm, and since it cannot find it there, it is not firing.(I'm assuming page_01.htm has an id of #page_01, not #page_02?)

Is that what you're asking about?

In the real world, your index page would contain the scripts, and your interior pages get loaded with Ajax, and will be using the index page header, even if they have their own headers. So you'll want a script that binds page init events to all your pages (via page ids), in the header of your index page. Ultimately you'll want to put those scripts in a separate file and link to the script in the header of your pages (in case someone accesses your site from an interior page)

jonatec

ASKER

Ah, I see. So it's a different design approach, your saying the modularity should be in the JavaScript. Perhaps I'd be better off with one large, single page with as many page divs as I need?

Kyle Hamilton

Sorry, I wrote my comment before I saw yours.

Anyway, you posted page2. I think you might be mixing up your page ids and init events.

<!DOCTYPE html>
<html>
      <head>
      <title>Page 02</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
<script>

            $(document).live("pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
                  alert("the current page has loaded");
            });
            $(document).delegate("#page_01", "pageinit pagebeforechange pagecreate pagechange pagechangefailed pagebeforeload", function(e) {
                  alert("page one is being loaded ");
            });
      </script>
</head>
<body>
<div data-role="page" id="#page_02">
      <div data-role="header">
            <h1>Page 02</h1>
      </div>
      <div data-role="content">
            <p>Hello world Page 02</p>
<a href="page_01.htm">Go Back</a>
      </div>
</div>
</body>
</html>

Then page 1.htm contains:

<div data-role="page" id="#page_01">

(btw, we're doing this sort of backwards, since we're starting on page two, but it doesn't matter)

Kyle Hamilton

Lol, I'm one step behind you with my posts.

No you don't need to put all your pages in divs on one page. Especially, if they are very long or have images, and would take a long time to load.

Does what I posted above make sense about the page ids?

jonatec

ASKER

Yes, it makes sense thanks.

But... sorry, I cut and pasted your code and the events ain't firing still ?

jonatec

ASKER

Instead of:

$(document).live

Should I replace with:

$('#page_02').live

??

Kyle Hamilton

Please post a link to your page. I think we're talking at cross purposes.

Also, remember for Ajax to work, it has be on a server. So if you're teasing locally, it won't work.

I'm going post an example when I get a chance. On train right now....

jonatec

ASKER

No problem..

http://www.jonatec.net/demo/page_01.htm

Thanks.

ASKER CERTIFIED SOLUTION

Kyle Hamilton

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jonatec

ASKER

Excellent, thanks very much !

I shall have to study the source code for sure.

Interesting observation:
a) The JS functions reside only in page_01
b) # mark is not needed as part of the page id
c) page_01 always remains in the dom

Cheers !!!