Загрузка отдельных страниц с анимацией в JQTouch

Question

Я пытаюсь преобразовать основанный на базе данных веб-сайт исследования с несколькими вариантами выбора (написанный на JSP) в приложение iPhone с помощью JQTouch.

Если я загружаю все Q & Как в свои дивы в том же файле можно легко связать и анимировать между ними с помощью ссылки на хэштегов, как: класс = «Кнопка» HREF = «# question22»

К сожалению, это не практично. Логика веб-сайта, которая в настоящее время работает, требует вызовов на несколько динамически сгенерированных страниц; Я не могу включить каждый вопрос в свой собственный div в том же плоском файле.

Как я буду динамически загружать следующий вопрос (например, JSP-страница, например AskQuestion.jsp? QuestionId = Kzhctand), а затем обслуживать ее в приложении после нажатия пользователем кнопки?

Спасибо за любую помощь, которую вы могли бы предложить.

-Donovan

Answer 1

я сделать что-то похожее на это для моей системы Карточек. У меня есть div для «front» и «back» текущей карты, когда пользователь дает свой ответ, он загружает следующую карту с помощью магии ajax, json и php.

Вот соответствующий раздел страницы ответов.

<h2>Answer:</h2> 
<div class="qna"> 
    <p id="question2" class="qna">SomethingsNotWorking.</p> 
    <p id="answer2" class="qna">SomethingsNotWorking.</p> 
</div> 
<h2>Did you know it?</h2> 
<a >Submit</a> 
<BR><a href="#" onClick="javascript:sendCardInfo('Yes')" name="knewIt">Yes</a> 
<BR><a href="#" onClick="javascript:sendCardInfo('No')" name="knewIt">No</a> 

Это функция, которая обрабатывает ответ пользователя, отправив запрос ajax.

function sendCardInfo(str){ 
    //alert("sendCardInfo " + str); 
    $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: "currentCard="+$(document).data('currentCard')+"&currentDeck="+$(document).data('currentDeck')+"&knewIt="+str, 
     dataType: "json", 
     success: function(data){ 
      jQT.goTo('#home', 'swap'); 
      // store the json response in the data object so it can be retrieved later. 
      $(document).data("currentCard" , data.currentCard); 
      $(document).data("currentDeck" , data.currentDeck); 
      $(document).data("question" , data.question); 
      $(document).data("answer" , data.answer); 

      // update the q and a divs with the current questions. 
      $('#question1').html($(document).data("question")); 
      $('#question2').html($(document).data("question")); 
      $('#answer2').html($(document).data("answer")); 
     }, 
    }); 
} 

На бэкэнд у меня есть страница PHP, называемая ajax.php, сгенерированная следующая карта как JSON.