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 page 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 developing practise


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