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>

  10. <body>

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

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

  17.      $.ajax({
  18.            type: 'GET',
  19.       url: 'get-csv.php',
  20.       data: null,
  21.         success: function(text) {
  22.        
  23.            var fields = text.split(/\n/);
  24.           fields.pop(fields.length-1);

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

  49. });
  50. </script>
  51. <div data-role="content" class="bugs">

  52. </div>

  53. <div data-role="footer">
  54. version 0.5
  55. </div>

  56. </div>



  57. </body>
  58. </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