Having problems getting Ajax to work

[Christopher Sharp]

Hello,

I am having a lot of problems getting Ajax to work properly. Part of my xhtml file is as follows:

<h:panelGrid columns="3">
<h:outputText value="Name of photometric system: "/>
<h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>
<h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');"
styleClass="longButton"/>
<h:commandButton value="Update Number of Filters">
<f:ajax event="mouseup" execute="@this" listener="#{filters.updateNumFilters}" render="fileTable"/>
</h:commandButton>
<h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>
<h:commandButton value="Clear List" styleClass="longButton">
<f:ajax execute="@this" listener="#{filters.reset}" render="numFilters fileTable"/>
</h:commandButton>
</h:panelGrid>
<h:panelGrid id="uploadDisplay" rendered="#{filters.showUploadList}">
<p:dataTable id="fileTable" value="#{filters.uploadList}" var="up">
<p:column>
<h:outputText value="#{up.fileNumb}"/>
</p:column>
<p:column>
<h:outputText value="#{up.fileName}"/>
</p:column>
<p:column>
<h:outputText value="#{up.fileMess}"/>
</p:column>
</p:dataTable>
</h:panelGrid>

Basically, when you enter a number in the input with id="numFilters" and click the button "Update Number of Filters", it is supposed to display the table with the id="fileTable", or equivalently id="uploadDisplay", then when you click the next button "Clear List", it is supposed to reset the input id="numFilters" back to zero and disabled displaying the table. For now I am not concerned about the code before "Update Number of Filters".

Before I added Ajax, this all worked correctly, with the datatable displaying the number of entries corresponding to the number in the input field, and when I clicked either of the two buttons mentioned above, the display was updated correctly. However, the whole screen "flips", and other things displayed are no longer rendered in the way I want. In fact this xhtml file is included in a main file which is viewed.

I've tried adding Ajax in various ways, one of which is here, but I'm unable to get it to work correctly, either the whole screen "flips", and/or the page is not updated correctly, or not at all.

In my bean I just has two Ajax actions that are fired as follows:

public void updateNumFilters(AjaxBehaviorEvent e) {
// Code to set things up
}
public void reset(AjaxBehaviorEvent e) {
// Code for resetting things
}

Before adding Ajax, these two methods were fired by ActionEvent in each case, and had an actionListener for both command buttons, which worked correctly. For these two methods I just changed ActionEvent to AjaxBehaviorEvent, otherwise they are the same.

If anybody can help me get this problem resolved, I would be very grateful. I am still learning how to use Ajax.

[Christopher Sharp]

Hello,

Well, I managed to solve this particular problem, and my changed code is as follows:

<h:panelGrid id="photsys" columns="3">
<h:outputText value="Name of photometric system: "/>
<h:inputText size="20" id="namePhotSystem" value="#{filters.photometricSystem}"/>
<h:commandButton type="button" value="File Format" onclick="openPopup(570,570,'htmlPopup/fileFormat');"
styleClass="longButton"/>
<h:commandButton value="Update Number of Filters">
<f:ajax execute="numFilters" listener="#{filters.updateNumFilters}" render="fileTable"/> <!-- This now works -->
</h:commandButton>
<h:inputText size="4" id="numFilters" value="#{filters.numUserDefined}"/>
<h:commandButton value="Clear List" styleClass="longButton">
<f:ajax listener="#{filters.reset}" render="numFilters fileTable"/> <!-- This also now works -->
</h:commandButton>
</h:panelGrid>
<h:panelGrid> <!-- Removed redundant id -->
<p:dataTable id="fileTable" value="#{filters.uploadList}" var="up" styleClass="#{filters.display}">
<p:column>
<h:outputText value="#{up.fileNumb}"/>
</p:column>
<p:column>
<h:outputText value="#{up.fileName}"/>
</p:column>
<p:column>
<h:outputText value="#{up.fileMess}"/>
</p:column>
</p:dataTable>
</h:panelGrid>

However, I am still having problems getting Ajax to work with a menu further back in the file. The idea is that you select a menu item, then click the button "Update Filter Set", and it is supposed to update some components in the page, but it does not. I should change this to a value change listender and do away with the button, which is left over from an older version before using Ajax. Anyway, here is part of the code:

<h:panelGrid columns="3">
<h:selectOneMenu id="filters" value="#{filters.filterSet}" style="height:25px; width:350px;">
<f:selectItems value="#{filters.filtersMap}"/>
</h:selectOneMenu>
<h:outputText value="   " escape="false"/>
<h:commandButton id="filterSelect" value="Update Filter Set" class="longButton">
<f:ajax listener="#{filters.selectFilterSet}" execute="filters" render="fileUpload photsys fileTable"/>
</h:commandButton>
</h:panelGrid>

Thanks for any advice.

[Christopher Sharp]

Hello again,

I'm still completely stuck trying to get Ajax to work, so I have broken down the problem here into a few lines of code. Here is the relevant part of my xhtml file:

<h:panelGrid columns="3">
<h:selectOneMenu id="filters" value="#{filters.filterSet}" style="height:25px; width:350px;">
<f:selectItems value="#{filters.filtersMap}"/>
</h:selectOneMenu>
<h:outputText value="   " escape="false"/>
<h:commandButton id="filterSelect" value="Update Filter Set" styleCass="longButton">
<f:ajax listener="#{filters.selectFilterSet}" execute="filters" render="userDefined"/>
</h:commandButton>
</h:panelGrid>
<h:panelGroup id="userDefined" rendered="#{filters.showUserDefined}">
<!-- Code that is rendered here -->
</h:panelGroup>

The idea is that when you click the "Update Filter Set" button, it's supposed to fire an Ajax action that updates the component with the id="userDefined" that contains a lot of xhtml code that is displayed and can be mofied.

The relevant parts of the bean are here:

@ManagedBean(name="filters")
@SessionScoped
public class MyFilterBean implements Serializable {
private boolean showUserDefined;
// Lots of other code
public void selectFilterSet(AjaxBehaviorEvent e) {
// Initialization code, and determine if showUserDefined is true or false.
}
public boolean isShowUserDefined() {
return showUserDefined;
}
// Lots of other code and various getters and setters
}

When the command button is clicked the Ajax event is fired and the code in that method is executed, but I'm unable to get the xhtml code rendered based on the return from isShowUserDefined().

When the code is non-Ajax and the command button is clicked firing a regular action listender, it works perfectly correctly, except that I get a "page flip", which is not wanted.

If someone could help me get this problem finally nailed, I would be veru grateful indeed.

[Kumar Sugandh]

Try with wrapping "userDefined" panelGrid with PanelGroup, and supply the id of panelGroup to the render attribute of <f:ajax>.

During initial DOM creation, as "userDefined" panelgrid is not created, you won't be able to update that during ajax call. You need to have something above that panelGrid which is rendered always, so try using panelGroup above that.

[Christopher Sharp]

My "userDefined" is already attached to a panelGroup, do you mean I should wrap the panelGroup I already have by a panelGrid, then Ajax will work?

Why during the initial DOM creation is panelGrid (or panelGroup) not created? Are there simple rules during DOM creation about this and the creation of the DOM in general?

[Bin Smith]

Hello!

'render', 'execute' attributes of <f:ajax> element requires to specify correct component id.
If you are on Google Chrome you can easily find out real id of your component by right clicking on web page and select smth like 'View page source'.
Raw html page appears, where you should look up html equivalent of needed jsf component.

If it does not help then wrapping required in <f:ajax> jsf components into h:form will help.
You can try to set id like this only if components are in the same h:form

formId:componentID

If they are in different forms then this might work:

:formId:componentID