I am pleading for any help on the following issue I have as I have not seen anything else on the web like it!
I am building an app with seperate pages, no multipage pages, and I am loading items dynamically into a fieldset and into a listview using 2 JSON formatted strings. The JSON data is 100% correct and the syntax is perfect as I have tested it on numerous validation websites. The 2 JSON strings are around 100kb each.
What happens is I click a link on the first page which then laods the 2nd page, which should load the dynamic data from the JSON strings, but when you look at the page nothing is loaded. If I refresh the page using the browser refresh button, the data shows.
[code]
<script>
$.mobile.orientationChangeEnabled = false;
$("#DrugClassesList").empty();
$("#DrugsCBList").empty();
$("#DrugClassNext").hide();
//populate drug classes list
$.each(jQuery.parseJSON(jsonDrugClasses), function(i,v){
$("#DrugClassesList").append("<li><a href='drugclass.html' rel='" + v["ClassID"] + "' title='"+v["ClassName"]+"' data-transition='slide'>" + v["ClassName"] + "</a></li>");
});
$("#DrugClassesList").trigger("create");
$("#DrugClassesList").listview("refresh"); /* required to apply styling */
//checkbox list dynamicly generated
DrugsSorted = $(jQuery.parseJSON(jsonDrugs)).sort(sortDrugName);
$("#DrugsCBList").append('<fieldset data-role="controlgroup" data-theme="e" id="cbFieldSet">');
$.each(DrugsSorted, function(k,v){
$("#cbFieldSet").append('<input type="checkbox" name="'+v["DrugID"]+'" id="'+v["DrugID"]+'" value="'+v["DrugID"]+'"/><label for="'+v["DrugID"]+'" data-iconpos="right"><span class="trafficlight red"></span>'+v["DrugName"]+'</label>');
}
});
$("#DrugsCBList").append('</fieldset>');
$("#DrugsCBList").trigger("create");
</script>
<body>
<div data-role="page" id="StartPage">
<div data-role="header" data-theme="b" data-position="fixed">
<div style="padding:12px; text-align:center;"><h1>title</h1></div>
</div>
<div data-role="content" style="padding-bottom:60px;">
<div id="advice"><p></p></div>
<!-- Collapseable menus -->
<div data-role="collapsible-set" data-theme="c" data-content-theme="e" data-split-icon="arrow-r" data-iconpos="right">
<div data-role="collapsible" data-collapsed="false">
<h3>Drug Classes</h3>
<p style="padding:0px; margin:0px;">
<div data-role="fieldcontain">
<ul data-role="listview" data-inset="true" data-theme="e" id="DrugClassesList">
<!-- Data loaded dynamically -->
</ul>
</div>
</p>
</div>
<div data-role="collapsible">
<h3>Drugs</h3>
<p style="padding:0px; margin:0px;">
<!-- next button -->
<a href="drug.html" data-role="button" data-icon="arrow-r" data-iconpos="right" id="DrugClassNext" data-theme="c" data-transition="slide">Next</a>
<div data-role="fieldcontain">
<div id="DrugsCBList"></div>
</div>
</p>
</div>
</div>
</div>
[/code]
(You'll see what I am talking about when you click the link at the top of the page)
Why does the JSON data load on the 1st page but not on the 2nd??? How do I fix this???
Many thanks
Simon