Question

Why is this selector not working?
I’m using the latest version of JQuery Mobile (1.0 b3) and jquery 1.6.2

selector

function updateStatusBar(statusMessage) {
    alert("Hello World!");
    $("#status-bar").html(statusMessage);
}

markup

...
<div data-role="footer" data-theme="<?php echo $data_theme; ?>">
    <div id="status-bar"></div>
</div>
...

and for testing purposes I have the function updateStatusBar being called from

$(document).bind("mobileinit", function(){
    updateStatusBar("Foo Bar");
});

However as it stands only the alert message is seen. The innerHTML of the div is not updated. Is this even a selector issue? I must mention that I have another function on the same page with the selectors "[class*=ui-bar-], [class*=ui-body-], [class*=ui-btn-]" and that works.. so i’m positive I have all the libraries included correctly.

Answer 1

mobileinit is for configuring options in jQuery Mobile, not for doing stuff when the document is ready. The DOM is not necessarily ready to use at this point.

You should use pageInit instead (or just change your “mobileinit” to “pageinit”, this should do the same thing).

http://jquerymobile.com/test/docs/api/globalconfig.html

(Edited to refer to pageInit as you should use that instead of .ready() in jQuery mobile as content gets loaded by AJAX after the DOM is ready)