CODEWITHSUNDEEP
jqueryjquery-mobile
j0e
j0e

Reputation: 1451

jquery mobile, pageinit, pagecreate, and redundancy

thanks in advance for taking a look at this jQuery Mobile (version 1.1.0) question.

My first question is: What function do you use to run on every page load and every ajax page call (they seem to be be 2 separate beasts)? I want them to be run every time.

$(document).bind('pageinit',function(){
    console.log('Does this work for you?');
});

I've got several separated jQuery-Mobile powered HTML pages using jQuery code for various functionality. Some of this functionality includes a touch-based slider (royalSlider) that happens on a couple pages, some of the code sniffs whether certain elements exist (such as a fixed subheader or footer) to adjust margins for the page so the main content is obstructed by overlapping elements, and other js is a script that hits every element with a specific class that triggers an AJAX call for every image.

Question is: do I need an live pageinit function called for each ID of every page? Do I need to use pageinit AND pagecreate for every page?

For example, let's say I have a function called face() that finds whether or not there's a footer so I can add a class to .container to add a bottom margin so main content is obstructed from view.

Theoretically, can't I run a function like this that hits every active page upon landing on the page or pulling in the page via AJAX ?

$('[data-role="page"].ui-page-active').live('pageinit', function(){ 
    face();
});

not:

$("#brand-grid,#product-grid,#main-grid,#trends").live('pageinit', function() {
    face();
});

What I find is that it works when I land on a page that needs the offset at first, but when you go to another page it no longer works. Is this because there are 2 div[data-role="page"] in the DOM and my command is too ambiguous? Or is it because pageinit only works for the original page and not AJAX'd content?

My next question: How do you destroy a page after you've navigated from it? I don't want the tablet to be running 2 instances of the royalSlider if I can help it.

Here's my attempt: 

$('[data-role="page"].ui-page-active').live('pageinit', function(){
     $('[data-role="page"]:not(.ui-page-active)').live('pageremove');
});

Any insight you have would be great, I just want to avoid memory leaks and slow performance. JQM has been pretty awesome to develop with aside from these temperamental issues. Thank you.

Upvotes: 2

Views: 6756

Answers (3)

moseshohman
moseshohman

Reputation: 21

Answer to Question #1:

I believe I had the same problem as you, and here's how I solved it: In the pageinit handler, you should include the event parameter, because the event's target is div of the new page (i.e. the div with data-role="page"), so you can use the target as context in any jQuery selectors you use to target to the DOM elements on that page, e.g.:

$(document).on('pageinit', function(event) {
  $('#some-element', event.target).toggle();
});

Answer to Question #2:

I imagine you can do the same in your handler for pageremove.

Upvotes: 2

jalogar
jalogar

Reputation: 1684

Notice too that in jquery mobile you cannot have duplicated IDs in different pages. The IDs have to be different even if elements are in different pages, as the pages are added to the document. More (and better) explanation here:

https://forum.jquery.com/topic/pageinit-firing-twice#14737000002873163

Upvotes: 1

xanderer
xanderer

Reputation: 438

If you want to run a function every time a page loads via ajax use 

$(document).bind('pageinit')

http://jquerymobile.com/test/docs/api/events.html

I think you can do something similar for removing page with

$(document).bind('pageremove')

Upvotes: 2

Related Questions