Databases
StackOverflow2013
Postsdbo
POJQuery Mobile - Dynamic page injection not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Mobile - Dynamic page injection not working
    text
    copied!<p>I am trying to learn Jquery mobile and it seems to have some issues. Based on <a href="http://jquerymobile.com/demos/1.2.1/docs/pages/page-dynamic.html" rel="nofollow">this</a> I am trying to expand the example and do more things. So I have two lists and each list has some items. By clicking on an item I want to inject another html file (exercise.html) to show it but the injection doesn't work. Below is my code.</p> <p><strong>exercises.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; </code></pre> <p></p> <pre><code>&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Sample&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"&gt;&lt;/script&gt; &lt;script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"&gt;&lt;/script&gt; &lt;script src="categoryData.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" id="exercises-page" class="type-interior"&gt; &lt;script src="categoryData.js"&gt;&lt;/script&gt; &lt;div data-role="header" data-position="fixed" data-id="appHeader"&gt; &lt;h1&gt;Lists&lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content" &gt; &lt;h4&gt;Choose an item&lt;/h4&gt; &lt;ul id="item_category" data-role="listview" data-inset="true"&gt;&lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; </code></pre> <p></p> <p><strong>categoryData.js</strong></p> <pre><code>(function($) { var categoryData = { list1 : { name : "List1", items : [{ name : "l1_item1", level : "level1" }, { name : "l1_item2", level : "level1" }, { name : "l1_item3", level : "level2" }, { name : "l1_item4", level : "level2" }] }, list2 : { name : "List2", items : [{ name : "l2_item1", level : "level1" }, { name : "l2_item2", level : "level1" }, { name : "l2_item3", level : "level2" }] } }; $(document).ready(function() { var exercise_category = $('#item_category'); var iHtml = ''; for (var x in categoryData) { category = categoryData[x]; iHtml += '&lt;li&gt;' + category.name + '&lt;ul data-inset="true"&gt;'; iHtml += '&lt;h4 data-role="content" &gt;Choose an item&lt;/h4&gt;'; // The array of items for this category. cItems = category.items; // The number of items in the category. numItems = cItems.length; for (var i = 0; i &lt; numItems; i++) { iHtml += '&lt;li&gt;&lt;a href=exercise.html#item-page?title=' + cItems[i].name + '&gt;' + cItems[i].name + '&lt;/a&gt;&lt;/li&gt;'; } iHtml += '&lt;/ul&gt;'; }; iHtml += '&lt;/ul&gt;&lt;/li&gt;'; exercise_category.html(iHtml).listview('refresh'); }); // Listen for any attempts to call changePage(). $(document).bind("pagebeforechange", function(e, data) { console.log('BEFORECHANGE'); // We only want to handle changePage() calls where the caller is asking us to load a page by URL. if ( typeof data.toPage === "string" ) { var u = $.mobile.path.parseUrl( data.toPage ); var re = /^#item-page/; if (u.hash.search(re) !== -1) { showExercise(u, data.options); e.preventDefault(); } } }); function showExercise(urlObj, options) { var categoryName = urlObj.hash.replace( /.*title=/, "" ); var catna = $.trim(categoryName.replace('_', ' ')); var category = categoryData[ categoryName ], pageSelector = urlObj.hash.replace( /\?.*$/, "" ); if (catna) { var $page = $( pageSelector ), // Get the header for the page. $header = $page.children( ":jqmData(role=header)" ), // Get the content area element for the page. $content = $page.children( ":jqmData(role=content)" ); $header.find( "h1" ).html( "pass something to change the Title" ); $page.page(); options.dataUrl = urlObj.href; $.mobile.changePage( $page, options ); } } </code></pre> <p>})(jQuery);</p> <p><strong>exercise.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; </code></pre> <p></p> <pre><code>&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Sample&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" /&gt; &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;script src="http://jquerymobile.com/demos/1.2.1/docs/_assets/js/jqm-docs.js"&gt;&lt;/script&gt; &lt;script src="http://jquerymobile.com/demos/1.2.1/js/jquery.mobile-1.2.1.js"&gt;&lt;/script&gt; &lt;script src="categoryData.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div data-role="page" class="type-interior" id="item-page" style="text-align: center;"&gt; &lt;script src="categoryData.js"&gt;&lt;/script&gt; &lt;div data-role="header" data-position="fixed" data-id="exerciseHeader"&gt; &lt;h1&gt;Title&lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content"&gt; &lt;h2&gt;Image&lt;/h2&gt; &lt;div class="article"&gt; &lt;p&gt;&lt;img src="" alt="..."&gt; &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /page --&gt; &lt;/body&gt; </code></pre> <p></p> <p>I want to pass content to the of the header of the exercise.html and in the . Any idea why it doesn't work? It always shows the title that I have defined in the html. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload