0

I have a list of items with which I would like to view more details of them when I click on it. The information for these items isn't available and I need to make an API request in order to get the necessary data which I then render in a jquery template.

The template is then added to a jquery mobile page.

Here is some of the code in question that I am using to try and update my page

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);
});

The following is the div I use for the product details as well as the template for which I use to populate that 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>

Here is a screenshot of a details page when I first click on an item:

Details page working

Details page not working

csaunders
  • 1,712
  • 1
  • 15
  • 20

1 Answers1

0

I think you need to tell the page to refresh itself the second time around. First time it creates everything and then doesn't go around re-styling itself. I had a similar issue dynamically creating LIs in a listview.

Try:

productDetailsPage.page("refresh",true);

Not sure if this will work the first time around, but it should for the 2nd :)

Richard
  • 4,740
  • 4
  • 32
  • 39
  • That does work sometimes, but I found the way to get it to consistently work was to call listview() on the item which would make jquery go in and apply all the necessary styles to it. – csaunders Mar 16 '11 at 13:47
  • Yeah, I actually do it on the listview too, but I wasn't sure if you were creating stuff outside the listview too. – Richard Mar 16 '11 at 16:21