I simplified this question at
http://stackoverflow.com/questions/3506917/simplified-jqtouch-mobile-app-ajax-loading-issue
But am leaving this post for details. Thanks.
I have an RSS Reader app I use as a playground to learn. It's current incarnation is for learning about jqtouch/mobile app stuff. I'm having a problem dynamically loading the posts because jqtouch takes over the 'a' and does stuff with it.
Here's the general process:
- 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
The problem is, jqtouch & iui both seemingly force you to use an "a" tag to go between pages/cards and I want to dynamically load the blog posts as they are needed, for speed (and eventually I will be implementing a manifest and localStorage). For what I want to do, it's important that I load it with JSON. I want to make this as fast and efficient as possible. I'd prefer to bind/live a click to a div not an "a" which would give me the ability to do a lot more with the click besides just jumping to the new page/card.
Here's the HTML portion:
<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>
Here's what is fired when the page loads:
$(document).ready(function()
{
// onload
$.ajax({
type: 'GET',
url: '/ajax/feeds',
dataType: 'json',
success: function(data)
{
append_feeds(data);
},
async: true
});
// ...
This is the function that adds in the feed titles:
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);
}
}
By now, we have the basic html, and append_feeds() has stuffed a bunch of divs/uls with the titles + num_unread of the blogs I am following. In addition, I've set up other divs to be the target of the links, one for each blog. These are "pages" or "cards".
But, when I click on the title of the blog, I want to 1st grab all of the posts for the single blog using ajax/json, then update the proper feed's div, and load the page/card (basically jqtouch and iui pull out the div matching the ID of the hash in the href="").
I've tried bind/live to the click/tap events but jqt/iui seemlingly take over the call. I would skip the "a" tag altogether and just bind a click to "li.post" or something, but jqtouch doesn't recognize it as a click. It seems to only want to allow me to use actual links as click events.