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.

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

  1. Guest says:

    Thanks!!!!!!

  2. Chanzeb says:

    Hello,

    I have a problem. I have a page with header, content (two content divs) and footer. One content div contains listview to display links on the left side. When user click on any link, the detail page should open on the 2nd content(right side). Hows this can be possible.

    Thanks in advance

  3. Chris Cast says:

    Finally! I’ve been looking for this…thanks!

  4. Tim says:

    four hours later stumbled upon this – such a simple remedy to a lot hair pulling!
    Thanks :)

  5. Dan says:

    Thanks, this solved my problem too. I did a simple $(“#element”).html(“new content”); followed by your suggested $(‘#element’).trigger(‘create’); and now everything’s formatted correctly.

  6. Thanks for the solution! It saved my day. The only minor correction that it is better to use $(this) instead of $(‘#loader’) because it makes the solution works for all the cases including loading of temporary elements:

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

  7. John says:

    Thank you very much, this is exactly what I needed, having spent the best part of an hour trying to solve this, your solution is the best.

    Would you mind if i made a post on this solution on my own site and blog and referenced you as the original source?

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>