Question

I have the code below loading into a jquery mobile page data-role. Two strange things I am noticing is if I try to just load that one page in it does not load the css or jquery mobile functionality just for the items loading from the script. The other thing is that on a page refresh it loses it also. The data still shows fine as plain text. Has anyone else experiences this? I have also tried the pagecreate function instead of document ready but it doesn’t work at all. Can anyone see why it would do this in mobile or suggest something?

Thanks in advance!

<script>
   $(document).ready(function(){

                      $.ajax({
                             type: "GET",
                             url: "oncology_testlist.xml",
                             dataType: "xml",
                             success: function(xml) {
                             var $ul = $("#testList");
                             var categories = new Object();
                             var category;
                             $(xml).find('test').each(function(){
                                                      category = $('category', this).text();
                                                      cat_nospaces = category.replace(/ /g,'');
                                                      if (!$('#cat_'+cat_nospaces).length) {
                                                      $ul.append('<div data-role="header" data-theme="a" id="cat_'+cat_nospaces+'"><h1>' + category + '</h1></div>');
                                                      }
                                                      $ul.append('<li><div data-role="collapsible" data-collapsed="true" data-theme="b">'
                                                                                     + '<h3>' + $('test_code', this).text() + " - " + $('name', this).text() + '</h3>'
                                                                                     + (!$.trim($('cpt_code', this).text())?'':'<p>' + "CPT Code(s): " + $('cpt_code', this).text() + '</p>')
                                                                                     + (!$.trim($('method', this).text())?'':'<p>' + "Method: " + $('method', this).text() + '</p>')
                                                                                     + (!$.trim($('clinical_utility', this).text())?'':'<p>' + "Clinical Utility: " + $('clinical_utility', this).text() + '</p>')
                                                                                     + '</div></li>');

                                                      });
                             }
                             }); 
                      });
    </script>    

Answer 1

Fixed it after searching…

Added $(‘#testcatalog’).trigger(‘create’); at end of code.