Uploaded image for project: 'RichFaces'
  1. RichFaces
  2. RF-13165

The rowclick event of the rich:dataTable is not recognized as a valid server-side event during an ajax postback

    Details

    • Workaround Description:
      Hide
      	<h:form id="form">
      		<a4j:jsFunction name="selectRow" actionListener="#{userBean.actionListener}" render="out">
      			<a4j:param name="currentRow" assignTo="#{userBean.name}"/>
      		</a4j:jsFunction>
      		<h:outputText value="#{userBean.name}" id="out" /> 
      
      		<rich:dataTable value="#{carsBean.allInventoryItems}" var="car" footerClass="footerCklass" onrowclick="selectRow('#{car.vendor}');"
      

      (workaround taken from RF-10824)

      Show
      <h:form id= "form" > <a4j:jsFunction name= "selectRow" actionListener= "#{userBean.actionListener}" render= "out" > <a4j:param name= "currentRow" assignTo= "#{userBean.name}" /> </a4j:jsFunction> <h:outputText value= "#{userBean.name}" id= "out" /> <rich:dataTable value= "#{carsBean.allInventoryItems}" var = "car" footerClass= "footerCklass" onrowclick= "selectRow( '#{car.vendor}' );" (workaround taken from RF-10824 )

      Description

      An embedded <a4j:ajax> tag in an extendedDataTable with the event rowclick_ does not work. The relevant code snippet:

      <a4j:ajax event="rowclick" render="shippingEditForm" listener="#{shippingEdit.setId(shipping.id)}"/>
      

      This should work. A google search quickly shows one how many people expect it to work. I dug in to find out why it doesn't work:

      When a HTML element triggers an ajax event, a check is performed on the server-side to see if the HTML element that triggered the event is the JSF component that is being decoded. This is done in this line of code:

      https://github.com/richfaces/richfaces/blob/master/framework/src/main/java/org/richfaces/renderkit/RenderKitUtils.java#L511

      if (behaviorSource != null && behaviorSource.equals(clientId)) {
      ...
      

      Before the request is sent to the server, we check if the originating element of an event is from a component, and "re-target" it if not (see:RF-12616, RF-12715). This is done in these lines of code:

      https://github.com/richfaces/richfaces/blob/master/framework/src/main/resources/META-INF/resources/richfaces.js#L677

                      if (this.id && sourceElement.id.indexOf(this.id) == 0) { // otherwise parent element is definitely not JSF component
                          var suffix = sourceElement.id.substring(this.id.length); // extract suffix
                          if (suffix.match(/^[a-zA-Z]*$/) && isRichFacesComponent(this)) {
                              parentElement = this;
                              return false;
                          }
                      }
      

      This re-targeting works well, as for the most part elements DOM ids within components use the #{clientId}Qualifier syntax. However this breaks down with table rows, where the ":" separator is used. This is the same separator used to separate JSF component id's in the clientId. For example, a table with the clilentId "form:edt" will have rows with DOM id "myForm:edt:5:n".

      So we need to fix the client-side re-targeting to work for table rows.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Assignee:
                  michpetrov Michal Petrov
                  Reporter:
                  fabmars Fab Mars
                • Votes:
                  1 Vote for this issue
                  Watchers:
                  5 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: