jQuery Mobile stuff

I just started using jQuery Mobile and ran into a few gotchas. First is that when going from one page to another what actually happens is that jQuery Mobile does some Ajax magic in the background. This means that the second page is not loaded in the traditional way.

I got hit with this when my third page in a sequence was supposed to load a javascript file, i did this in the header but since it was ajax, the header referencing the script file wasn't actually loaded - same with document.ready(). It was a little head scratching before consulting the docs where it is actually written clear:

Important: Use $(document).bind('pageinit'), not $(document).ready()

Same with referenced javascript files, they have to be referenced in the page contents not the header.

Second after showing some html I got through my own ajax service in a dialog, the next time it showed it would be without styling. jQuery Mobile only styles elements once, so second time the dialog was shown jQuery Mobile assumed that it already had styled the html in it. To force a restyling do like this:

            $.ajax({
                url: urltosomeajaxservice,
                type: 'POST',
                data: form_data,
                success: function (data) {
                    $('#streets').html(data);
                    $.mobile.changePage('#mydialogpage', true, true);
                    $('#mydiv').trigger("create");
                },
                error: function () {
                    //alert("Error!");
                }
 
            });

 Note the .trigger("create") - which does the restyling. The markup:

<div data-role="dialog" id="mydialogpage">
    <div data-role="content" data-theme="b">
        <div id="mydiv">
        </div>
    </div>
</div>