jqtouch mobile app ajax loading issue

I simplified this question at

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+' &nbsp; ('+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.

I just went through what you are going through. You need to turn that XML into JSON objects, which will be numbered [0],[1], etc.

This JQuery plugin works and rocks : http://www.fyneworks.com/jquery/xml-to-json/ Add that JS to your app. Your parse XML function will then convert the XML nodes you want (like item nodes within a channel) into JSON objects and then numbers the items.

So look how I then empty the current list of items, build a list of the items and add a custom CLICK function to the list items with a class of "sun" (i love jquery). That function then will add it's parent node title and desc to the divs that need it. The href will push it to the new jqtouch DIV which will handle all the detail info. Cool 'eh? Vote me up if this works. It did for me, like a charm.

<ul id="feedlist"></ul>    
<div id="titleDiv"></div>    
<div id="descDiv"></div>

    function parseXml(xml)
    { 
      $('#feedList').html('');
      var rss = $.xml2json(xml); 
      $.each(rss.channel.item, function(i, item)
        { 
        $('#feedList').empty().append('<li class=sun'+i><a href=#contentDiv>'+item.title+'</a></li>'); 
        $('.sun'+i).click(function() {
          $('#titleDiv').empty().append(item.title);                
          $('#descDiv').empty().append(item.description);   
          }); 
       }); 
    };