I am using a SelectBooleanCheckbox in a Composite Component which is rendered repeatetly with ui:repeat on the page. After pressing the Save button the page gets updated but the checkbox is unchecked even if the bean value is true.
<p:selectBooleanCheckbox id="someId" value="#{cc.attrs.item.property}"/>
#{cc.attrs.item.property}
And this is what is displayed on the page:
When i navigate to the page initialiy or after reloading the page in the Browser everything is rendered ok.
I also tried to change the submit to non-ajax and also using h:selectBooleanCheckbox but that did not change much.
========================== more code =================
page.xhtml
...
<ui:repeat id="listID" value="#{itemList}" var="listElement">
<cc:componentWithCheckbox id="theComponent" item="#{listElement}"/>
</ui:repeat>
...
componentWithCheckbox.xhtml
<cc:interface>
<cc:attribute name="item" required="true" />
</cc:interface>
<cc:implementation>
<div id="#{cc.clientId}">
<p:inputText value="#{cc.attrs.item.someTextProperty}"/>
<p:selectBooleanCheckbox id="someId" value="#{cc.attrs.item.property}"/>
#{cc.attrs.item.property}
</div>
</cc:implementation>
Bean
The Bean does nothing to the field. Just saves it in the DB. The value is correct in the bean and in the DB after pressing save. Just not rendered on the page.
====================== SOLUTION FROM MROD =====================
I just switched the ui:repeat in the view for c:forEach and everything was fine. :) I just needed to alter the id of the repeated element becouse with forEach every element got the same. I just added the status.index to the id to fix that.
Try using c:forEach instead of ui:repeat :)
Related
This question already has an answer here:
Why do I need to nest a component with rendered="#{some}" in another component when I want to ajax-update it?
(1 answer)
Closed 7 years ago.
I'm using JSF 1.2 and RichFaces in my project. I'm trying to implement a scenario which is as follows, I have two rich:panel in my page and their rendered attribute is set to a boolean variable in a bean and the default values of the variable is set to false, so the first time the page is loaded the panels do not get rendered. I have a a4j:commandButton in my page and on the action attribute of the button I am calling a method in my bean which sets the two flag variable but the panels are not getting rendered even after the variables are set, and I am also setting the rerendered attribute of the button, I don't think I am missing any steps.
If component is not rendred when page is loaded then it will not make any change even when you will change the value of boolean variable to true on some commanad button click as well. Your component should be in view to rendered on Button click . So put your component inside another component Please chek below code
Following will not work when #{bean.renderResult} defaults to false:
<h:form id="form">
<h:commandButton value="Submit" action="#{bean.toggleRenderResult}">
<f:ajax render=":result" />
</h:commandButton>
</h:form>
<h:outputText id="result" value="#{bean.result}" rendered="#{bean.renderResult}" />
You need to ensure that the render ID points to a component which is already present in the JSF-generated HTML output.
Following will work:
<h:form id="form">
<h:commandButton value="Submit" action="#{bean.toggleRenderResult}">
<f:ajax render=":result" />
</h:commandButton>
</h:form>
<h:panelGroup id="result">
<h:outputText value="#{bean.result}" rendered="#{bean.renderResult}" />
</h:panelGroup>
For more information check http://balusc.blogspot.in/2011/09/communication-in-jsf-20.html#AjaxRenderingOfContentWhichIsByItselfConditionallyRendered
I am getting "Cannot find component with identifier "contentForm:tabView:form:addressDialogPanel" referenced from "contentForm:tabView:form:addressBookTable" " error. How can I update my panelGrid inside the widget?
<h:form id="form">
<p:dataTable id="addressBookTable">
<p:ajax event="rowSelect" listener="#{addressBookController.onRowSelect}"
update="contentForm:tabView:form:addressDialogPanel" oncomplete="addressDialog.show()" />
</p:dataTable>
<p:dialog id="addressDialogId" widgetVar="addressDialog">
<h:panelGrid id="addressDialogPanel" columns="2" cellpadding="4">
</h:panelGrid>
</p:dialog>
</h:form>
The main problem is that you are giving the wrong client ID of component's. Also p:tabView is a component it is not a form. When you define a h:form, it generates a standart HTML form element. And when you submit the page JSF uses POST to submit your data into backing bean. So nesting them is going to occur lot's of issues that you don't expect. You should seperate forms into sections like sideForm or searchForm or etc.
You should detect the correct client ID of your component when you try to update it. You can do this with your browser's developer settings(press f12 for chrome). Then select component with the magnifier button and give that ID into update property. Just like here:
You should read to learn basics of JSF for example from here
when i click the button handler.toggleCreatingTheme() is called, but the outputPanel is not rendering. When i refresh the page(f5) the content of the panel is showed.
<a4j:commandButton styleClass="simple-submit-button"
action="#{handler.toggleCreatingTheme()}"
rendered="#{!handler.creatingTheme}"
value="txt"
immediate="true"
render="newThemeForm" oncomplete="initEditor()" status="statusWait" />
<a4j:outputPanel id="newThemeForm" ajaxRendered="true" rendered="#{handler.creatingTheme}">
this tags are both in a h:form tag, there is just that one h:form.
How do I let the page refreshing on his own, so rendering the panel at the moment when i click the button?
Embed newThemeForm within another a4j:outputPanel and render it instead of reRendering newThemeForm.This is because newThemeForm will not be in DOM when trying to render it as it's rendered attribute will still be false.
Like:
<a4j:outputPanel id="outerPanel>
<a4j:outputPanel id="newThemeForm" rendered="#{bean.booleanvalue}">
</a4j:outputPanel>
</a4j:outputPanel>
Render outerPanel and not the newThemeForm.
i have tried the way that AhamedMustafaM mentioned but it didnt work with me , so i searched and tried for a little while so finally i got to make it work with a workaround, here is how
<a4j:commandButton id="clear" value="Clear" action="#{handler.clearData}" immediate="true" >
<!-- dummy call just to make it work -->
<a4j:actionListener listener="#{ViewerController.test}"/>
<f:ajax render="dataGroupPanel"/>
</a4j:commandButton>
I'm developping an application in JSF2.0. I encountered a problem when mixing ajax and a panelGroup with a rendered attribute.
My page contains 3 panels. In the first panel the user selects an item from a <h:selectOneMenu>. This causes to render the second panel.
The second panel contains an h:dataTable that is connected to a DataModel in the backing bean. The values of the dataTable are determined by the item that was chosen in the <h:selectOneMenu> of the first panel. Each row in the table contains a commandLink to view detailed info about the item of that row:
<h:commandLink action="#{faseController.selectInvulling}">
<f:ajax render="#form" execute="#form" />
</h:commandLink>
Clicking on the commandLink the third panel gets rendered:
<h:panelGroup rendered="#{faseController.invullingSelected}" layout="block" styleClass="panelElement" id="invulling">
<label>
<span>Datum:</span>
<h:inputText value="#{faseController.selectedInvulling.datum}" required="true" requiredMessage="Gelieve een datum in te vullen." converterMessage="Gelieve een geldige datum in te vullen (dd/mm/jjjj)." >
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:inputText>
</label>
<label>
<span>Evaluatie</span>
<h:inputTextarea value="#{faseController.selectedInvulling.evaluatie}" cols="100" />
</label>
<label>
<span>Methode</span>
<h:inputTextarea value="#{faseController.selectedInvulling.methode}" cols="100" />
</label>
</h:panelGroup>
This is where I encounter a problem. The first time I click on a commandLink to view the detailed info about that row in the table, I get the correct data in the third panel. Afterwards I change the item in the <h:selectOneMenu> of the first panel: the correct corresponding dataTable gets rendered in the second panel. However this time when I click on a commandLink in the table to view the details of that item, I get to see the info from the item I clicked the first time.
If I ommit rendered="#{faseController.invullingSelected}" everything works fine, but this causes confusion in the view, since the third panel is now always rendered.
All three panels are located in the same form. My backing bean is ViewScoped. What am I doing wrong? Any help woud be greatly appreciated.
This can happen if you're doing business logic in an getter method instead of in an (action)listener method. I also wonder if you really need to execute and render the entire form. Try to be more specific in specifying the elements which are to be executed and/or re-rendered.
The question is way too broad and the code is not complete enough in order to pinpoint the real cause and propose the a ready-to-use solution.
Try using this.
<a4j:commandLink action="#{faseController.selectInvulling}" execute="#this"
render="thirdPanelId" limitRender="true"/>
Execute only the components which you want to process and render only the components which needs to be refreshed.
I have a JSF page on which I want to have a checkbox that, when clicked, will add/remove certain other form fields from the page. Here is the (simplified) code I currently have for the checkbox:
<h:selectBooleanCheckbox title="showComponentToReRender" value="#{backingBean.showComponentToReRender}">
<a4j:support event="onsubmit" reRender="componentToReRender" />
</h:selectBooleanCheckbox>
Here is the code for the component I want to hide:
<h:selectOneMenu id="componentToReRender" value="#{backingBean.value}" rendered="#{valuesList.rowCount>1 && backingBean.showComponentToReRender}">
<s:selectItems value="#{valuesList}" var="value"/>
</h:selectOneMenu>
Currently, clicking the checkbox does nothing; that "selectOneMenu" will not go away. What am I doing wrong?
You need to wrap the componentToReRender in either:
<h:panelGroup id="componentToReRenderWrapper">
or
<a4j:outputPanel id="componentToReRenderWrapper">
So, effectively you will have:
<h:panelGroup id="componentToReRenderWrapper">
<h:selectOneMenu id="componentToReRender" value="#{backingBean.value}" rendered="#{valuesList.rowCount>1 && backingBean.showComponentToReRender}">
<s:selectItems value="#{valuesList}" var="value"/>
</h:selectOneMenu>
</h:panelGroup>
and change the reRender="componentToReRenderWrapper" in case you use panelGroup, or remove that attribute, in case you use outputPanel.
Found the exact explanation in the RichFaces docs:
Most common problem with using reRender is pointing it to the component that has a "rendered" attribute. Note, that JSF does not mark the place in the browser DOM where the outcome of the component should be placed in case the "rendered" condition returns false. Therefore, after the component becomes rendered during the Ajax request, RichFaces delivers the rendered code to the client, but does not update a page, because the place for update is unknown. You need to point to one of the parent components that has no "rendered" attribute. As an alternative, you can wrap the component with layout="none" .
Don't forget to set ajaxRendered="true" on the a4j:outputPanel