I simplifié cette question àapplication mobile jQTouch problème de chargement ajax
SIMPLIFIED: jqtouch mobile app ajax loading issue
Mais je quitte ce poste pour plus de détails. Merci.
J'ai une application Reader RSS que j'utilise comme terrain de jeu pour apprendre. Son incarnation actuelle est d'en apprendre davantage sur les trucs de jqtouch/application mobile. J'ai un problème pour charger dynamiquement les messages parce que jqtouch prend en charge le 'a' et fait des choses avec lui.
Voici le processus général:
- Page loads general html (this is very basic, a couple of empty divs
between the body tags) and a link to the reader
- when the document is ready, the first thing that fires is
an ajax call that gets a list of the blogs I'm following that
have unread posts and appends it to the proper divs
- when I click the link to the reader, all the blog titles are there
- I click a blog title and it is to load all of the unread posts
Le problème est, jQTouch & IIU à la fois vous forcer apparemment à utiliser une balise « a » pour aller entre les pages/cartes et je veux charger dynamiquement les messages de blog comme ils sont nécessaires, pour la rapidité (et éventuellement j'implémenterai un manifeste et localStorage). Pour ce que je veux faire, il est important que je le charge avec JSON. Je veux que cela soit aussi rapide et efficace que possible. Je préférerais lier/vivre un clic sur un div pas un "a" qui me donnerait la possibilité d'en faire beaucoup plus avec le clic en plus de sauter sur la nouvelle page/carte.
est ici la partie HTML:
<body>
<div id="home">
<h1>TERSE</h1>
<ul>
<li><a href="#feeds">teRSSe</a></li>
</ul>
</div>
<div id="feeds">
Loading, please wait ...
</div>
</body>
Voici ce que est déclenché lorsque la page se charge:
$(document).ready(function()
{
// onload
$.ajax({
type: 'GET',
url: '/ajax/feeds',
dataType: 'json',
success: function(data)
{
append_feeds(data);
},
async: true
});
// ...
C'est la fonction qui ajoute dans les titres d'alimentation:
function append_feeds(data)
{
var feeds = '';
// loop 1, add the links that will be shown in the main feeds block
for (i=0; i<data.length; i++)
{
var this_data = data[i];
if (this_data.unread == 0)
{
continue;
}
feeds = feeds+'<li title="'+this_data.title+'" class="feed-list" id="'+this_data.id+'">\n';
feeds = feeds+ '<a id="'+this_data.hid+'" href="#feed-'+this_data.id+'">'+this_data.title+' ('+this_data.unread+' unread)</a>\n';
feeds = feeds+'</li>\n';
}
$('#feeds').html('<div id="toolbar">\n<h1>RSS</h1>\n<a class="button back" href="#">Back</a>\n</div>\n<ul title="RSS" id="feedul">\n'+feeds+'</ul>\n');
// loop 2; 2nd time around to create pages/cards for each blog
// this is where the individual posts will load when the blog
// title is clicked
for (i=0; i<data.length; i++)
{
var this_data = data[i];
if (this_data.unread == 0)
{
continue;
}
var A = '<div id="feed-'+this_data.id+'">\n';
A = A + ' <h1>'+this_data.title+'</h1>\n';
A = A + ' <ul id="'+this_data.hid+'" title="'+this_data.title+'">\n';
A = A + ' <li id="load-'+this_data.id+'" class="load">loading '+this_data.title+' ...</li>\n';
A = A + ' </ul>\n';
A = A + '</div>\n';
$('body').append(A);
}
}
Maintenant, nous avons le HTML de base, et append_feeds() a bourré un tas de divs/uls avec les titres + num_unread du blogs que je suis. En outre, j'ai mis en place d'autres divs pour être la cible des liens, un pour chaque blog. Ce sont des "pages" ou des "cartes". Mais, quand je clique sur le titre du blog, je veux d'abord saisir tous les messages pour le blog unique en utilisant ajax/json, puis mettre à jour le div approprié, et charger la page/carte (en gros jqtouch et iui tirez le div correspondant à l'ID du hachage dans le href = "").
J'ai essayé bind/live pour les événements click/tap mais jqt/iui a pris en charge l'appel. Je passerais la balise "a" complètement et je lierais simplement un clic sur "li.post" ou quelque chose, mais jqtouch ne le reconnaitrait pas comme un clic. Il semble vouloir seulement me permettre d'utiliser des liens réels en tant qu'événements de clic.