Adding dynamically retrieved content to a jQuery Mobile PHP MVC to the jQuery object

Question

I have a MVC web application that checks to see what is in the query string using PHP and loads the appropriate page by rendering the header, content and footer (for example ?category=1 loads a CategoryController which renders a category view).

I also have a custom.js that adds jQuery functionality to the elements in the DOM. Since the dynamic content is controlled by PHP, the jQuery functionality only works when the page is loaded first. Traversing through the application doesn't refresh the page and so elements that are newly included are not added to the jQuery object.

Any ideas on how to get around this?

Not sure if I understand the problem here, but it doesn't matter if the elements doesn't exist in the DOM "from the start". You can still use event delegation in jQuery and bind whatever methods you want. Let me know if you want an example. — Johan, Jan 21 '13 at 14:45
Are you using $(document).ready http://api.jquery.com/ready/ — allen213, Jan 21 '13 at 14:59
I'm using $(function() at the start of my custom.js which I believe is the equivalent of $(document).ready()? Sorry for not being clear enough, from what I can see when a link is clicked on the header, content and footer is reloaded through PHP without a page refresh. So for example, I have an autocomplete suggestions search bar in my header. This functionality works on the first page of a refresh but not on any of the others. If I return to that page without refreshing it still works. — Simon Finney, Jan 21 '13 at 15:09

score 1 · Accepted Answer · edited May 23 '17 at 12:21

First do not use $(function() or $(document).ready() with jQuery Mobile, simply because jQM is not built to work like that. Instead you should use page events mentioned here: https://stackoverflow.com/a/14010308/1848600 or mobileinit event like this:

$(document).on("pageinit", function () {

});

or mobileinit if you want it to be executed only once at app execution:

$(document).on("mobileinit", function () {

});

Reason is described in top link. Also you can find more about this in jQM official documentation: http://jquerymobile.com/test/docs/api/events.html

Now if you want jQM to restyle your page you should use .trigger('pagecreate') function.

Let's say, for example you have a jQM page with id index and this is your generated layout.

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <a href="#" data-role="button" id="test-button">Test button</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

To force jQM to style it you should use something like this:

$('#index').live('pagebeforeshow',function(e,data){    
    $('#index').trigger('pagecreate');
});

or if you want to apply it to every jQM page, use it like this:

$('[data-role="page"]').live('pagebeforeshow',function(e,data){    
    $(this).trigger('pagecreate');
});

Adding dynamically retrieved content to a jQuery Mobile PHP MVC to the jQuery object

1 Answers1