Dynamically Adding Rows to Reflow Table Results in Unformatted New Rows

[ALSpringer]

Dynamically adding rows to a reflow table results in these new rows not having the correct headers when the size of the screen is small and forces it to reflow.

Test Page here: http://jsbin.com/onibuc/100/
Notice that the row created in HTML is formatted properly when the window is small but the dynamically added rows are not.
Forum Discussion here: https://forum.jquery.com/topic/dynamically-adding-rows-to-reflow-table

Expected behavior should be a method like a table("refresh") that would force the table to redraw with correct formatting. Similar to how list has a listview("refresh")

On actual project we are using jqm1.3.0-beta-1 and jquery-1.8.2
In example on JSBin we are using the latest versions. Error still occurs.

Tested on iOS 4.2, most recent firefox and chromium releases and Ripple in Chromium.

[jaspermdegroot]

@ALSpringer

You are right. We have to add a refresh and destroy method to the table widget.

When you append content to the table on "pageinit" you can remove ```data-role="table" from the markup and call the plugin to make it work: http://jsbin.com/onibuc/109 (http://jsbin.com/onibuc/109/edit)

Or you can append the table content before initialization: http://jsbin.com/onibuc/111 (http://jsbin.com/onibuc/111/edit)

Appending after page initialization is not possible at the moment. We will add a refresh method in 1.3.1 to fix this.

[dlplenin]

hi, I used the second option
Or you can append the table content before initialization: http://jsbin.com/onibuc/111 (http://jsbin.com/onibuc/111/edit)

and it Works but, in my real project i need fill the table with data from a rest/json WService

$.ajax({
    type: 'GET',
    url: "http://localhost/ServicioREST1/Servicio.svc/1",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    success: function (data) {

Any idea?

PD: data-mode="columntoggle"

Thanks.

[FernandoFigueroa]

How can i test if the issue was resolved with the #5570 Fix? i got the same error and i'd like to use the table for my needs. where can i download the jquery with the new refresh method?

[jaspermdegroot]

@FernandoFigueroa

The issue hasn't been resolved yet. @frequent created a Pull Request with a fix but this hasn't been merged in the framework yet. We have to review the fix first.

[razzetto]

@dlplenin : same problem here (filling the table with a json call), so i'm trying to investigate on another strange behaviour : the block of data is appended to the table two times (in "plain" jquery this is not happening) .. is it that happening to you too? thanks

[dlplenin]

@razzetto... no, that isn't happen in my app... the thing is due to de async population of the table the solution don't apply. We need to wait for the next reléase.

sorry for my late, i was having problems with my email account

[gclsoft]

I have the same problem using 1.3.0 jQuery mobile release:"Uncaught Error: no such method 'refresh' for table widget instance "
But the doc says it can be used:
Updates the labels in the cells.
$( myTable ).table( "refresh" );
How to solve the problem?

[toddparker]

We will be adding refresh methods to both table plugins for 1.3.1 so closing this since it will be addressed by that change. See #5841 and #5842.

[RicardoSouzaMoura]

Hello,
the version 1.3.1 from jqm was released but the problem wasn`t solved. Is there another target version to have it fixed ?
Regards

[jaspermdegroot]

@RicardoSouzaMoura

We did add a refresh method in 1.3.1. See the demos:
http://view.jquerymobile.com/1.3.1/dist/demos/examples/tables/columntoggle-refresh.html
http://view.jquerymobile.com/1.3.1/dist/demos/examples/tables/reflow-refresh.html

[RicardoSouzaMoura]

Ohhhh !!!
thanks. I didn`t see any reference in the demos directly. It is just in the examples. I will try to use that.
Regards

[razzetto]

just working now for me (by the way.. it may seem obvious but refresh must be called inside the success callback function, if you're using ajax).

[ferminhg]

I test demo:
http://view.jquerymobile.com/1.3.1/dist/demos/examples/tables/columntoggle-refresh.html

And when i resize browser for more size, didn't refresh table and add columns, if i make F5 i see columns.

I test to make $("table").table("refresh") and others refresh methods of element's, but i can't make appear columns with new size.

thx.