Suspect javascript not loading when opening quiz.html page from index.html

Question

Working: Initially, When quiz is inside index.html, everything works fine. I could access the quiz section by using #quiz, as shown below:

<div data-role="content">   
<ul data-role="listview">
    <li><a href="#quiz">Quiz Page</a></li>
    <li><a href="#page3">Page Three</a></li>
</ul>

Then, I decided to make the quiz as a standalone html page. So, I cut the javascripts from index.html for scoring and question hide-show script, as well as quiz questions and paste it into quiz.html page. In order to access this quiz page, I modify the link in index.html as

<div data-role="content">   
    <ul data-role="listview">
        <li><a href="quiz.html">Quiz Page</a></li>
        <li><a href="#page3">Page Three</a></li>
    </ul>       
</div>

The scoring script is as below (simplified):

<script type="text/javascript"> //scoring script
function getScore(form){
  //score counting algorithm
  score = Math.round(score/AnswersAndObjects.length*100);
  form.percentage.value = score + "%";
}
</script>

And the question hide-show script is as below (simplified):

<script type="text/javascript"> //quiz question hide-show script
        $(document).ready(function () {

            var currentQuestion=0;
            var totalQuestions=$('.questions').length;

            $questions = $('.questions');
            //show the first question
            //when users click on the "Next question button...
            $('#next').click(function(){

                $($questions.get(currentQuestion)).fadeOut(function(){ //hide the current question
                    //go to next question
                    if(currentQuestion == totalQuestions){ //if no more question
                        //do hide and show div class                                    
                    }else{

                        //else display the current question
                    }
                });

            });

         });
</script>

For your information, each question is wrapped as

<div class="questions">Question here</div>

The problem: When I access quiz.html from index.html, nothing is working. Scores could not be calculated and show() hide() are not working. However, if I access quiz.html directly, everything is working fine. I am suspecting that javascript is not loading when quiz.html is accessed from index.html. However, I already included

$(document).ready(function () {

in quiz.html.

May I know how can I make this work?

To understand this situation you need to understand how jQuery Mobile works. It uses ajax to load other pages. First page is loaded normally. Its HEAD and BODY is loaded into the DOM, and they are there to await other content. When second page is loaded, only its BODY content is loaded into the DOM. To find out more and how to fix this problem (with examples) take a look at my other answer: [**Why I have to put all the script to index.html in jquery mobile**](http://stackoverflow.com/a/15806954/1848600). **EDIT :** And one last thing, document ready can be problematic in jQuery Mobile, so thin — Gajotres, May 22 '13 at 11:46
Thank you so much Gajotres! I read your comments and also the easy to follow examples! Now my app works. Still a lot to do more though. Thank you. — Cyberwalk, May 23 '13 at 02:50
Why dont you post your Comment as Answer, so that the question can be marked as answered/approved. Greetz jw — winner_joiner, May 23 '13 at 06:34

score 1 · Answer 1 · answered May 23 '13 at 07:00

By following Gajotres 's example, I was able to make my quiz app works. The skeleton looks like this:

<body>
<div data-role="page">
    <div data-role="header">
        <h1>Quiz</h1>
    </div>
    <div data-role="content">

<div class = "heading1">
<p> Answer the quiz</p>
</div>

<form name="quiz" method="">

<div data-role="fieldcontain" class="questions">
<fieldset data-role="controlgroup" data-mini="true">
<legend>Question 1 bla bla bla</legend>


<input type="radio" name="question1" id="choice1" value="1"/>
<label for="choice1">True</label>

<input type="radio" name="question1" id="choice2" value="2"/>
<label for="choice2">False</label> 

</fieldset>
</div>



  //other n questions follow

<div>
<script>

            var currentQuestion=0;
            var totalQuestions=$('.questions').length;

            //hide and show elements statements here

var AnswersAndObjects = new Array(); 
function getScore(form){
//score counting algorithm here.
</script>
</div>

In essential, I moved both the scripts into the body of quiz.html within a <div>. And it works. However, I did notice that the script has to be placed after the </form>, right before the in order for the script to work. I am not sure why but it works this way. Also, I removed $(document).ready(function () {} and it works too.

Suspect javascript not loading when opening quiz.html page from index.html

1 Answers1