How to use autoInitializePage in JQueryMobile with client-side generated content?

Question

I'm trying to prevent Jquery Mobile initialization until after the page content has been loaded, but I'm not getting the desired result. The project is a simple Question/Answer quiz. In my HTML document I have 3 containers div[data-role=page]:

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#result

My document.ready() parses an external JSON file to load the content to these pages, duplicated #q0 to the number of questions in the quiz. The end result is something like:

div[data-role=page]#pg_title
div[data-role=page]#q0
div[data-role=page]#q1
div[data-role=page]#q2
div[data-role=page]#q3
div[data-role=page]#q4
div[data-role=page]#result

In my document head, I have:

<script>
    $(document).bind("mobileinit", function () {
        $.mobile.autoInitializePage = false;
    });
</script>
<script src="js/quiz.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

http://jquerymobile.com/demos/1.1.0/docs/api/globalconfig.html says to configure settings before Jquery Mobile is loaded, which I had done. At the end of quiz.js I have the call to initialize the page:

$(document).ready(function(){

    // ... all the code to load JSON quiz content is here

    $.mobile.initializePage();
});

My problem is that when I proceed from the title page to the first question page, I see all of the questions rending at the same time. The rendered HTML looks like this:

<div data-role="page" id="q0" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q1" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q2" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q3" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>
<div data-role="page" id="q4" class="pg_type_question ui-page ui-body-c ui-page-active" data-title="Quiz Title" data-url="q0" tabindex="0" style="min-height: 826px; ">...</div>

After document.ready() but before mobile.initializePage is called the HTML renders as:

<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q4" class="pg_type_question" data-title="Quiz Title">...</div>
<div data-role="page" id="q5" class="pg_type_question" data-title="Quiz Title">...</div>

I don't understand why every question page is becoming active with a data-url of "q0".

Thanks in advance for your help!

score 3 · Accepted Answer · answered Jul 11 '12 at 15:23

It's a little hard to say without seeing the full page. Here's an example I put together of what you describe. autoInitializePage is set to false (before jQuery Mobile gets loaded), some elements get added to the DOM after the page is loaded, and then $.mobile.initializePage(); is called once we're done fiddling with the page. jQuery Mobile then initializes it as expected and the navigation links seem to work.

<html> 
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.mobile.autoInitializePage = false;
        });
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('body').append(
                '<div data-role="page" id="q1" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 1</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q2" data-role="button">To Page 2</a></p>' +
                    '</div>' +
                '</div>' +
                '<div data-role="page" id="q2" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 2</h1>' +
                    '</div>' +
                    '<div data-role="content">  ' +
                        '<h2>Content</h2>' +
                        '<p><a href="#q3" data-role="button">To Page 3</a></p>  ' +
                    '</div> ' +
                '</div>' +
                '<div data-role="page" id="q3" class="pg_type_question" data-title="Quiz Title">' +
                    '<div data-role="header">' +
                        '<h1>Page 3</h1>' +
                    '</div>' +
                    '<div data-role="content">' +
                        '<h2>The End</h2>' +
                    '</div>' +
                '</div>'
            );

            $.mobile.initializePage();
        });
    </script>
  </head> 
  <body>
    <div data-role="page" id="title" data-title="Quiz Title">
        <div data-role="header">
            <h1>Title Page</h1>
        </div>
        <div data-role="content">
            <h2>Welcome</h2>
            <p><a href="#q1" data-role="button">To Page 1</a></p>
        </div>
    </div>
  </body>
</html>

While playing around, I did note that the [div data-role="page"] elements really do need to be siblings of one another; check to make sure that you're not accidentally appending them all to the title page or to a parent element other than the body.

If you're calling to an external JSON source, you'll want to make sure that the call to $.mobile.initializePage(); is handled in the completion callback; otherwise, you may end up with a race condition in which $.mobile.initializePage(); is called before the AJAX call to the JSON source is completed.

Hope this helps!

You hit the nail on the head with the JSON completion callback! I needed to put the $mobile.initializePage(); there instead of where I had it - after my getContent() function. //load quiz content from .json file $.getJSON('js/quiz.json', function(data) { getContent(data); $.mobile.initializePage(); }); Thanks Nicholas! — emkmail2, Jul 11 '12 at 15:32
+1 I was searching a way to do this. really nice to get this solution. — BBdev, Sep 06 '13 at 11:06

How to use autoInitializePage in JQueryMobile with client-side generated content?

1 Answers1