2 Replies Latest reply on Mar 16, 2007 3:23 PM by Alexander Smirnov

    Is it possible to invoke reRender from Javascript?

    Scott McNab Newbie

      In my application I have a <rich:tree> of <rich:treenode> elements generated from a database-backed tree structure. The web-interface also uses Seam remoting functionality to subscribe to a JMS topic that asynchronously broadcasts changes to the tree state.

      I have a client-side Javascript callback that is invoked in response to the JMS notifications and I need this script to invoke a reRender() on the corresponding node in the tree in order to redraw the updated node view.

      Is this possible with RichFaces?

      I have not had any success with this so far, as I cannot seem to set the node 'id' attribute from an EL expression. Using this JSF template:

      <rich:tree value="#{topologyTreeModel.treeModel}" var="item" nodeFace="#{item.type}">
       <rich:treeNode type="Device" iconLeaf="#{item.icon}" id="n-#{item.identifier}">
       <h:commandLink action="#{nodeView.begin}">
       <f:param name="node" value="#{item.identifier}"/>
       <h:outputText value="#{item.description}" />

      Results results in this exception (note that the #{item.identifier} expression evaluates correctly in the <f:param> tag, just not in the ID attribute):

      SEVERE: Error Rendering View[/console/topologytree.xhtml] java.lang.IllegalStateException: Component ID j_id5:j_id21:n- has already been found in the view. See below for details.
      <div class="topologyTree">
       +id: j_id21
       type: org.richfaces.component.html.HtmlTree@f5f77
       +id: n-
       type: org.richfaces.component.html.HtmlTreeNode@1449d75
       +id: j_id22
       type: javax.faces.component.html.HtmlCommandLink@1bd9f3d
       +id: j_id23
       type: javax.faces.component.UIParameter@217540
       +id: j_id24
       type: javax.faces.component.html.HtmlOutputText@98fc6a
       +id: n-
       type: org.richfaces.component.html.HtmlTreeNode@1e3d101
       +id: j_id25
       type: javax.faces.component.html.HtmlCommandLink@1ae9aa5
       +id: j_id26
       type: javax.faces.component.UIParameter@2af8bd
       +id: j_id27
       type: javax.faces.component.html.HtmlOutputText@130478f
       +id: n-
       type: org.richfaces.component.html.HtmlTreeNode@aa1162
       +id: j_id28
       type: javax.faces.component.html.HtmlCommandLink@15b6354
       +id: j_id29
       type: javax.faces.component.UIParameter@d62dd4
       +id: j_id30
       type: javax.faces.component.html.HtmlOutputText@15abfe1

      See how every TreeNode is given id="n-" rather than id="n-123" etc? Is there a way to get this to work?

      The thing is, I was able to get this approach working with Tomahawk Tree2 by surrounding the node contents with a tag and then manually replacing the contents. However I really would like to use the reRender functionality of the RichFaces tree instead of manual Javascript DOM hacking.

      Any clues as to how I might go about this?

      Thanks again for your help!

        • 1. Re: Is it possible to invoke reRender from Javascript?
          Sergey Smirnov Master

          Scott, there are several aspects around this issue actually.
          First of all, it is illegal to use any JSF EL like id="n-#{item.identifier}" (not in JSF 1.1, nor even in JSF 1.2)

          In general, you can invoke a4j:jsFunction to reRender something from the javascript. However, you want to re-render the part of the iteration component (tree) by the event happens outside of this component.

          We need to have a test project to find the right way how it is possible if any. I might be very hard to accomplish this task by suggestions given remotely

          • 2. Re: Is it possible to invoke reRender from Javascript?
            Alexander Smirnov Master

            JSF doen't allow to use EL-expressions for id attribute.
            Tree is iterable component, based on same code as dataTable. For every iteration id of generated html elements will be generated with node path. You don't need to append item identifier.
            You can use <a4j:jsFunction > component for a such use case, to perform the ajax update after finished seam remoting call.
            Also, you can subscribe custom bean to JMS and use <a4j:poll > component for check changes .
            Transparent RichFaces integration with Seam and JMS in a future release plans.