This is the code:
<h:form id="articleForm" >
<p:commandButton value="Select tags" ajax="true" >
<f:ajax execute="#form" render="#form :articleForm:tags" />
</p:commandButton>
<p:pickList id="tags" value="#{articleController.dualListModelForTags}" var="tag" itemLabel="#{tag.tag}" itemValue="#{tag}" converter="distinctTagConverter">
<f:facet name="sourceCaption">Distinct tags</f:facet>
<f:facet name="targetCaption">Connected tags</f:facet>
</p:pickList>
</h:form>
When the commandbutton is clicked, the getDualListModelForTags() in the backing bean is called and executed. In getDualListModelForTags() I make some modifications so I want the picklist to be updated. But the picklist(id=tags) is not rendered again. Only when I refresh the page, are the modifications made to the picklist.
The PrimeFaces <p:commandButton> component doesn't work together with <f:ajax>. You need to use the button's own ajax-targeted attributes instead. Instead of the <f:ajax execute> you should use <p:commandButton process>. But this already defaults to #form, so you can omit it. Instead of the <f:ajax render> you should use <p:commandButton update>. Specifying client IDs which are already covered by #form is unnecessary, so just #form is sufficient. Also the ajax="true" attribute is unnecessary as that's the default already.
So just this should do:
<p:commandButton value="Select tags" update="#form" />
Unrelated to the concrete problem, you're doing the business job inside a getter method. This is a bad idea. Do it in the button's action method instead. You also seem to be using a session scoped bean for view scoped data. This is a bad idea. Put the bean in the view scope instead.
Related
I want to render a single component (h:selectManyCheckbox) inside a form based on a check-box that I select or not.
<h:form>
<h:selectBooleanCheckbox value="#{bean.var}">
<f:ajax event="click" render="employeeCheckboxes" />
</h:selectBooleanCheckbox>
<h:selectManyCheckbox
id="employeeCheckboxes"
value="#{bean.checkboxes}"
rendered="#{var}">
</h:selectManyCheckbox>
</h:form>
However, the component isn't re-rendered on selecting or deselecting the check-box. I can however re-render the whole form but I don't want that.
You can't reference a component in <f:ajax render> which is in first place never rendered in HTML output. The <f:ajax render> uses under the covers JavaScript document.getElementById() to find the HTML element in order to update it with the new HTML structure from the ajax response. However, if a JSF component is in first place never rendered in HTML output, then JavaScript can't find it anywhere either.
You need to wrap it in another component which is always rendered.
<h:form>
<h:selectBooleanCheckbox value="#{bean.var}">
<f:ajax render="employeeCheckboxesGroup" />
</h:selectBooleanCheckbox>
<h:panelGroup id="employeeCheckboxesGroup">
<h:selectManyCheckbox
id="employeeCheckboxes"
value="#{bean.checkboxes}"
rendered="#{bean.var}">
</h:selectManyCheckbox>
</h:panelGroup>
</h:form>
(note that I removed event="click" as it's the default already)
See also:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
Hi i think you missed managed bean name in
rendered attribute
of checkbox tag.
I have the followig form with a dataTable and a edit section with input fields to manipulate the table data. I want to refresh the datatable after a the commandButton was clicked:
<f:ajax>
<h:panelGroup id="timesheet_panel">
<h:dataTable id="datatable"
value="#{timesheetController.myTimeSheet}" var="child">
......
<h:column>
<!-- update editor panel data -->
<h:commandLink
action="#{timesheetController.load(child.item['$uniqueid'])}">
<h:outputText value="#{message.edit}" />
<f:ajax
render=":#{component.parent.parent.parent.parent.clientId}:editorpanel" />
</h:commandLink>
</h:column>
</h:dataTable>
<!-- Editor -->
<h:panelGroup id="editor">
<h:inputText value="#{timesheetController.workitem.item['_category']}" />
<h:commandButton action="/mypage"
actionListener="#{timesheetController.process('10')}"
value="Update Tabledata">
<f:ajax render="datatable" />
</h:commandButton>
</h:panelGroup>
</h:panelGroup>
</f:ajax>
Note: I have a h:column with a h:commandLink to update the data shown in the editor panel below the table.
The question is: why is it necessary to provide the action property for the commandButton in the editor panel? If I did not provide the action property the f:ajax render="datatable" will not refresh the datatable.
So it seems to me that only a actionListener can be used here to update backend data. A action method will only work if the result of the action is equal to the current page.
Can anybody explain this behavior?
I am working on GlassFish 3.1.2
To refresh the table you need to put your bean in #ViewScoped at least. Ortherwise, your beed will be recreated after values are set so you'll get to same point.
I am trying to display a page where the user, by the appropriate selection using a radio button, sees either a textbox or a combo box. This is relatively easy and I managed to do that by the following code:
<h:selectOneRadio id="selection" value="#{inputMethod.choice}">
<f:selectItem itemValue="#{inputMethod.TEXT}" itemLabel="textbox"/>
<f:selectItem itemValue="#{inputMethod.COMBO}" itemLabel="combobox" />
<f:ajax event="click" execute="#this" render="#form" />
</h:selectOneRadio>
<h:panelGroup id="Textbox" rendered="#{inputMethod.choice==inputMethod.TEXT}">
<h:outputLabel>Textbox:</h:outputLabel>
<h:inputText value="#{myBean.somevalue}" />
</h:panelGroup>
<h:panelGroup id="Combobox" rendered="#{inputMethod.choice==inputMethod.COMBO}">
<h:outputLabel Combobox:/>
<h:selectManyListbox id="CommunityListbox" value="#{myBean.choices}">
<f:selectItems value="#{myBean.selections}" var="u" itemValue="#{u.id}" itemLabel="#{u.name}"/>
</h:selectManyListbox>
</h:panelGroup>
The problem I have is that the setter for the combo box is never called.
In fact, the setter is only called for the component that is rendered by default (in this case whenever inputMethod.choice==inputMethod.TEXT). If I remove the conditional rendering, all setters are called as one would expect.
Any ideas or answers will be greatly appreciated!
PS: I am using jsf2.0, Glassfish 3.1, Netbeans 7.0 (in case this is of any importance)
You need to ensure that #{inputMethod.choice} evaluates exactly the same during the request of processing the form submit as it did during the request of displaying the form. Easiest is to put the bean in the view scope or to move the initialization logic into the (post)constructor of the request scoped bean.
I want the following form to use AJAX. So the comments are shown after clicking the command button and without reloading the page. What needs to be changed, using Java Server Faces 2.0?
Functionality: This form provides an inputText to define a topic. After pressing the commandButton, it is searched for comments regarding this topic. Comments are shown in a dataTable, if there are any. Otherwise Empty is shown.
<h:form id="myForm">
<h:outputLabel value="Topic:" for="topic" />
<h:inputText id="topic" value="#{commentManager.topic}" />
<h:commandButton value="read" action="#{commentManager.findByTopic}" />
<h:panelGroup rendered="#{empty commentManager.comments}">
<h:outputText value="Empty" />
</h:panelGroup>
<h:dataTable
id="comments"
value="#{commentManager.comments}"
var="comment"
rendered="#{not empty commentManager.comments}"
>
<h:column>
<h:outputText value="#{comment.content}"/>
</h:column>
</h:dataTable>
</h:form>
You need to tell the command button to use Ajax instead. It's as simple as nesting a <f:ajax> tag inside it. You need to instruct it to submit the whole form by execute="#form" and to render the element with ID comments by render="comments".
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax execute="#form" render="comments" />
</h:commandButton>
Don't forget to ensure that you've a <h:head> instead of a <head> in the master template so that the necessary JSF ajax JavaScripts will be auto-included.
<h:head>
...
</h:head>
Also, the element with ID comments needs to be already rendered to the client side by JSF in order to be able to be updated (re-rendered) by JavaScript/Ajax again. So best is to put the <h:dataTable> in a <h:panelGroup> with that ID.
<h:panelGroup id="comments">
<h:dataTable rendered="#{not empty commentManager.comments}">
...
</h:dataTable>
</h:panelGroup>
See also:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
How to find out client ID of component for ajax update/render? Cannot find component with expression "foo" referenced from "bar"
You need to modify your button:
<h:commandButton value="read" action="#{commentManager.findByTopic}">
<f:ajax render="comments" />
</h:commandButton>
This means, when the button is clicked, the action is executed, and the dataTable will be rendered and updated. This only works if the backing bean is at least view-scoped.
I have the following code:
<h:commandLink action="#{testBean.showSomething}">
Do Stuff
</h:commandLink>
which does what I want (change the state of testbean and reload the page which will show a different set of divs. because of their "rendered" properties)
Now I want to use ajax to accomplish this so I did this:
<h:commandLink action="#{testBean.showSomething}">
<f:ajax event="click" render=":content" />
Do Stuff
</h:commandLink>
However this causes the showSomething method to not even be called.
IMHO what I want to do is rather simple but I can't for the life of me figure out how to do it.
You need to use event="action" instead of event="click". You could even omit it altogether. It's namely the default event the <f:ajax> is listening on when nested in an UICommand component.
<h:commandLink action="#{testBean.showSomething}">
<f:ajax render=":content" />
Do Stuff
</h:commandLink>