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>');

Saliva

For what it's worth, I tried your example in Chrome and got styles right away. Perhaps there is an issue with the mobile device? – Sharice

Answer 1

I would suggest you use .trigger('create'); and refresh the page, jQM Docs:

• http://jquerymobile.com/demos/1.0.1/docs/pages/page-scripting.html

Enhancing new markup
The page plugin dispatches a pagecreate event, which most widgets use to auto-initialize themselves. As long as a widget plugin script is referenced, it will automatically enhance any instances of the widgets it finds on the page.

However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).

For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:

$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

Stillas

Answer 2

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

Tellus

good point of adding data-role="table" at a later stage. Problem still is, how to refresh, when for example paging through rows. – Sisneros