I am having a lot of problems getting Ajax to work properly. Part of my xhtml file is as follows:
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:
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.
Joined: Dec 12, 2007
Well, I managed to solve this particular problem, and my changed code is as follows:
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:
Thanks for any advice.
Joined: Dec 12, 2007
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:
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:
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.
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.
Joined: Dec 12, 2007
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?
'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
If they are in different forms then this might work: