Application jQTouch Dynamic Web?

Question

Je travaille sur une application web qui change dynamiquement. J'utilise javascript et jQuery pour peupler DIV avec <li> et <a>. Par exemple, je commence par un menu construit dynamiquement avec javascript. À partir de ce menu, en fonction de l'élément sélectionné, une autre fonction javascript est appelée pour remplir dynamiquement le DIV correspondant. Le problème qui survient lorsque je garde dynamiquement la construction des sous-menus et JQTouch ne passe pas à la page suivante.

Dans le code suivant, le alert('what') s'affiche sur un iPhone mais ne passe jamais à la DIV ePresentationDetails. J'ai essayé de le forcer avec jQT.goTo(); mais cela cause généralement plus de problèmes et ne résout pas le problème.

code html de base:

 <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> 

fichier Javascript:

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

Qu'est-ce que je fais mal? Peut-être qu'il y a une meilleure façon de faire cela?

Merci!

Answer 1

Quelle version de JQT utilisez-vous? Enveloppez-vous l'intégralité de votre application dans le <div id="jqt"></div>? L'avez-vous regardé en utilisant le mode développeur de Safari pour voir ce que sont réellement les HREF de liste quand ils sont rendus?

Je regardais le HREF rendu pour ces:

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

Assurez-vous que le code HTML est ce qu'elle devrait être. Le rel = ou vos citations ne sont pas échappées pourrait être le jeter. Mais je ne vois rien d'évident que vous vous trompiez.

Avez-vous un lien que vous pouvez m'envoyer afin que je puisse le déboguer en action?