Question

I’ve got an index.php with a listview containing links to profile.php which takes an id paramter with a specific ID:

<div data-role="content">
    <div class="choice_list">
        <ul data-role="listview" data-inset="true" >
            <li><a href="profile.php?id=1" data-transition="slidedown"><img src="martin.jpg"/>Martin</a></li>
            <li><a href="profile.php?id=2" data-transition="slidedown"><img src="liisa.jpg"/>Liisa</a></li>
        </ul>
    </div>
</div>

In profile.php I include my profile.js file which must run a bunch of stuff within:

$(document).ready(function() {

    // Loads specific user data via API calls

});

PROBLEM: When I visit profile.php the first time it all works fine, but when visiting it again my Javascript (profile.js) won’t run. I know similar questions have been asked before and I’ve checked a bunch of them out, but I didn’t really understand the answers, and the couple of solutions I tried didn’t work out at all (trying to stop jqm from page caching and whatnot). Is there a somewhat simple solution to this problem that could be applied to my code?

Using jquery.mobile-1.0.1.js

Thanks in advance

/Andreas

Answer 1

The jQuery mobile documentation for events states this:

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

The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.

I think pageinit is only fired the first time a page is loaded, so if you go to a page, then go to another page, then go back to the first page, the init event will not fire the second time. To overcome this, you can use the pageshow event maybe as well