JSF AJAX rerenders outputText component but EL value ends up stale in javascript function

[Kevin Hicks]

Using JSF 2.0 AJAX functionality to rerender some components and it works great. Here's the code:


<h:commandButton id="addHide" rendered="true" actionListener="#{productInstances.add}" value="a">
<f:ajax execute="@all" render="ProductInstanceForm:addStatus ProductInstanceForm:newObjectId" onevent="addProgress"/>
</h:commandButton>
<p/>
<h3><h:outputText value="#{productInstances.addStatus}" rendered="true" id="addStatus"/> </h3>
<h3><h:outputText value="#{productInstances.newObjectId}" rendered="true" jsid="newObjectId" id="newObjectId"/> </h3>

The actionListener add function updates productInstances.newObjectId and when my commandButton is clicked, the newObjectId outputText shows the new value as expected through the ajax call and rerendering.

My problem is with my onevent function addProgress as shown below:


function addProgress(data)
{
console.log("Add status = " + data.status);
var newId = "#{productInstances.newObjectId}";
console.log("addProgress new id=" + newId);

}

Apparently #{productInstances.newObjectId} is converted to the newObjectId value when the page is loaded and the subsequent ajax call has no effect on it. So my newId value in addProgress ends up being stale data once my addHide button is clicked. How do I go about getting the latest value of productInstances.newObjectId in my addProgress javascript function?

[Tim Holloway]

Welcome to the JavaRanch, Kevin!

Helpful hint: Use the "Code" button to format Java Code, XML, and other structured text for better readability.

I'm not 100% sure I follow you here, but a couple of things worth considering:

1. You can probably dispense with the form part of the identifier in your AJAX tag. I believe that it will default to the nearest meaningful naming container.

2. If you're expecting id "newObjectId" to be a value that changes, it isn't. "id" attributes are invariant. The object that the id refers to, however, can have its value change. Some confusion arises here, since you're using the name "newObjectId" both for the XML id attribute and as the backing bean property value name and it's hard to tell which one you mean.

To do a manual post-request update of the client webpage, there has to be Javascript code to handle that process. JavaScript does require fully-qualified IDs, so the script code would do a document findElementById of the HTML INPUT control identified by "ProductInstanceForm:newObjectId".