Toon posts:

[jQuery Mobile] Na AJAX request layout updaten

Pagina: 1
Acties:

  • peterkuli
  • Registratie: september 2003
  • Laatst online: 12:52
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:
1
 <a href="#" onclick="javascript:functions.loadTask();" data-icon="gear" class="ui-btn-right">Sync</a> 


Simpele ul:
HTML:
1
 <ul id="tasklist" data-role="listview" data-theme="c"></ul>


Fragment van de AJAX request (loadTask()):
JavaScript:
1
2
3
4
5
6
7
8
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
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
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
  • Registratie: september 2003
  • Laatst online: 12:52
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
  • Registratie: september 2003
  • Laatst online: 12:52
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:
1
$('ul').listview('refresh');


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

  • Bosmonster
  • Registratie: juni 2001
  • Laatst online: 10-09 22:52
Het is dan ook nog een hele vroege experimentele alpha, niet bedoeld voor productie.

  • DutchAddick
  • Registratie: december 2002
  • Laatst online: 14:54
Maar waarom ga je zelf ajax implementeren als je toch al jQuery gebruikt?

  • peterkuli
  • Registratie: september 2003
  • Laatst online: 12:52
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.
Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee