CODEWITHSUNDEEP
jqueryjquery-mobile
Daniele
Daniele

Reputation: 847

jQuerymobile, how to fire a callback after an ajax page load

I can't figure out how to fire a callback after a specific page load.

For instance, I have two pages:

<!-- my page -->
<div data-role="page" id="foo">

    <a href="#bar">bar</a></p>  

</div><!-- /page -->


<!-- other page  -->
<div data-role="page" id="bar">

    <div id="slideshow"></div>

</div><!-- /page -->

Pretty easy right? Now I want to fire that slideshow as a callback, but only when "bar" page is ready. Binding to pagecreate event on documents fires on every pagecreate,

 $(document).bind('pagecreate') // I don't need this for every page, just my slideshows

and

$( '#bar' ).on( 'pagecreate',function(event){ 
    whatEver();     // why you don't just work? :/
});

does not work at all (or I just didn't figure out what it is supposed to do).

What I'm doing wrong? Thank you.

Upvotes: 2

Views: 5916

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Do it this way:

$(document).on('pagecreate', '#bar',function(event){ 
    whatEver();     // why you don't just work? :/
});

But if you are doing anything visual on this page (like slideshow) I would advise using:

$(document).on('pageshow', '#bar',function(event){ 
    whatEver();     // why you don't just work? :/
});

jQM has a problem with displaying visual changes (like slideshow plugins, carousels etc..) in every page event except pageshow. Pageshow is the last event to load, in that case page is fully loaded and page has a proper height.

Upvotes: 2

Related Questions