SIMPLIFIED: jqtouch mobile app ajax loading issue

Question

In jqtouch and iui, what do you do if you want to follow a link like <a href="#feed-49">This is a FEED</a> AND dynamically load the content of the <div id="feed-49"></div>?

I've tried bind/live a click handler onto the "a" and onto a parent "div" but it never gets fired, just the event for actually following the link. Thanks.

This is a simplified version of my other question:

http://stackoverflow.com/questions/3506800/jqtouch-mobile-app-ajax-loading-issue

Answer 1

It depends whether you want the page pre-loaded or load-on-demand.

If you want it pre-loaded, you might want to fill in the page upon, say, $(document).ready:

$(document).ready(function(){
    $('#feed-49').load('feed-49.html');
});

If you want it to load on-demand, you can listen to the pageAnimationStart event:

$('#feed-49').bind('pageAnimationStart', function(event, info){ 
    if (info.direction == 'in') 
        $(this).load('feed-49.html');
});

You may want to read the jQTouch's documentation on callback events.

Answer 2

I just went through what you are going through and know exactly how to solve it. 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.

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);   
      }); 
   }); 
};