Jquery mobile and dynamic links

Just dipping into some Jquery mobile for a work project and I have come across a little stumbling block that I've been 开发者_如何学Pythonspinning my wheels on for a little bit too long so its time for a peer review.

The concept is this: there is a main page with a "recent facebook entries" button. When clicked, the button takes you to a second page where the results are pulled from a facebook rss feed and wrapped in an tag pointing to a bookmark on the same page (in keeping with the JQM convention). Up to this point I have no problem, the links are populating the title correctly, and the href is pointing correctly to href="detailpage"+i. the problem is when I try to make the corresponding content container and append it to the body tag with the matching detailpage+i id the link just takes me back to the home page and not to the newly appended content.

My thought is that maybe the dom doesnt know the new stuff is there after its created, and as a result, having no matched elements, just the first "page" element is being returned.

I'm using JQM 1.0b2 and jquery 1.6.2 with phonegap

the operation I am doing looks like this:

$('#gotoContentpage').click(function(){

    $("#contentlist").empty(); //empty the list elements we've placed in the html
    $.ajax({
           type: "GET",
           url: "https://www.facebook.com/feeds/page.php?id=212385708771580&format=rss20",
           dataType: "xml",
           success: parseXml
           });

    function parseXml(xml){    
        var i =1;
        $(xml).find("item").each(function(){
            var pageid = "detailpage" + i;                     
            $("#contentlist").append("<li><a href='#"+pageid+"'>" + ($(this).find("title").text()) + "</a></li>");

            $("body").append("<div data-role='page' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1>  detail Page Footer </h1></div></div>");

          i++;
          });


          $("#contentlist").listview('refresh'); 

         }


     });            

here is the html that is being output as a regular html page: http://deepblue.cs.camosun.bc.ca/~c0029098/caleb/test.html

EDIT: after a number of hours spinning my wheels andchanging my approach it seems I have found a solution. Instead of making the href point at the bookmark like all the other links that load initially I was forced to make use of the $.mobile.changePage function to get where I needed to go.

"<li><a href='javascript:void(0)' onclick=\"javascript: $.mobile.changePage($('"+'#'+pageid+ "'), 'slide');\">" + "foobar"</a></li>"

hope that helps someone.

---

I believe, dynamically added pages should have the data-url attribute added to it in order to enable it in the navigation. If I recall correctly this was added when JQM overhauled the way back button and history worked. The ID no longer has use in terms of navigation.

ie in your case:

$("body").append("<div data-role='page' data-url='"+pageid+"' id='"+pageid+"'><div data-role='header'><a data-rel='back'>back</a><h1>" + ($(this).find("title").text()) + "</h1></div><div data-role='content'>" + ($(this).find("description").text()) +"</div><div data-role='footer'><h1>  detail Page Footer </h1></div></div>");

If there are still problems then .page() may need to be called on the dynamically added pages.

My code for adding dynamic pages looks like:

$('<div data-role="page" id="infopage" data-url="infopage"></div>').appendTo('body').page();

It may be the case calling .page() just adds the data-url I will check when I have the time and update my answer.