AppendTo and "refresh" advice

AppendTo and "refresh" advice

Hi

I am reading a csv file with php / ajax and creating a list from the file. That works fine.

I am then using: AppendTo  to push the html I've built into the <content>

At this point it breaks, as I now know due to the order in which JQM builds the page

Is there some form of "refresh" I need to do to make JQM "see" the html and respond accordingly?



Initally I thought I needed a  $('#buglist').listview('refresh'); << but

a) I am not sure where to put it
b) There is also a collapsed list being built dynamically.

My code is:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Bacterium Antibiograms reading csv</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
  7. <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  8. <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  9. </head>

  11. <body>

  13. <div data-role="page">

  15. <div data-role="header">
  16. <h1>Bacterium Antiobiograms</h1>
  17. </div>
  19. <script type="text/javascript">
  21. $(document).ready(function() {

  23.      $.ajax({
  24.            type: 'GET',
  25.       url: 'get-csv.php',
  26.       data: null,
  27.         success: function(text) {
  28.        
  29.            var fields = text.split(/\n/);
  30.           fields.pop(fields.length-1);

  32.            var headers = fields[0].split(','), markup = '';
  34.           var data = fields.slice(1, fields.length);
  35.            
  36.            for(var j = 0; j < data.length-2; j += 1) {
  37.            
  38.              var dataFields = data[j].split(',');
  39.         
  40. markup +='<div data-role="collapsible" data-theme="b" data-content-theme="c">';
  41.     
  42.         markup +='<h2>' + dataFields[1] + '</h2>';
  43.         markup +='<id = "buglist" ul data-role="listview">';
  44.         markup +='<li>' + headers[2] +"........"  + dataFields[2] + '</li>';
  45.         markup +='<li>' + headers[3] +"........"  + dataFields[3] + '</li>';
  46.         markup +='<li>' + headers[4] +"........"  + dataFields[4] + '</li>';
  47.         markup +='<li>' + headers[5] +"........"  + dataFields[5] + '</li>';
  48.          markup +='</ul>';
  49.        
  50.       markup +='</div>';
  51.       
  52.         }
  54. $('.bugs').append(markup);
  56.        }
  57.              
  58.     });

  60. });
  62. </script>
  65. <div data-role="content" class="bugs">

  67. </div>

  70. <div data-role="footer">
  71. version 0.5
  72. </div>

  74. </div>



  78. </body>
  79. </html>


This must be easier than I am making it...... 

Any advice on refreshing the <content> greatly received.


I have read the documentation on dynamic pages and I cant adapt the example to my case -- must be getting old.




Cheers
Glen