jquery-Mobile -> page shows, but next page doesn't

Question

I am working on a basic page with jquery-mobile.

I currently have 2 pages of data. HOME = ListView of names DETAILS = Details of the name

When I first open the page (home), it loads good, and shows a few names. I click on the FIRST name, (ie: John), and it shows the details for John. When I click BACK, and click on a NEW NAME, (ie: JANE), it doesn't show anything.

But if I click back to JOHN, it will show his information. I'm not sure what is causing this to NOT load the second time around, perhaps caching? Any thoughts would be helpful.

HOME PAGE

Home

    <div data-role="content">
         <ul id="homeList" data-role="listview"></ul>
    </div>
</div>

DETAILS PAGE

<div id="detailsPage" data-role="page" >
    <div data-role="header" data-position="fixed"><h1>Details</h1></div>

    <div data-role="content">
        <ul id="details" data-role="listview"></ul>
    </div>
</div>

</body>

This is my Javascript for the DETAILS Page

/* JQUERY
-------------------------------------------------------------------- */
$("#detailsPage").live('pageshow', function(event){

    var serviceToLoad = "details.php";
    var pageId        = "#detailsPage";
    var contentId     = "#details";

    // getId from global.js function
    var id = getUrlVars()["id"];

    // Apply the content to the page
    getDetails(contentId, id);
});


/* FUNCTION SET
-------------------------------------------------------------------- */
function getDetails(contentId, id) {

    // Load the JSON
    $.getJSON(serviceUrl + 'details.php?id='+id, function(data) {

        // Remove all content first
        $(contentId + ' li').remove();

        // We only need to grab the 1 result
        var details = data.items[0];
        $(contentId).append('<li><a href="#">' + details.name + '</a></li>\n');

        // Refresh page
        $(contentId).listview('refresh', true);

    });
}

Any direction would be greatly appreciated, the jQuery-Mobile is very new to me, but looks interesting!

UPDATE: This is my current working 'location'. http://apps.stickystudios.ca/www/

Answer 1

If your details page is in a separate document from your home page then you can use the options object of $.mobile.changePage() to allow the page to be refreshed each time it's visited:

$(document).delegate('#home', 'pageinit', function () {
    $('#homeList').find('a').bind('click', function () {
        $.mobile.changePage(this.href, {
            reloadPage : true
        });
        return false;
    });
});

Docs for $.mobile.changePage() : http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

Update

I added this code to your page via my developer console:

$(document).delegate('#detailsPage', 'pagehide', function () { $(this).remove(); });

Which removes the #detailsPage pseudo-page every-time it's navigated away from. The problem you were having was that there were multiple #detailsPage elements in the DOM which causes errors.