Access content of jQuery Mobile (sub)page using JavaScript

Question

I've been trying many of the "standard" JavaScript DOM functions to access elements in an HTML document (getElementById, getElementsByName etc.), but I can't get it working with jQuery Mobile - when a subpage is loaded, the values returned from getElementById("elementOfInterest").innerHTML still contains the value from the master page.

I'm trying to implement this in an iPhone app, to extract and display the respective subpages' titles in a navigation bar (the page is displayed in an UIWebView), but I think (and hope) that the problem and solution is more or less "platform independent".

Anyone with thoughts of how to achieve this using JavaScript (or possibly some jQuery function)? I couldn't find anything in the jQuery Mobile Docs, though.

Answer 1

As per default behavior of jQuery Mobile configuration, it will automatically handle link clicks and form submissions through Ajax, when possible. So when you open a new page (sub page), new page will be appended to master page's DOM. During this time you loose JavaScript written on new page.

As per my thinking you can disable Ajax form and link.

To do so, write a link as follow:

<a href="createForm.htm" data-role="button" data-ajax="false">Create</a>

You can also do it for all the links by overriding default configuration:

<script src="/js/jquerymobile/jquery-1.5.min.js"></script>
<script type="text/javascript">
    $(document).bind("mobileinit", function(){
        $.mobile.ajaxEnabled= false;
    });
</script>
<link rel="stylesheet" href="/css/jquerymobile/jquery.mobile-1.0a3.min.css" />
<script src="/js/jquerymobile/jquery.mobile-1.0a3.min.js"></script>

In both the way, pain is, you will loose framework's generated back button!

Read more at: http://jquerymobile.com/demos/1.0a3/#page.html&subpageidentifier

Edit:

To add back button in new page, you may put it manually like:

<div data-role="header">
    <a href="../list.htm" data-icon="arrow-l" data-ajax="false">Back</a>
    <h1>
        List items
    </h1>
</div>