Search jQuery

jQuery Forum

jQuery Mobile

barbalex

how to use pageInit()?

in jQuery Mobile • 11 years ago

The docs say very prominently not to use "$(document).ready()" any more but to use "pageInit()" instead.

So I am trying to change to pageInit() and also change from "window.open" to "pageChange".

I understand that to do this all pages should have the same header that references all the sources needed by any of the pages.

And I understand the page specific code has to be in the <div data-role="page"> element.

So far hopefully so good.

Here is my problem: What is the correct call for pageInit? I have tried all of these:

$(document).ready(function(){
$(document).delegate("#FeldEditPage", "pagecreate", function() {
$(document).delegate("#FeldEditPage", "pagebeforecreate", function() {
$(document).bind("pageInit", function(){
$("#FeldEditPage").bind("pageInit", function(){
jQuery("div:jqmData(role='page'):last").bind('pageInit', function() {
plus variations using live instead of bind.

The first three work only on the first document - not after changePage was executed. They work perfectly when I use window.open istead of changePage.

With the others no code is executed at all.

My page is here: https://github.com/barbalex/EvabMobile/blob/master/templates/FeldEdit.html

Thanks in advance for help!

Alex

Replies(11)

watusiware

Re: how to use pageInit()?

11 years ago

What I do is call a function as the last thing in <head>:

<script>
peepr.init_delegations();
</script>

And here's the function:

peepr.init_delegations = function() {

/* Inform controller of places-page pageinit, so it can avoid async updates until the page is loaded */

$(document).delegate("div.nearby-places-page", "pageinit", function(event) {

$.post( "/app/Place/on_nearby_pageinit");

});

/* Prevent scrolling of pages that contain an iScroller. */

$(document).delegate("div[data-role='page'][data-iscroll='enable']", "touchmove", function(event) {

event.preventDefault();

});

barbalex

Re: Re: how to use pageInit()?

11 years ago

Hi watusiware

Thanks for chipping in.

Unfortunately I don't understand your solution.

Head is only called on the first page, isn't it?

Are you trying to prevent conflicts with a following event like pagebeforeshow or pageInit?

I'm not shure what a controller is.

Is there somewhere I can read up on this?

Thanks, Alex

clduvall

Re: how to use pageInit()?

11 years ago

The way to correctly do it within the framework would be:

$('#pageID').live('pageinit', function() {

// Do this once, first page load.

});

If you want it to run every time you go back to the cached page, use pagebeforeshow

barbalex

Re: Re: how to use pageInit()?

11 years ago

Hi clduvall

Thanks for helping.

I am using pagebeforeshow now for that part of the code that should run every time the page is changed with changePage.

I am using pagebeforecreate for the code that should run the first time (pageInit and document.ready ran after pagebeforeshow).

I am trying to swipe between different documents on the same page, calling the same page again with a different document.

I have an alert as first code in pagebeforeshow. When pageChange fires, this alert is called several times. First alerting me a value of the old document, then alerting a value of the new document. This can happen several times - more when I've tried several times before. Seems like the page is changed between docs back and forth in an unpredictable manner. When this ends it seems like the code in pagebeforechange has not run.

This is the same that happened when I had all code run in a single pageInit.

I have no idea what is going on.

ugh.

Alex

watusiware

Re: how to use pageInit()?

11 years ago

.live is deprecated in 1.7.1, so best to prepare and use .delegate. (Although then .delegate will likely be deprecated after that, since there is now .do). .delegate is also more efficient than .live.

barbalex

Re: Re: how to use pageInit()?

11 years ago

Hi watusiware

Yes, using delegate now. Thank you.

Alex

watusiware

Re: how to use pageInit()?

11 years ago

Unfortunately I don't understand your solution.
Head is only called on the first page, isn't it?

Correct, and that's all you need.

When using .live, .delegate, or .do (JQuery 1.7+ only), you are registering a callback for all currently-loaded AND future-loaded elements that match the selector.

I'm not sure what a controller is.

The example I posted is from a project of my own. You can ignore the content of the callbacks. In that particular case, I want my server notified when a particular page has been loaded, so I am posting a notification to the server. (The server is actually in my mobile device, FWIW.)

In the second example, I use the callback to disable scrolling on pages that use the iScroll4 plugin.

revlis7

Re: how to use pageInit()?

11 years ago

Hi everyone

i think i have the same problem too...

and the MAIN problem is:

the code in

$('#pageID').live('pageinit', function() {
alert("message");
});

doesn't work at all when you are using changePage() from another page.

and it only works when you open the page directly or using window.open() from another page.

i can see the message box, so i'm sure the code has no problem.

revlis7

Re: how to use pageInit()?

11 years ago

i think this post can be helpful:

http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files/7449731#7449731

and the key point is:

jQuery Mobile does not pull the whole page into the dom, it grabs the first data-role="page"element and its children and pulls that into the current dom.

So any scripts in the <head> of the document will not be included.

now i move the scripts from <head> to the <body>, like this: