jQuery mobile data inladen zonder page refresh

  • Onderwerp starter Onderwerp starter pum
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
pum

pum

Gebruiker
Lid geworden
18 dec 2009
Berichten
193
Beste helpers,

Op het moment ben ik bezig een mobiele applicatie aan het bouwen met jQuery mobile.
Het probleem waar ik tegen aan loop is dat ik het niet voor elkaar krijg data in te laden zonder page refresh.
Jquery mobile werkt met ajax, en maakt het mogelijk een om applicaties te maken die een native look en feel hebben.
wanneer je op een link klikt opgemaakt zoals hieronder

HTML: 
<li><a href="route.php" data-transition="fade">Routebeschrijving</a></li>

word de desbetreffende pagina route.php ingeladen met een fade transition. het probleem is nu dat de data die ik wil laten zien op de pagina niet direct word ingeladen. Wanneer ik de link data-ajax="false" mee geef zoals in de link hieronder werkt het inladen van de data wel, alleen zie ik geen fade transition, maar word de pagina compleet ververst. Dit ten koste van de native look en feel van de app.

HTML: 
<li><a href="route.php" data-ajax="false" data-transition="fade">Routebeschrijving</a></li>

kan iemand mij uitleggen hoe ik dit voor elkaar kan krijgen, of heeft iemand hier ervaring mee?
ter verduidelijking heb ik mijn mobile app tot nu toe bijgevoegd. Wanneer je bijvoorbeeld op contact klikt en navigeert naar routebeschrijving en de pagina ververst zie je wat ik bedoel.

Note: om de webapp te kunnen bekijken, moet de complete map worden uitgepakt op een wamp server (localhost)
 

Bijlagen

Laatst bewerkt:
ik heb de oplossing inmiddels gevonden.

in je index link je vanuit de <head> naar voorbeeld.js. Van hieruit kun je controleren op events.

events om te controleren of een pagina word ingeladen

  • pagebeforecreate
  • pagecreate
  • pageinit (in oudere versies was het pagecreate, nu is dit vervangen voor pageinit)

binden gaat als volgt in voorbeeld.js plaats je de volgende code
[JS]$('#element').live('pageinit', function(event){
if('isTrigger'){
$('element').html('<li>bla bla bla</li>');
}

$('#element').live('click', function(){
$('.tweetlist').html('<li>bla bla bla bla bla bla bla bla bla</li>');
});
});[/JS]

Doordat jQm door middel van AJAX pagina's aan de DOM toevoegt herkent hij bij het inladen van de webapplicatie alleen de eerste pagina.
Door te checken op pageinit event 'dus eigenlijk het inladen van de pagina' kun je er voor zorgen dat data op dat moment word ingeladen.
met . live kun je de data die is ingeladen op de pagina ook weer opnieuw inladen zonder pagerefresh (handig voor bijvoorbeeld een update knop)
Op deze manier hou je de effecten, kun je de data in de pagina inladen en veranderen, en ververst de pagina niet meer
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan