2 ways to load external html file

First way:

function load1Content() {

$('.ui-content').load('1.html');

$('[data-role=listview]').listview(); // premature execution

window.scrollTo(0, 0);

}

Second way:

function loadHomeContent() {

$.ajax('home.html')

.done(function(home) {

$('.ui-content').html(home);

$('[data-role=listview]').listview();

})

.fail(function() {

console.log('ajax home content error');

});

window.scrollTo(0, 0);

$('#top-title').html('PhoneGap AdMob');

}

Which way to use?

First way is shorter and simpler but it won't format the markup if there are ul or li. That is because premature execution of listview() happens even before the html is loaded. The .load() is asynchronous.

Therefore, the second way is the correct way if your html has ul, li or other markup which needs to be formatted. It ensures that .listview() is executed ONLY AFTER the html has loaded.