Question

I’m using jQuery Mobile with some dynamic content added with KnockoutJS after making an AJAX call. This is causing all kinds of problems since jQuery mobile applies it’s styles and transforms the HTML before the binding has a chance to kick in. I tried a few different methods for handling this, but it seems that it’s not well documented in the jQuery mobile docs.

Right now, I’m trying this after the completion of the AJAX call:

ko.applyBindings(ws);
$.getScript("Scripts/jquery.mobile-1.2.0.min.js", function () {
    $("#index").fadeIn();
});

I set display:none for all the pages so that they aren’t visible before the template has been applied (by applyBindings) and jQuery mobile has been applied. This works, except when it completes, the content pops-in rather jarringly. Is there a way to smooth out that transition? Clearly jQuery mobile automatically makes the first page visible, because my fadeIn has no effect.

Answer 1

Try refreshing the jquery mobile widget after applying your changes.

$("#myddl").selectmenu("refresh");

or

$("#mylistview).listview("refresh");

Similar methods exist for most of the jquery mobile enhanced controls.