Последовательное обновление страницы соответствующими стилями jQuery Mobile - PullRequest
Новая
       18

Последовательное обновление страницы соответствующими стилями jQuery Mobile

0 голосов
/ 01 марта 2011

У меня есть список предметов, с которыми я хотел бы просмотреть более подробную информацию о них, когда я нажимаю на него.Информация для этих элементов недоступна, и мне нужно сделать запрос API, чтобы получить необходимые данные, которые я затем отображаю в шаблоне jquery.

Затем шаблон добавляется на мобильную страницу jquery.

Вот часть кода, который я использую, чтобы попытаться обновить мою страницу 

function updateProductDetails(data){
    var productDetailsData = data['product']
    var productDetailsPage = $("#productDetails")

    var templateData = $("#productDetailsTmpl").tmpl(productDetailsData);

    productDetailsPage.html(templateData);

    //ISSUE IS HERE -- The following works when I load a template
    // for the first time, after that it doesn't work as expected.
    productDetailsPage.page();

    $.mobile.changePage("#productDetails");
}

function loadProductDetails(productId){
    $.mobile.pageLoading();
    $.ajax({
        url: '/admin/products/'+productId+".json",
        success: function(data, status, xhr){
            updateProductDetails(data);
            $.mobile.pageLoading(true);
        },
        dataType: 'json'
    });
}

$("#productItem").live('click', function(event){
    var productId = $(this).children("#productId")[0].innerHTML;
    loadProductDetails(productId);
});

Ниже приведен div, который я использую для сведений о продукте, а также шаблон длякоторый я использую для заполнения этого div 

<div id="productDetails" data-role="page">
</div>

<!-- Product Item Details Template -->
<script id="productDetailsTmpl" type="text/x-jquery-tmpl">
    <div data-role="header">
        <h1>${title}</h1>
    </div>

    <div data-role="content">
        <h1>Properties</h1>
        <p>${product_type}</p>
        <p>${vendor}</p>
    </div>
</script>

Вот снимок экрана страницы подробностей, когда я впервые щелкаю по элементу:

Рабочая страница сведений

Страница сведений не работает

1 Ответ

0 голосов
/ 16 марта 2011

Я думаю, вам нужно сказать странице обновиться во второй раз.В первый раз он создает все, а затем не перестраивает сам себя.У меня была похожая проблема с динамическим созданием LI в виде списка.

Попробуйте: 

productDetailsPage.page("refresh",true);

Не уверен, сработает ли это в первый раз, но для 2-го:)

...