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

Répondre

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

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

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

Connexion à %s

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