Column toggle popup not showing correctly the first time

Column toggle popup not showing correctly the first time

Hi, I'm working in a jquery mobile site, where I have an ajax method that creates a table dinamically and then I use html() to add it to a div, a button renders the table each time, from 10 to 10 records, the very first time that the table is generated, the column toggle popup looks weird, right after I access #page1 but the following times, it shows correctly, when using the button, this is pretty much the code:

  2. function populateGrid()
  3. {
  4. var data1 = "<table data-role='table' data-mode='columntoggle' class='ui-responsive table-stroke' id='table1' data-column-btn-theme='b'>";
  5. data1 += "<thead>";
  6. data1 += "<tr>";
  7. data1 += "<th data-priority='1'>header1</th>";
  8. data1 += "<th data-priority='1'>header2</th>";
  9. data1 += "<th data-priority='2'>header3</th>";
  10. data1 += "</tr>";
  11. data1 += "</thead>";
  12. data1 += "<tbody id='myBody'>";            
  14. $.ajax({
  15. type: "POST",
  16. contentType: "application/json",
  17. url: "http://url/service.svc/method1",
  18. data: JSON.stringify({ clientType: 'IS', from: fromValue, to: toValue}),
  19. dataType: "json",
  20. success: function (data){
  21. $($.parseJSON(data.d)).each(function(index, element) {
  23. data1 += "<tr><td><a href='#' class='linkTest'>" + element.field1 + "</a></td><td>" + element.field2 + "</td><td>" + element.field3 + "</td></tr>";
  24.                         });
  26. data1 += "</tbody>";
  27. data1 += "</table>";
  29. $("#table1-popup").remove();
  30. $("#tableDiv").html(data1).enhanceWithin();
  31. },
  32. error: function(result){
  33. alert(result.status + ' ' + result.StatusText);
  34. }
  35. });
  36. }

This works ok, but the result the first time is:



I would appreciate your help, thanks!