How to add AJAX to TreeNode?

[td121136]

Hi all, i tried to upgrade an old system to RichFaces 4, the <rich:tree> is build programmatically, i able to see the tree nodes displayed on browser, but when i click on a tree node, it AJAX doesn't seems works.

Below show how i added AJAX to the tree node, is it correct?

UITreeNode node = new UITreeNode();

node.setType("TEST");

AjaxBehavior ajaxSupport = new AjaxBehavior();

ajaxSupport.setBypassUpdates(false);

ajaxSupport.setExecute(Arrays.asList("@this"));

ajaxSupport.setRender(Arrays.asList("left,right"));

node.addClientBehavior("click", ajaxSupport);

HtmlOutputText output = new HtmlOutputText();

output.setValueExpression("value", Expressions.instance().createValueExpression("#{item.getData().getName()}").toUnifiedValueExpression());

node.getChildren().add(output);

[lfryc]

Hey Alfred,

have you tried to review the browser error console?

I expect that the tree resources aren't initialized correctly and you will see some errors.

[lfryc]

Note that creating components by calling new <UIComponent()> is not recommended,

you should use Application.createComponent instead.

[td121136]

I'm using Firefox version 17, how can i view the JSF errors?

[td121136]

OK, i figured it out how to open the error browser in Firefox using CTRL + SHIFT + J

Once opened the browser i try to reload the page again, i found an error in the browser as follow:

TypeError: RichFaces.ui.Tree is not a constructor

Any idea?

[lfryc]

JavaScript dependencies for Tree are missing.

----

As I told you, you need to use JSF way to create a component [1] and then add it to a component tree [2].

UIComponent comp = Application#createComponent

FacesContext.getViewRoot().getComponents().add(comp);

Now, the JavaScript dependencies for Tree should be loaded in a browser.

----

The statement above ^ expects you add the component in an initial request (not postback).

The resources for AJAX postbacks won't be loaded correctly.

You can overcome that by loading all RichFaces at once (known as RichFaces Resource Optimization feature).

Or you can load them one by one on a views you need them:

<h:outputScript library=... name=... />

<h:outputStylesheet library=... name=... />

You can find all required resource names (as a pair resource name / resource library) at:

https://github.com/richfaces4/components/blob/master/iteration/ui/src/main/templates/tree.template.xml#L17

[td121136]

Yup, i did follow the way as you mentioned, create the component using Application.createComponent(), but the result is still the same..

I followed the way to creare the component, and now there is no more error message in the broswer, the richtree showed but clicked on the tree node doesnt invoke the ajax call.

I had do a simple test by adding the <rich:tree> along with the <rich:treeNode> directly in the xhtml file, e.g.:

<rich:tree id="testTree" value="#{manager.getRoot()}" var="item" nodeType="#{item.getType()}">

    <rich:treeNode type="testTreeNode">

        <a4j:ajax event="click" execute="@this" action="#{selectionManager.setSelectedNode(item)}" render="leftHandSide"/>

        <h:outputText value="#{item.getData().getName()}" styleclass="openet-node-active-true"/>

        <a4j:commandButton id="testbutton" type="button" execute="@this" value="test" action="#{manager.setSelectedNode(item)}" render="left,right"/>

    </rich:treeNode>

</rich:tree>

</h:form>

When clicking on the treenode (the outputtext), it did fire an ajax call, however it doesnt call to the method as i expected. However the same thing works when i creating a commandbutton (as showed above), it called the expected method. But this is just for testing, i still need to get thing work in the dynamic side. Current i'm using the <ui:debug> to check the component on the page, is there any useful tools which i can used to view the dynamic generated content, similar like xhtml, or is there any debug mode i can enabled to view them?