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