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.