CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
user3294187
user3294187

Reputation: 3

JQuery Mobile - Run load () html and navigate () immediately afterwards.

JQuery Mobile - Run load () html and navigate () immediately afterwards.

I'm implementing a small application using jQuery Mobile where I have a login screen that gives access to a home with menus that lead to a few pages. My question is how can I dynamically load the pages only when I click on the menu.

I tried to do something like 

$('#home').load('home.html');
$.mobile.navigate("#home");

but despite the effect of the load carrying navigate does not work, or does not redirect to the page.

Can anyone give me a hint how to do this?

Upvotes: 0

Views: 54

Answers (1)

dave
dave

Reputation: 64657

You just need to use a callback. Because load is asynchronous, you actually end up calling $.mobile.navigate before load has finished. By sending the next step as a callback, you ensure it happens after you have completed the first step.

From jQuery Documentation:

If a "complete" callback is provided, it is executed after post-processing and HTML insertion has been performed. The callback is fired once for each element in the jQuery collection, and this is set to each DOM element in turn.

So your code would look like:

$( "#home" ).load( "home.html", function() {
  $.mobile.navigate("#home");
});

Upvotes: 1

Related Questions