Loading dynamic content in jQuery Mobile with jQuery’s .load() function

So I’m in the middle of building a mobile version of Stikki (not an app, just a mobile-formatted web view), using jQuery Mobile to build the UI. I was having no end of trouble dynamically loading content via jQuery’s .load() function. Generally, this isn’t the way you’d do it in jQuery Mobile — you’d use changePage or loadPage. In my case I needed to load the content after the main page loaded, because of course with Stikki I’m doing geolocation: the page loads, retrieves the user’s location, and then loads a list of stikkis based on those parameters. I was able to load the list of stikkis…but they got displayed as an unformatted list, not a jQuery Mobile-formatted widget list. The function to use is .trigger('create'). You call it once your content has loaded. So, for example, if you wanted to dynamically load something into the container loader, you’d do this:

$('#loader').load('somepage.php',function(){
$('#loader').trigger('create');
});

That way, once the content from somepage.php is loaded into loader, jQuery Mobile will format it properly.

I hope this helps somebody else not waste a few hours trying to figure this out!

This entry was posted in Random. Bookmark the permalink.

2 Responses to Loading dynamic content in jQuery Mobile with jQuery’s .load() function

  1. Guest says:

    Thanks!!!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>