jQuery Forum

Hi,

I'm developing an app using JQM + Phonegap.

In order to avoid device slowdown and crash application, I'm using the JQM single page navigation model because it allows auto DOM size management.

I'm dynamically injecting pages using href="page.html" into the DOM as the user navigates and manually using changePage('page.html') to handle user interactions.

So, as far as I'm conerned, on those pages that use server-data I need to:

      1) Load (inject) new page into the DOM to access target divs/containers
      2) dinamically place new data (append)


Please, take a look into this example for illustrative purposes:

function loadData (myJSONObject){

// inject page
$.mobile.changePage('page2.html');

//load data
for(var i=0; i<myJSONObject.data.length;i++){
name = myJSONObject.data[i].name;
link = myJSONObject.data[i].description;

// #listData is the target container from page2.html                   
$("<a />",{
    text: name,
    href: link
    }).appendTo(                                               
        $("<li />",{
        id: name,
        }).appendTo('#listData'));
}

This code results in an empty list because the JQM injection function(s) takes longer than loading data due to javascript asynchronous behaviour

**Note that:
- using multipage model and changePage('#target') works
- testing with setTimeOut() and forcing the data loading loop to wait also works but I assume that is not optimal neither a good practise


QUESTION: Is there a callback or way to start loading data only when new page is fully injected so does target availability?

1. You should write your own post, rather than hijacking several old posts. We only need one copy of your post, and it should stand on it's own to make it easier for people to find things here.

2. Use a pageinit callback