How to refresh JQuery mobile table after a row is added dynamically

Question

I am adding rows to a JQ Mobile table based on a JSON string that I am getting from the server.

The first time I go to the page after a refresh, none of the styling is added, however everything works fine everytime after that.

Is there a way to refresh/initialize a table as you can for listviews?

The code below is where I am adding the rows:

$.each(result, function() {
    var imgString;

    if(result[i]["status"] == 'Y') {
        imgString = '<img src= images/checkMark.png height=\"40\" width=\"40\" align=\"middle\">';
    } else {
        imgString = '';
    }

    $('#pickupTable > tbody:last').append('<tr><td class=\"tableRow10\">' +  imgString + 
      '<td class=\"tableRow80\"><a><button class=\"selectPickup\" pickupCode = \"'+ 
      result[i]["id"] + '\"> '+ result[i]["address"] +'</button></a></td></tr>');
    i++;
});

$('#pickupTable > tfoot:last').append('<tr><td colspan="5">Total Pick Ups: ' 
  +result.length + '</td></tr>');

Answer 1

You should be able to just use: $("#myTable").table("refresh");

But it hasn't been implemented for version 1.3.0 of jquery mobile.

See https://github.com/jquery/jquery-mobile/issues/5570

Sounds like you have to either add the rows before the page is initialized, or don't set the table's attribute data-role="table" until after the rows have been added. $("#myTable").table();

In the implementation I am working on, I allow users to add rows. Luckily for me the site is designed to be viewed with larger mobile devices so I can wait for 1.3.1