[jQuery Mobile] Na AJAX request layout updaten

[peterkuli]

Tweakers,

De (mobiele) applicatie waar ik mee bezig ben haalt van de server een JSON die daar gegenereerd wordt. De JSON moet op elk gewenst moment binnengehaald kunnen worden middels een 'sync'-knop en gebeurt nu door een AJAX request naar de server te doen. De data in de JSON moet in een unsorted list komen die door jQuery Mobile 'opgemaakt' wordt.

Echter, dit laatste gaat niet goed. In plaats van de 'jQuery-style' lijst wordt de lijst als 'gewone' html ul weergegeven. Opzich logisch omdat de UI gegenereerd wordt bij het laden van de pagina en deze niet geupdate wordt bij een request.

Sync-knop die de functie aanroept:

JavaScript:

 <a href="#" onclick="javascript:functions.loadTask();" data-icon="gear" class="ui-btn-right">Sync</a> 

Simpele ul:

HTML:

 <ul id="tasklist" data-role="listview" data-theme="c"></ul>

Fragment van de AJAX request (loadTask()):

JavaScript:

if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    var task = JSON.parse(xmlhttp.responseText);
    var string="";
    for (var i=0 ; i<task.rows.length ; i++) {
          string = string+'<li><a href="#">'+task.rows[i].description+'</a></li>';
    }
    document.getElementById("tasklist").innerHTML=string;
}

Ik kan nergens een doLayout() functie o.i.d. vinden die nadat de request is geweest de lijst opmaakt. Iemand een idee?

[Bosmonster]

Is het bij jQuery Mobile niet de bedoeling dat je dat middels changePage doet? Ook ivm accessibility en backwards compatibility?

Verder snap ik niet zo goed waarom je je hele eigen AJAX- en event-implementatie gebruikt terwijl je jQuery tot je beschikking hebt. Kan me ook goed voorstellen dat refreshes automatisch gaan zolang je niet om de library heen werkt.

Daarnaast voeg je een blanko element toe zonder alle benodigde classes voor de button-li's. Kijk bijvoorbeeld eens naar de DOM van de list-sample:

http://jquerymobile.com/d...#docs/lists/lists-ul.html

[ Voor 68% gewijzigd door Bosmonster op 15-11-2010 12:04 ]

[peterkuli]

Ik snap niet precies wat je bedoelt. Ik kan er ook niks over vinden in de API. Bij changePage() denk ik aan het veranderen naar een andere pagina toe, bedoel je dat? Ik zie eigenlijk niet hoe dat mijn probleem op zou moeten lossen.

Edit:

quote: Bosmonster

Verder snap ik niet zo goed waarom je je hele eigen AJAX- en event-implementatie gebruikt terwijl je jQuery tot je beschikking hebt. Kan me ook goed voorstellen dat refreshes automatisch gaan zolang je niet om de library heen werkt.

jQuery.ajax() heb ik ook gebruikt maar dat geeft hetzelfde resultaat. Het ligt ook niet aan de request (jQuery gebruikt natuurlijk ook gewoon een xmlhttprequest onder water) maar meer in het feit dat de lijst niet opgemaakt wordt. Ook load() geeft niet het gewenste resultaat.

Ik zal eens naar het linkje kijken, volgens mij staat daar wel iets interessants in.

Edit2:
In de API staat:

If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create any nested lists that are added. For example, $('ul').listview('refresh');

Maar als ik dit opneem in de succeshandler van de jQuery ajax request:

Uncaught no such method 'refresh' for listview widget instance

[ Voor 75% gewijzigd door peterkuli op 15-11-2010 12:44 ]

[peterkuli]

Het werkt. Wat de oplossing precies is weet ik niet maar ik heb de laatste versie van jQuery Mobile gebruikt (ipv 1.0a1 1.0a2) en in de succeshandler van de jQuery Ajax functie het volgende opgenomen:

JavaScript:

$('ul').listview('refresh');

Dat laatste zorgt ervoor dat de lijst wordt geupdate, precies wat de bedoeling was.

[Bosmonster]

Het is dan ook nog een hele vroege experimentele alpha, niet bedoeld voor productie.

[DutchAddick]

Maar waarom ga je zelf ajax implementeren als je toch al jQuery gebruikt?

[peterkuli]

CAFC1905 schreef op dinsdag 16 november 2010 @ 15:09:
Maar waarom ga je zelf ajax implementeren als je toch al jQuery gebruikt?

Dat had ik in eerste instantie. Nu gebruik ik $.ajax van jQuery. Maar dat was het probleem ook helemaal niet. Het ging over het updaten van de lijst, niet om de request op zich.

En dan nog maakt het niet uit. De Ajax functies van jQuery gebruiken ook gewoon een xmlhttprequest onder water. Plus dat het gewoon een testcase was.