jQuery mobile ajax pas chargement

Question

Je dois manquer une chose vraiment simple ici, parce que cela semble si évident ... et je ne peux pas croire que je ne trouve rien sur le web pour cela! J'essaie d'utiliser la bibliothèque mobile jQuery pour créer une vue mobile de mon site Web.

J'ai trois pages (données-rôle) dans ma page. Deux avec le contenu statique et le second avec le contenu que je souhaite charger avec ajax. La page d'accueil a le lien vers les deux autres pages:

<div data-role="page" id="home"> 
    <div data-role="header" id="header"> 
     <h1>the header</h1> 
    </div> 
    <div data-role="content"> 
     <a href="http://absolutepathtomyserver/homepage#highlights" data-role="button">highlights</a> 
     <a href="http://absolutepathtomyserver/updatePlaylistTemplate#playlist" data-role="button" rel="external">playlist</a> 
    </div> 
</div> 

<div data-role="page" id="highlights"> 
    <div data-role="content"> 
     <p class="center">My static content</p> 
    </div> 
</div> 

<div data-role="page" id="playlist"> 
    <div data-role="content"><!-- TO BE FILLED FROM AJAX! --></div> 
</div> 

De ma compréhension des nombreux tutoriels que je lis, par défaut, tous les un des liens href exécuter un appel ajax, sauf indication contraire, mais il ne fonctionne pas. Lorsque je clique sur le lien en surbrillance, la diapositive est comme attendue sans charger aucune autre page puisque c'est la même page. Tout va bien ici. Mais lorsque je clique sur la page de la liste de lecture, l'animation de la diapositive est exécutée mais l'appel ajax n'est jamais fait pour que le contenu de la liste de lecture ne soit jamais rempli. Notez que je surveille les appels réseau mais aucun n'est fait quand je clique sur le lien.

Qu'est-ce que j'ai raté?

Est-ce mon appel absolu? J'utilise l'URL de base du tag pour le contenu statique, donc les liens doivent être absolus dans toute mon application.

Ai-je besoin d'utiliser la méthode .bind?

Dois-je effectuer l'appel ajax manuellement? Je peux le faire, mais à partir de ce que je lis il semble être natif à href lien dans l'exetension mobile ...

Answer 1

Option 2 avec un peu de tweeking. Je ne sais pas pourquoi mais comme c'est, la fonction de rappel dans votre code semble trop rapide, car aucun contenu n'est rempli, même si le contenu est pris à partir de l'arrière. Je peux voir l'appel dans mon inspecteur de réseau. Il manquait également des "" s dans le second sélecteur.

Voici le code de travail:

$('#playlist').bind('pageshow', function() { 
    $.ajax({ 
     url: 'updateplaylist.html', 
     success:function(data, textStatus, jqXHR){$('#playlist').find('[data-role="content"]').html(data);} 
    }); 
}); 

Je me demande encore pourquoi l'option 1 n'a pas le droit url. J'ai également peur que faire mon appel ajax manuellement je sauterai le spinner par défaut du cadre mobile de jquery. Localement c'est trop rapide je ne le vois pas de toute façon.

Answer 2

La gestion ajax-link de jQuery Mobile s'applique aux pseudo-pages qui ne sont pas déjà spécifiées dans votre document. Si vous voulez ajax-charger une page à partir du lien sur votre pseudo-page home puis omettre la pseudo-page playlist du document. jQuery Mobile ira à l'URL spécifiée dans le lien, saisir tout le contenu dans l'élément data-role="page", l'ajouter automatiquement au dom, et passer à la page nouvellement ajoutée.

Une autre voie consiste à charger des données via un appel ajax lorsque la page playlist est affiché comme ceci:

$('#playlist').bind('pageshow', function() { 
    $.get('url_to/get.php', function (data) { 
     $('#playlist').find('[data-role="content"]').html(data); 
    }); 
}); 

L'exemple ci-dessus relise les html dans l'élément data-role="content" dans le playlist pseudo pages à chaque fois qu'il est montré. Vous pouvez alternativement utiliser pagecreate ou l'un des autres jQuery Mobile events.