This question already has an answer here:
Ajax update/render does not work on a component which has rendered attribute
(1 answer)
Closed 6 years ago.
I have a component that I want to show/hide after user hits a commandButton.
It's like this:
<h:commandButton id="showButton" value="#{bean.wasPressed ? 'Hide' : 'Show'}">
<f:ajax listener="#{bean.toggle()}" render="explanation showButton" />
</h:commandButton>
and
<h:panelGroup id="explanation" rendered="#{bean.wasPressed}">
<h:outputText value="something" />
</h:panelGroup>
The bean.toggle() simply sets the wasPressed property to true or false appropriately. I am using <h:form prependId="false">.
The problem is the value of the render attribute of my button. It explicitly enlists both: explanation and showButton.
As long as the showButton is always present (it only changes its label), the explanation is present only if the wasPressed property is true. Otherwise it says:
malformedXML: During update: explanaition not found
How can I solve this problem?
I would like not to revert to hiding the element in the source code, so I would like not to use any jQuery toggle(-) or any way of hiding the element using style="display: none" or any of this stuff.
Is it even achievable in JSF 2.1?
You cannot update elements which are not rendered , rendered=false "is a JSF way to" to remove elements from the DOM Tree ,
its not like css display:none or visibility:hidden <- this two will keep the elements in the DOM tree but hidden , while the JSF rendered=false wont even render (keep) the element in the DOM tree (you wont even see it in the "view source" of the page)
So in you case you need to wrap the panelGroup with another `panelGroup' and update the id of the wrapper
<h:commandButton id="showButton" value="#{bean.wasPressed ? 'Hide' : 'Show'}">
<f:ajax listener="#{bean.toggle()}" render="explanationWrapper showButton" />
</h:commandButton>
<h:panelGroup id="explanationWrapper">
<h:panelGroup id="explanation" rendered="#{bean.wasPressed}">
<h:outputText value="something" />
</h:panelGroup>
</h:panelGroup>
also look at similar question
Can you update an h:outputLabel from a p:ajax listener?
Related
I'm asking how I can achieve updating a specific element of a loop?
e.g.
<h:form>
<ui:repeat var="element" value="#{bean.elements}" varStatus="status">
<h:outputtext value="#{element.text}" id="#{element.id}" />
<p:commandLink update="#{element.id}" >
<h:outputtext value="UpdateTextField #{element.id}" />
</p:commandLink>
</ui:repeat>
</h:form>
I know that status.index doen't work since its view-rendered. Also the "dynamic" index-setting also doen't work since its view-rendered... But how can i achieve that when the button is clicked, it updates (ajax) the outputtext? Is this only possible with c:forEach?
its ViewScoped and the form must be outside of the loop. otherwise i would solve it with update="#form", but here its not possible
thanks for any help!
Since both ui:repeat and c:forEach generate different dynamic Component Ids for the elements you can't Guarantee the update an individual Item out of all generated items from outside.
I think best approach for this kind of problem would be placing a h:panelGroup around ui:repeat or c:forEach itself and update the h:panelGroupitself.
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'm using JSF with PrimeFaces to make an application as an assignment for college. I'm struggling to get something working. I'm using PrimeFaces and I have a tabview which contains 5 tabs. In one of those tabs I have a dataTable which has several rows and columns. This all works fine, but the problem is that I want to submit the form without rerendering the (entire page). The thing is, every column in the dataTable has a selectBooleanCheckbox, and when that checkbox is selected, a button should disappear. If it's unselected the button should appear. This works fine with onchange="this.form.submit()" or onclick="this.form.submit()" but it refreshes the entire application, and it causes the first tab to be selected, rather than the one I was at. So I'm looking for a solution to be able to submit and re-render some stuff without refreshing the entire program. This is my code:
<body>
<h:form id="customerForm">
<p:dataTable id="customerlist" var="c" value="#{customerBean.customerList}">
<p:column>
<f:facet name="header">Select</f:facet>
<center>
<p:selectBooleanCheckbox value="#{c.selected}" onchange="this.form.submit()"/>
</center>
</p:column>
</p:dataTable>
<h:commandButton id="testtest" value="test" rendered="#{customerBean.numberSelected() == 0}"/>
</h:form>
</body>
I removed most of the columns for the sake of simplicity. What is the solution to this? I've tried using ajax, but that didn't work
<p:selectBooleanCheckbox value="#{c.selected}">
<f:ajax event="click" execute="#form" render="#none"/>
</p:selectBooleanCheckbox>
Do you really need to submit the whole form? If it's enough that the view is being rerenderd try just to update the form. For that you can use the primefaces ajax event.
<p:selectBooleanCheckbox value="#{c.selected}">
<p:ajax update="#form"/>
</p:selectBooleanCheckbox>
If this does not work, please tell us what "..ajax, didn't work" exactly mean. Is there any POST Request submitted? Is any Action/Setter called?
I have a JSF search command button and a tomahawk dataTable that showing the result from a search. When clicking on the command button, the dataTable should output the search result. Anyway, since I use the JSF Ajax, the dataTable doesn't show. I am just wondering whether JSF Ajax cause the problem?
Here is the problematic code that cause the table now render:
<h:commandButton id="search" value="#{msg.Label_Search}" action="#{theBean.doSearch}">
<f:ajax render="searchStatus" execute="#form" />
</h:commandButton>
<h:outputText id="searchStatus" value="Loading data now..." rendered="#{theBean.searchingNow}" />
<h:panelGroup id="searchResultTable">
<t:dataTable ... />
</h:panelGroup>
*Take note on this. If the ajax code were removed. It is working fine.
You're only updating the searchStatus, not the searchResultTable when the ajax request completes. So the enduser will indeed never see a visual change in the HTML representation of the searchResultTable.
Fix the <f:ajax render> accordingly so that the searchResultTable is also really updated:
<f:ajax render="searchStatus searchResultTable" execute="#form" />
I have a list of questions and I can display them ok using a ui:repeat, but after clicking the Edit button the rerendered inputText is given the wrong question.id. For some reason, if you click Edit on the first item, the inputText value assigned is that of the second item in the list, even though other outputs (other than the h:inputText element) are correct.
<h:form id="questionnaireForm">
<ui:repeat value="#{ProjectManager.currentProject.preQuestions}" var="question" varStatus="current"
id="preQuestionsRepeat">
<div>
<ui:fragment rendered="#{!question.editing}">
<f:ajax render="#form">
<p>#{question.id} #{question.questionText}</p>
<h:inputText value="#{question.id}"/>
<h:commandLink styleClass="link"
action="#{question.setEditing}"
value="Edit">
</h:commandLink>
</f:ajax>
</ui:fragment>
</div>
<div>
<ui:fragment rendered="#{question.editing}">
<f:ajax render="#form">
<p>#{question.id} #{question.questionText}</p>
<h:inputText value="#{question.id}"/>
</f:ajax>
</ui:fragment>
</div>
</ui:repeat>
</h:form>
Obviously I don't really want to edit the id. I just want the correct question.something to show up in my inputText :-)
Perhaps I'm not using correctly? It seems fine according to my reading so far.
Many thanks for your assistance.
Did you correctly override equals() and hashCode()? These methods are used to pull the value from the list that you selected. It pulls the first one that matches with the equals() operator.