Actualiser ListView avec Ajax

But de la manipulation :

Afficher une listview pour jquery mobile qui s’actualise en fonction du résultat d’un fichier php :

 <!DOCTYPE html>   
     <meta name="viewport" content="width=device-width, initial-scale=1" />  
     <script src="scripts/jquery-1.6.4.js"></script>  
     <script src="scripts/"></script>  
     <link href="scripts/" rel="stylesheet"/>  
     <link href="scripts/" rel="stylesheet" />  
   <body onLoad="refresh()"  
     <div data-role="page" id="home">  
            <div data-role=header>  
      <div data-role="content">  
         <ul data-role=listview id=list data-inset=true >   
 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++)  
        res = res+ '<li data-theme="e">'+restmp+"</li>";}  
   //-- Trace : console.log(res);  
   $('#list').html(res).promise().done(function () {  
   setTimeout(refresh, 10000);  


Vu sur StackOverFlow :

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">

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
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/>


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

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
   //causes a refresh to happen on the elements such as button etc. WHICH lie inside ul

Note :
If you get this error

Uncaught Error: cannot call methods on listview prior to
initialization; attempted to call method ‘refresh’.





Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l’aide de votre compte Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Articles récents
Commentaires récents
%d blogueurs aiment cette page :