Dynamically Adding Rows to Reflow Table Results in Unformatted New Rows #5570

Closed
ALSpringer opened this Issue Feb 1, 2013 · 13 comments

Projects

None yet

9 participants

@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.
dynamic rows reflow table

@jaspermdegroot
Member

@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
dlplenin commented Mar 6, 2013

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.

@tbosch tbosch referenced this issue in opitzconsulting/jquery-mobile-angular-adapter Mar 16, 2013
Closed

table widget: add refresh support #142

@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
Member

@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

@tbosch tbosch referenced this issue in opitzconsulting/jquery-mobile-angular-adapter Mar 27, 2013
Closed

toggle table: problems with the header #148

@gclsoft
gclsoft commented Apr 2, 2013

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.

@toddparker toddparker closed this Apr 2, 2013
@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

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment