Button inside a table row.

[tony.herstell]

Sorry the bug is a button not being able to update a table when it inside the table...
Using 3.0.M4.

[kukeltje]

Or use a context menu...

[kukeltje]

And for me having a delete, view, whatever action in each row is going back 15 years

[tony.herstell]

The good thing about usability is no one ever agrees

But seriously; is this a known bug...

http://stackoverflow.com/questions/6308 ... dbutton-or
EDIT: I just want to point out that you may run into an issue with an ajax refresh of a <p:dataTable> from a component within that dataTable. This bug existed as of Primefaces 2.2.1 however it may be fixed in 3.0.

[tony.herstell]

Button inside a table row.
Sorry the bug is a button not being able to update a table when it inside the table...
Using 3.0.M4.

[kukeltje]

The good thing about usability is no one ever agrees

+like

[porthos]

Don't know about buttons, but I certainly use commandLinks inside table rows (mostly to do trashcan icons for deleting rows by ajax update). They seem to work just fine with 3.0M4. So I see no reason why commandButton should behave any differently. Post your code?

[tony.herstell]

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
   xmlns:p="http://primefaces.org/ui" template="/WEB-INF/templates/default.xhtml">

   <ui:define name="content">

      <center>
         <table>
            <tr>
               <td><h:form id="usersForm">
                     <p:dataTable id="usersTable" value="#{users}" var="eachUser" paginator="true" paginatorAlwaysVisible="false" emptyMessage="No Users..."
                        paginatorPosition="bottom" rows="5">

                        <f:facet name="header">
					       <h:outputFormat value="#{messages.users_list_of_eventis} #{messages.users}" escape="false"/>
				        </f:facet>

                        <p:column headerText="#{messages.user_id}" sortBy="#{eachUser.id}" filterBy="#{eachUser.id}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.id}" />
                        </p:column>

                        <p:column headerText="#{messages.user_first_name}" sortBy="#{eachUser.firstName}" filterBy="#{eachUser.firstName}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.firstName}" />
                        </p:column>

                        <p:column headerText="#{messages.user_last_name}" sortBy="#{eachUser.lastName}" filterBy="#{eachUser.lastName}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.lastName}" />
                        </p:column>

                        <p:column headerText="#{messages.user_email}" sortBy="#{eachUser.email}" filterBy="#{eachUser.email}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.email}" />
                        </p:column>

                        <p:column headerText="#{messages.user_phone}" sortBy="#{eachUser.phoneNumber}" filterBy="#{eachUser.phoneNumber}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.phoneNumber}" />
                        </p:column>

                        <p:column headerText="#{messages.user_mobile_phone}" sortBy="#{eachUser.mobileNumber}" filterBy="#{eachUser.mobileNumber}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.mobileNumber}" />
                        </p:column>

                        <p:column headerText="#{messages.user_last_login}" sortBy="#{eachUser.lastLogin}" filterBy="#{eachUser.lastLogin}" filterMatchMode="contains">
                           <h:outputText value="#{eachUser.lastLogin}" />
                        </p:column>

                        <p:column headerText="#{messages.button_action}">
                           <p:commandButton update=":usersForm:usersTable" icon="ui-icon ui-icon-trash" actionListener="#{userController.deleteUser(eachUser)}"
                              value="#{messages.button_delete} #{messages.user}" onstart="return confirm('#{messages.are_you_really_sure}')" />
                           <!-- bug in PF does not update table. -->
                        </p:column>

                     </p:dataTable>
                  </h:form>
               </td>
            </tr>
         </table>
      </center>

      <br />

      <center>
         <table>
            <tr>
               <td><h:form id="newUsersForm">

                     <p:panel id="newUserPanel" header="#{messages.users_add_user}">

                        <f:event listener="#{addFormValidator.validate}" type="postValidate" /> <!-- To test this use test@test.com -->
                        <p:message id="newUserPanelError" for="newUserPanel" showDetail="true" />

                        <h:panelGrid columns="4" id="newUserPanelGrid">

                           <h:outputLabel for="firstname" value="#{messages.user_first_name}" />
                           <h:outputLabel for="firstname" styleClass="mandatory" value="*" />
                           <p:inputText id="firstname" value="#{newUser.firstName}" />
                           <p:message for="firstname" />

                           <h:outputLabel for="lastname" value="#{messages.user_last_name}" />
                           <h:outputLabel for="lastname" styleClass="mandatory" value="*" />
                           <p:inputText id="lastname" value="#{newUser.lastName}" />
                           <p:message for="lastname" />

                           <h:outputLabel for="password" value="#{messages.user_password}" />
                           <h:outputLabel for="password" styleClass="mandatory" value="*" />
                           <p:password id="password" value="#{newUser.password}" feedback="true" />
                           <p:message for="password" />

                           <h:outputLabel for="email" value="#{messages.user_email}" />
                           <h:outputLabel for="email" styleClass="mandatory" value="*" />
                           <p:inputText id="email" value="#{newUser.email}">
                              <f:validator validatorId="com.thesoftfact.eventis.EmailFieldValidator" />  <!-- To test this use test -->
                           </p:inputText>
                           <p:message id="emailError" showDetail="true" for="email" />

                           <h:outputLabel for="phoneNumber" value="#{messages.user_phone}" />
                           <h:outputLabel for="phoneNumber" styleClass="mandatory" value="" />
                           <p:inputText id="phoneNumber" value="#{newUser.phoneNumber}" />
                           <p:message for="phoneNumber" />

                           <h:outputLabel for="mobileNumber" value="#{messages.user_mobile_phone}" />
                           <h:outputLabel for="mobileNumber" styleClass="mandatory" value="" />
                           <p:inputText id="mobileNumber" value="#{newUser.mobileNumber}" />
                           <p:message for="mobileNumber" />
                        </h:panelGrid>

                        <p:commandButton update=":newUsersForm:newUserPanel, :usersForm:usersTable, :usersForm:newUserPanelError" icon="ui-icon ui-icon-disk"
                           actionListener="#{userController.createUser(newUser)}" value="#{messages.button_create} #{messages.user}" onstart="return confirm('#{messages.are_you_sure}')" />

                     </p:panel>
                  </h:form>
               </td>
            </tr>
         </table>
      </center>

   </ui:define>

</ui:composition>

To break auto width of 100% for everything...

Code: Select all

#container {
	text-align: left;
	margin: 0 auto;
	background-color: white;
	border-left: 1px solid #D3D2D1;
	border-right: 1px solid #D3D2D1;
	border-bottom: 1px solid #D3D2D1;
	padding-top: 5px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	min-width: 960px;
	min-height: 760px;
	width: 90%;
}

Some standard Facelets

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.org/ui">

<h:head>
   <title>Eventis</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <h:outputStylesheet name="css/screen.css" />
</h:head>

<h:body>

   <div id="header">
      <div id="headerText">Eventis</div>
   </div>

   <div>
      <ui:include src="/WEB-INF/pages/include/menu.xhtml" />
   </div>

   <div id="container">

      <div id="messages_area">
         <p:messages id="global_messages" showDetail="true" autoUpdate="false" />
      </div>

      <div id="content">
         <ui:insert name="content">
				NO CONTENT SUPPLIED
			</ui:insert>
      </div>
   </div>

   <div id="footer">FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER
      FOOTER FOOTER</div>

</h:body>

</html>

J6CDI
JBoss 7.1
Primefaces 3CR1

[tony.herstell]

Ading log:

Initiating ajax request.
Form to post usersForm.
URL to post /eventis/users.
Post Data:usersForm=usersForm&usersForm%3AusersTable%3Aj_idt55_filter=&usersForm%3AusersTable%3Aj_idt56_filter=&usersForm%3AusersTable%3Aj_idt57_filter=&usersForm%3AusersTable%3Aj_idt58_filter=&usersForm%3AusersTable%3Aj_idt59_filter=&usersForm%3AusersTable%3Aj_idt60_filter=&usersForm%3AusersTable%3Aj_idt61_filter=&javax.faces.ViewState=6098089215054261821%3A7565763191283733241&javax.faces.partial.ajax=true&javax.faces.source=usersForm:usersTable:2:j_idt63&javax.faces.partial.execute=@all&javax.faces.partial.render=usersForm:usersTable:2&usersForm:usersTable:2:j_idt63=usersForm:usersTable:2:j_idt63
Response received succesfully.
DOM is updated.
Response completed.

[porthos]

Ah, yes. Notice how ajax is trying to render the row you've just deleted instead of the whole table : javax.faces.partial.render=usersForm:usersTable:2 - So of course nothing happens.

I'd say that's a bug.

Two possible workarounds you could try:

1. Wrap the datatable in a <p:outputPanel> and update that instead.
2. Specify your partial update by using the jsf component reference, i.e. in your case: update=#{component.parent.parent.clientId}