jquery-Mobile -> страница показывает, но следующая страница не

Question

Я работаю над базовой страницей с помощью jquery-mobile.

В настоящее время у меня есть 2 страницы данных.HOME = список представлений имен DETAILS = сведения об имени

Когда я впервые открываю страницу (домой), она хорошо загружается и показывает несколько имен.Я нажимаю на ПЕРВОЕ имя (то есть: Джон), и оно показывает детали для Джона.Когда я нажимаю НАЗАД и нажимаю НОВОЕ ИМЯ (то есть: ДЖЕЙН), он ничего не показывает.

Но если я вернусь к ДЖОНУ, он покажет его информацию.Я не уверен, что является причиной того, что это НЕ загружается во второй раз, возможно, кеширование?Любые мысли будут полезны.

ГЛАВНАЯ

Дом

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

ДЕТАЛИ СТРАНИЦА

<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>

Это мой Javascript для DETAILS Страница

/* 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);

    });
}

Любое направление будет высоко оценено, jQuery-Mobile для меня очень нов, но выглядит интересно!

ОБНОВЛЕНИЕ: Это мое текущее рабочее местоположение.http://apps.stickystudios.ca/www/

Answer 1

Если ваша страница сведений находится в отдельном документе от домашней страницы, вы можете использовать объект параметров $.mobile.changePage(), чтобы обновлять страницу при каждом посещении:

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

Документы для$.mobile.changePage(): http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

Обновление

Я добавил этот код на вашу страницу через консоль разработчика:

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

, которая удаляет псевдостраницу #detailsPageкаждый раз, когда он отошел от.Проблема, с которой вы столкнулись, заключалась в том, что в DOM было несколько элементов #detailsPage, что приводило к ошибкам.