jQuery Mobile Table Widget display issue after ajax update

[RElliott]

I use the jQuery Mobile table widget in my PrimeFaces Mobile application because the jQM table widget is more flexible than the PFM PanelGrid. This has been working well and allows me to control the displayed columns and relative sizes of the columns. However, I ran into a problem when I added a jQM table to a PFM accordionPanel where the table did not display correctly after the form was updated as apart of an ajax update. The following is the HTML for the table that I coded in my xhtml page:

Code: Select all

<table
    id="person-contact-telephone"
    class="my-table ui-responsive"
    data-role="table"
    data-mode="columntoggle">

The following is HTML for the table that results on the web page.

Code: Select all

<table 
    id="person-contact-telephone" 
    class="my-table ui-responsive ui-table ui-table-columntoggle" 
    data-role="table" 
    data-mode="columntoggle" 
    style="width: 100%">

Note that jQM or PFM added classes and a style attribute to my table.

At this point my table looks great and I proceed by entering some data into my form and selecting the following button which adds a row to my table.

Code: Select all

<p:commandButton
    value="Add Telephone"
    action="#{personCreater.addTelephone}"
    update="@form" />

On the updated page, my table shows the correct information but does not look good. The updated HTML for the table is as follows:

Code: Select all

<table
    id="person-contact-telephone"
    class="my-table ui-responsive"
    data-role="table"
    data-mode="columntoggle">

As you can see, the updated table is identical to the table that I coded and does not include the extra classes or the style attribute. Why is PFM adding the attributes in the original page and not the ajax updated page?

I resolved the issue by hard coding the classes and style into my table.

[smithh032772]

i have recognized this behavior, too, so i do p:commandButton/Link ajax=false or h:commandLink almost always, and i'm loving PrimeFaces Mobile because of non-ajax requests (or full page refresh).

[RElliott]

I was able to easily work around this issue for the jQuery Mobile columntoggle table widget by adding the missing classes and the style attribute as described in my original post. Unfortunately, I also encounter this issue with the jQuery Mobile reflow table widget where after the ajax update the pages did not contain the labels for in my reflow table cells.

Before ajax

Code: Select all

<td>
    <b class="ui-table-cell-label">Type</b>
    "HOME"
</td>

After ajax

Code: Select all

<td>
    "HOME"
</td>

Thanks to smithh032772, I resolved this issue by adding "ajax="false"" to my command button.

[smithh032772]

Thanks to smithh032772, I resolved this issue by adding "ajax="false"" to my command button.

good job and you're welcome.

[kukeltje]

Using ajax=false is a workaround in my opinion and not a solution... It should work with ajax to

[RElliott]

I duplicated these issues in PrimeFaces 5.1. I also created issue 7525 in the community tracker for this issue.

[smithh032772]

I also created issue 7525 in the community tracker for this issue.

thanks

[cagatay.civici]

This is a general problem with ajax and jquery mobile because jqm creates the widgets on load which also needs to happen after ajax updates. Our primefaces mobile widgets do it under the hood, since there is no datatable for now, it is not supported.

Solution is to do it manually after ajax update at onsucces event;

Code: Select all

onsuccess="$(#tableid).table();"

More info at;

http://api.jquerymobile.com/table/

[cagatay.civici]

PFM also now has a DataTable;

http://blog.primefaces.org/?p=3326