But de la manipulation :
Afficher une listview pour jquery mobile qui s’actualise en fonction du résultat d’un fichier php :
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="scripts/jquery-1.6.4.js"></script>
<script src="scripts/jquery.mobile-1.1.0.js"></script>
<link href="scripts/jquery.mobile.structure-1.1.0.css" rel="stylesheet"/>
<link href="scripts/jquery.mobile.theme-1.1.0.css" rel="stylesheet" />
</head>
<body onLoad="refresh()"
<div data-role="page" id="home">
<div data-role=header>
<h1>Colombes->Saint-Lazare</h1>
</div>
<div data-role="content">
<ul data-role=listview id=list data-inset=true >
</ul>
</div>
</body>
</html>
<script>
function refresh() {
$.ajax (
{ url : "http://xxxx/trains.php",
complete : function (xhr, result)
{ if (result != "success") return;
var sTrains=xhr.responseText;
//-- Trace :console.log(sTrains);
var json = JSON.parse(sTrains);
var nbTrains=json.nbTrains;
var res="";
var restmp="";
for (var i = 0; i < nbTrains; i++)
{restmp=json.trains[i].date+':'+json.trains[i].nom;
res = res+ '<li data-theme="e">'+restmp+"</li>";}
//-- Trace : console.log(res);
$('#list').empty();
$('#list').html(res);
$('#list').html(res).promise().done(function () {
$(this).listview("refresh");}
);
setTimeout(refresh, 10000);
}
});
}
</script>
*****
Vu sur StackOverFlow : http://stackoverflow.com/questions/17865348/jquery-mobile-losing-formatting-on-a-ul-listview
Okay, here’s how you do it :
You’ve got a listview like this :
<ul data-role="listview" data-inset="true" id="acceptedContent" data-theme="c">
</ul>
You’ve got some data which you’ll loop through and format as <li/>. Instead of appending multiple times, you could collect the li html in a variable and append it, only once :
var li = "";
//your loop, $.each, for or for..in
li += '<li><a href="#Info' + results.rows.item(i).infoID + '" data-transition="flow">' + results.rows.item(i).Info + '</a></li>';
//end of loop
So now, youve got all the data in one variable called li. Now how would you use this? Put it in the <ul/>
$('#acceptedContent').html(li);
This way you could cut down the use of empty and append. just use html() to erase and re-write.
Now comes the important part. You have to refresh the listview. You’ve got to use listview("refresh"), but not in the way you’ve done it. You have to wait for the html() to finish its work. Only then, must you use the refresh api, like this :
$('#acceptedContent').html(li).promise().done(function () {
//refresh here - $(this) refers to ul here
$(this).listview("refresh");
});
You’ve got some buttons in there. Just in case you can refresh those using the trigger method. So your code would look like this :
$('#acceptedContent').html(li).promise().done(function () {
//refresh here - $(this) refers to ul here
$(this).listview("refresh");
//causes a refresh to happen on the elements such as button etc. WHICH lie inside ul
$(this).trigger("create");
});
Note :
If you get this error
Uncaught Error: cannot call methods on listview prior to
initialization; attempted to call method ‘refresh’.
Change
$(this).listview("refresh");
to
$(this).listview().listview("refresh");
Andro Pebble 
Votre commentaire