开发者

Problem with displaying list thumbnail list in jqmobile

Hello I have a problem with displaying thumbnail list in jqmobile.

If I tried>

      <li> 

      <img src="images/album-bb.jpg" /> 

      <h3><a href="index.html">Broken Bells</a></h3> 

      <p>Broken Bells</p> 

      </li> 

Is everything O.K and looks it like>开发者_JAVA百科

http://jquerymobile.com/demos/1.0a3/docs/lists/lists-thumbnails.html

But if I try generate it dynamically via

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.xml",
        dataType: "xml",
        success: xmlParser
    });
});

function xmlParser(xml) {

//Hide .gif loader image if data are succesully fetched
   // $('#load').fadeOut();

    $(xml).find("SHOPITEM").each(function () {

   $("ul").append("<li><img width=\"80px\" src=\""+$(this).find('IMGURL').text()+"\"/><h3><a href=\""+$(this).find('URL').text()+"\">"+$(this).find('PRODUCT').text()+"</a></h3><p>"+$(this).find('PRICE_VAT').text()+"</p></li>");


    });



}

I got items displayed, but content is not formated correctly.

Where can be problem please?

Thanks for any advice..


You probably have already solved this by now, but if not, and for the sake of others who may have the same problem, I'll post this potential solution:

It's very likely that your CSS is not being applied to the DOM Elements (HTML) being generated and inserted into the DOM by your AJAX function. Without working on it, I would suspect you may have to apply your CSS inline with the HTML being inserted to it will take affect.

I've run into a similar problem with HTML inserted via AJAX and trying to apply new javascript functionality to it. jQuery came up with a solution for that called the "live()" function, but I'm not sure jQuery has a built function to apply CSS in the same way.

So a line like this:

.append('<li>This text is red</li>');

would become:

.append('<li style="blue">This text is blue</li>');

Rick


i think you need to refresh the listview in javascript to get the formatting:

From http://jquerymobile.com/test/docs/lists/docs-lists.html: $('#mylist').listview('refresh');

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜