Loading Separate Pages With Animation in JQTouch

Question

I'm trying to convert a database-driven multiple-choice-style study website (written in JSP) into an iPhone app using JQTouch.

If I load all of the Q&As into their own divs in the same file I can easily link and animate between them using links to hashtags, like: a class="button" href="#question22"

Unfortunately this isn't practical. The logic of the website as it currently works requires calls to a number of dynamically generated pages; I can't include every question in its own div in the same flat file.

How would I go about dynamically (pre)loading the next question (a JSP page like AskQuestion.jsp?questionId=Kzhctand ) then serving that up within the app after the user presses a button?

Thanks for any help you might offer.

-Donovan

Answer 1

I do something similar to this for my flashcard system. I have a div for the "front" and the "back" of the current card, when the user gives their answer it loads the next card via the magic of ajax, json, and php.

Here is the relevant section of the answer page.

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

This is the function that handles the users response by sending an ajax query.

    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" ));
       },
     });
}

On the backend I have a PHP page called ajax.php generate the next card as JSON.