Dynamically Injecting Pages with JQuery Mobile and Json - json

Question

and thanks for looking at my question. I am new to HTML, JQuery, and JSon. I am trying to teach myself with some online tutorials and www.lynda.com training. I'm trying to make a glossary that dynamically displays a list of terms on page, and when clicked displays the term in the header and the definition below that. After searching and experimentation I've made progress, I've got my ul populating from the JSon object and linked to the display page. But I am at a loss as how to get the display page working. I thought the answer was in here: http://jquerymobile.com/demos/1.1.1/docs/pages/page-dynamic.html but I can't seem to pull it off, even in Dreamweaver.
Here is the JSFiddle: http://jsfiddle.net/LParker/PSntK/3/
HTML:
<!-- Glossary -->
<div data-role="page" id="glossary">
<div data-role="header">
<h3>
Glossary
</h3>
</div>
<ul data-role='listview' data-inset='true' id='resultsList'>
<!-- keep empty for dynamically added items -->
</ul>
</div>
<!-- display -->
<div data-role="page" id="display">
<div data-role="header">
<h3>
Name Goes Here
</h3>
</div>
<div data-role="content">
<div>Definition goes here</div>
</div>
JavaScript:
var jsonObject = {
"results": [{
"term": "Term One",
"definition": "This is the definition for Term Two",
},
{
"term": "Term Two",
"definition": "This is the definition of Term Two",
}, {
"term": "Term Three",
"definition": "This is the definition for Term Three",
}],
"ok": "true"
}
var resultLength = jsonObject.results.length;
var listItems = [];
for (var i = 0; i < resultLength; i++) {
var term = jsonObject.results[i].term;
//Add result to array
listItems.push("<li><a href='#display'>" + term + " </a></li>");
}
//Append array to list and refresh
$('#resultsList').append(listItems.join(' '));
$('#resultsList').listview('refresh');
Any help would be appreciated!

Answer 1

First of all lets get a few things out of the way:
Ditch extra commas after each definition member of your json object.
Put your #resultsList listview in a <div data-role="content"></div> container.
Provide the means to navigate from #display page back to #glossary page e.g. by adding a standard jQM back button <a data-role="button" data-rel="back" data-icon="back">Back</a> in the header of the #display page.
While working with jQM you need to use proper event handlers
For brevity I renamed your variable jsonObject to json.
You can populate the listview in a more succinct way:
$.each(json.results, function(i, term){
$('#resultsList').append('<li>' + term.term + '</li>')
});
$('#resultsList').listview('refresh');
Now in that particular case IMHO you don't need to inject pages (although it certainly possible) you can just change content in #display page on pagebeforeshow event.
For that to happen, since your json object globally available, you can just get an index of a clicked list item, pass it to your #display page, use it to access results array of your json object to extract and show term and it's definition.
The simplest way to pass an index is to use a global variable which you set in a click event handler.
var currentItem = 0;
...
$('#resultsList li').click(function(){
currentItem = $(this).index();
});
Now in pagebeforeshow event you do
$('#display').on('pagebeforeshow', function(){
$(this).find('[data-role=header] .ui-title').text(json.results[currentItem].term);
$('#definition').html(json.results[currentItem].definition);
});
Finally here is working jsFiddle for you.