jQTouch Динамическое веб-приложение?

Question

Я работаю над динамически меняющимся веб-приложением. Я использую javascript и jQuery для заполнения DIV с помощью <li> и <a>. Например, я начинаю с одного меню, динамически созданного с помощью javascript. В этом меню, в зависимости от выбранного элемента, вызывается другая функция javascript для динамического заполнения соответствующего DIV. Проблема, возникающая при динамическом создании подменю и JQTouch, не переключается на следующую страницу.

В следующем коде alert('what') отображается на iPhone, но не переключается на ePresentationDetails DIV. Я пытался заставить его с jQT.goTo(); но это обычно вызывает больше проблем и не устраняет проблему.

Основной код HTML:

 <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 Файл:

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

Что я делаю неправильно? Может быть, есть лучший способ сделать это?

Спасибо!

Answer 1

Какую версию JQT вы используете? Вы обертываете все свое приложение в <div id="jqt"></div>? Вы посмотрели на него, используя режим разработчика Safari, чтобы узнать, какие списки HREF на самом деле есть, когда они отображаются?

Я хотел бы посмотреть на оказанной HREF для них:

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

Убедитесь, что HTML является то, что оно должно быть. Rel = или ваши кавычки, которые не ускользают, могут отбросить его. Но я не вижу ничего очевидного, что вы поступаете неправильно.

У вас есть ссылка, которую вы можете отправить мне, чтобы я мог ее отладить в действии?