jQTouch Dynamic Web app???

Question

I'm working on a dynamically changing web app. I'm using javascript and jQuery to populate DIV's with <li>'s and <a>'s. For example, I start with one menu dynamically built with javascript. From that menu, depending on item selected, another javascript function gets called to dynamically populate the corresponding DIV. The problem coming when I keep dynamically building submenu's and JQTouch doesn't switch to the next page.

In the following code, the alert('what') displays on an iPhone but never switches to the ePresentationDetails DIV. I have tried forcing it with jQT.goTo(); but that usually causes more issues and doesn't fix the problem.

Basic html code:

     <div id="home">
        <div class="toolbar">
            <a class="blueButton" href="javascript: void(0);" onClick="$('#logout').show();">Logout</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="logout" style="display:none;">
            <div id="confirmBox">
                Are you sure?
                <a class="logoutButton" href="javascript: void(0);" onClick="logOut();">Logout</a>
                <a class="cancelButton" href="javascript: void(0);" onClick="$('#logout').hide();">Cancel</a>
            </div>
        </div>
        <h1>Home</h1>
        <ul class="edgetoedge" id="ulHome"></ul>
    </div>
    <div id="ePresentations">
        <div class="toolbar">
            <a class="button back" href="#">Back</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="ePresentationsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
        </div>
    </div>
    <div id="ePresentationDetails">
        <div class="toolbar">
            <a class="button back" href="#">Back</a>
            <h1>AllaccessMD</h1>
        </div>
        <div id="ePresentationDetailsData"><div class="progress"><font style="padding-right:5px;">Loading...</font><img border="0" src="Images/ajax-loader.gif" /></div>
        </div>
    </div>

Javascript file:

function setupHome(){
if(localStorage.role == "Specialist"){
    var homeUL = '<li class="arrow"><a id="aEP" rel="s,' + localStorage.userID + '" href="#ePresentations">My E-Presentation</a></li>'
            + '<li class="arrow"><a id="aN" rel="s,' + localStorage.userID + '" href="#date">My Newsletter</a></li>'
            + '<li class="arrow"><a id="aE" rel="s,' + localStorage.userID + '" href="#date">My Events</a></li>'
            + '<li class="arrow"><a id="aMP" rel="s,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="aS" rel="s,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="aP" rel="s,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
} else {
    var homeUL = '<li class="arrow"><a id="aMP" rel="m,' + localStorage.userID + '" href="#date">Medical Partners</a></li>'
            + '<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>'
            + '<li class="arrow"><a id="aP" rel="m,' + localStorage.userID + '" href="#date">Profile</a></li>';
    $('#ulHome').html(homeUL);
}
$('#ePresentations').bind('pageAnimationStart', function (e){setupEPresentations(getID($('#aEP').attr('rel')).id);});
}
function setupEPresentations(sID){
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var epObject = JSON.parse(xmlhttp.responseText);
        var html = '<h1>Dr. ' + epObject.DR.DATA[0][1] + ' E-Presentation\'s</h1>';
        if(epObject.EP.DATA.length == 0){
            html += '<div><p>There are currently no E-Presentation\'s for this doctor.</p></div>';
        } else {
            html += '<ul class="edgetoedge">';
            for(var i in epObject.EP.DATA){
                html += '<li class="arrow"><a id="' + epObject.EP.DATA[i][0] + '" href="#ePresentationDetails">' + epObject.EP.DATA[i][1] + '</a></li>';
            }
            html += '</ul>';
        }
        $('#ePresentationsData').html(html);

        $('#ePresentationsData li a').click(function(e)   {alert('what');setupEPresentationDetails(this.id);});
    }
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getAllEPsID&sID=" + sID,true);
xmlhttp.send();
}
function setupEPresentationDetails(id){
/*xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var epObject = JSON.parse(xmlhttp.responseText);
        var html = '<h1>Dr. ' + epObject.DATA[0][0] + ' E-Presentation</h1>';
        html += '<p>';
        //html += '<br />' + epObject.DATA[0][2].format("mmmm dd, yyyy");
        html += '<br /><strong>Rating:</strong> ' + Math.ceil(epObject.DATA[0][4]) + ' / 5 (' + epObject.DATA[0][5] + ' votes cast)';
        html += '<br /><br /><a rel="external" href="http://www.youtube.com/v/' + epObject.DATA[0][3] + '">Click here to view E-Presentation</a>';
        html += '</p>';
        $('#ePresentationDetailsData').html(html);
    }
}
xmlhttp.open("GET","Lib/ePresentations.cfm?Type=getEP&id=" + id,true);
xmlhttp.send();*/
$('#ePresentationDetailsData').html('I dont get called?');
 }

What am I doing wrong? Maybe there is a better way to do this?

Thanks!!

Answer 1

What version of JQT are you using? Are you wrapping your entire app in the <div id="jqt"></div> ? Have you looked at it using Safari developer mode to see what the list HREFs actually are when they are rendered?

I would look at the rendered HREF for these:

<li class="arrow"><a id="aS" rel="m,' + localStorage.userID + '" href="#date">Search</a></li>

Make sure the html is what it should be. The rel= or your quotes not being escaped might be throwing it off. But I don't see anything obvious that you are doing wrong.

Do you have a link you can send me so I can debug it in action?