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');
精彩评论