Get updated value from bean through JavaScript in JSF

Question

I have a context menu in itemComp.xhtml , if i click on any item in the context menu action itemDisplay.refreshItems will be called and on complete of this action JavaScript function showPanel() will be called

itemComp.xhtml

<rich:contextMenu disableDefaultMenu="true" event="oncontextmenu" submitMode="ajax">
    <rich:menuItem disabled="true" style="color:black; font-weight:bold;" value="Items"/>
    <rich:menuSeparator/>

    <c:forEach items="#{itemDisplay.componentTypeMap.keySet}" var="itemValue">
        <rich:menuItem value="#{itemValue}"
                       rendered="#{(itemValue == 'Bags Report') or
                                   (itemValue == 'Chairs Report') or
                                   (itemValue == 'Tables Report')}"
                       action="#{itemDisplay.refreshItems}"
                       oncomplete="showPanel( '#{itemValue}','#{item.id}')">
        </rich:menuItem>
    </c:forEach>
</rich:contextMenu>

In refreshItems() of itemDisplayBean.java, I am setting all the variables as true.

itemDisplayBean.java

private boolean availableBags = false;

public boolean getAvailableBags() {
    return this.availableBags;
}

public void setAvailableBags(boolean availableBags) {
    this.availableBags = availableBags;
}
private boolean availableBags = false;

public boolean getAvailableBags() {
    return this.availableBags;
}

public void setAvailableBags(boolean availableBags) {
    this.availableBags = availableBags;
}
private boolean availableChairs = false;

public boolean getAvailableChairs() {
    return this.availableChairs;
}

public void setAvailableChairs(boolean availableChairs) {
    this.availableChairs = availableChairs;
}
private boolean availableTables = false;

public boolean getAvailableTables() {
    return this.availableTables;
}

public void setAvailableTables(boolean availableTables) {
    this.availableTables = availableTables;
}

public String refreshItems() {
    setAvailableBags(true);
    setAvailableChairs(true);
    setAvailableTables(true);
}

and in itemDisplay.xhtml, I have the JavaScript function showPanel() as follows.

function showPanel(item, itemId) {

    if (item == 'Bags Report') {
        if (#{itemDisplay.availableBags})
            Richfaces.showModalPanel('bags');
        else
            alert('No bags Found');
    } else if (item == 'Chairs Report') {
        if (#{itemDisplay.availableChairs})
            Richfaces.showModalPanel('chairs');
        else
            alert('No Chairs Found');
    } else if (item == 'Tables Report') {
        if (#{itemDisplay.availableTables})
            Richfaces.showModalPanel('tables');
        else
            alert('No Tables Found');
    }
}

and the problem here is -- in JavaScript function, I am not getting the updated backing bean values, hence availableBags ( if( #{itemDisplay.availableBags} ))is false (even though it is set to true in backing bean), and the panel is not shown. If I refresh the page then i will get the updated value from backing bean ( if( #{itemDisplay.availableBags} ) as true and the panel is shown.Any one can help me why i am getting the updated value only by refreshing the page.

The EL expressions (that kind of #{} things) won't be evaluated with the new values unless you render the rich:menuItem again. That's why you don't have the them updated. — Xtreme Biker
I have added an id to a4j:Panel in which this rich:menuItem was embedded and tried rerendering it — Ram Tej
<a4j:outputPanel id="testPanel" style="z-index:5;" id="a4JEmptyComponent1#{colkey}_#{rowkey}" layout="block"> <rich:contextMenu disableDefaultMenu="true" event="oncontextmenu" submitMode="ajax"> ............. rerender="testPanel" ............ </rich:contextMenu> </a4j:outputPanel> — Ram Tej
But am getting the following error " Attribute "id" was already specified for element "a4j:outputPanel". — Ram Tej

Makhiel Makhiel · Accepted Answer · 2015-04-23T09:39:04

As pointed out the EL expressions are evaluated when the page renders and become static text.

You can use @data, e.g.:

<rich:menuItem data="#{itemDisplay.availableBags}" 
    oncomplete="showPanel('#{itemValue}', event.data)" … >

event.data will contain the current value of the property (you can even point it to an object).

EDIT: In RichFaces 3.x the JS parameter is just data

Get updated value from bean through JavaScript in JSF

1 Answers