I am aware that JSF may call a managed bean method a couple of times even if it is called only once in .xhtml. I understand that is due to encode* methods.
I would like to ask you to explain the following case to me.
I have a JSF file that sort of looks like this:
<h:form id="form1">
<h:panelGroup id="output">
...
<h:commandLink...>
<f:ajax render=":form1:output"/>
</h:commandLink>
</h:panelGroup>
</h:form>
All clear so far; pressing the command link rerenders a part of the page within the form panelGroup.
The code follows:
<ui:repeat value="#{movieBean.categories}" var="category">
<li>
<h:outputLink value="index.xhtml">
<f:param name="categoryId" value="#{category.categoryId}"/>
<h:outputText value="#{category.description}"/>
</h:outputLink>
</li>
</ui:repeat>
#{movieBean.categories} //this is just a 'test line'
movieBean is request scoped.
Now, when I enter the page for the first time I get two calls to movieBean.categories.
That is clear because it is called twice in the code. However, when I hit the AJAX link rendering
only a part of the page (output) I get movieBean.categories from <ui:repeat> called again even
though it is outside the partially rendered page area. The 'test line' is not called this time.
I performed another test. I deleted the <ui:repeat> tag leaving the 'test line' only.
AJAX partial rendering dosen't call it as before.
What makes the movieBean.categories call inside a <ui:repeat> tag different
than the one in 'test line'? And why is the call inside <ui:repeat> made when pressing the AJAX link
even though it is outside partially rendered <h:panelGroup id="output"/> tag?
I'm pretty sure that "redundant" call is made within a phase where JSF rebuilds element tree to store POST data into appropriate elements.
So you basically have two getter calls per request if you stay on the page. First one to store new form values, then to render page content.
Related
I have two problems which are closely related:
I need to update a form inside a tag inside ui:repeat from a dialog at the main page and cannot figure out how (because there are many tags in the ui:repeat and I need to update only one)
naming containers are messed up and lose their "index" when I use id in that form (in case of trying to determine the update path expression...)
reason I need this: updating the 'wholelist' (current situation) breaks all <p:calendar> inside the <p:dialog> somehow (no errors...) (the calendar overlay shows at the first time, but after updating the list it does not appear any more (must reload page again). Also I don't want to update 100 elements each time if only one can be changed
page.xhtml
<h:panelGroup id="wholelist">
<ui:repeat var="entry" value="#{bean.foundEntries}" id="repeatId">
<customTag:someTag entry="#{entry}" />
</ui:repeat>
</h:panelGroup>
...
<p:dialog widgetVar="dialog" id="dialog">
<p:calendar value="#{bean.date}" ... /> <!-- overlay pops up on select until the whole list is refreshed. after that it does not appear until page reload -->
<p:commandButton actionlistener="#{bean.saveSomething()}" update="#{bean.componentToUpdate WHICH DOES NOT WORK...}"/>
</p:dialog>
someTag.xhtml
and within the <customTag:someTag> (which is a tag because of multiple reuses) :
...
<h:form>
... display a lot of data which can be changed by the dialog...
<p:commandButton value="show edit dialog" onComplete="PF('dialog').show()" update=":dialog">
<f:setPropertyActionListener value="??? (#form does not work)" target="#{bean.componentToUpdate}" />
</p:commandButton>
</h:form>
First Question:
I need to refresh one single form from the dialog (=the dialog which needs to know which form I want to refresh, and I have no idea how to do so...)
And how can I get the update-logic working (pass the component to update to the bean so the dialog knows what to update or equal)?
Second Question:
why does JSF generate in case of not defining a id="..." to a naming container within a ui:repeat something like
repeatId:0:j_id_c0_6
repeatId:1:j_id_c0_6
repeatId:2:j_id_c0_6
and when I define a id to the form (<h:form id="formname">) something like
repeatId:formname
repeatId:formname
repeatId:formname
which causes duplicateId (because the lack of the "iterator-number" in the name)?
Does this make sense?
I have solved it; error was elsewhere: I have forgotten in an included tag file which caused the js warning (which broke the calendar).
many thanks
I have the following in a JSF page:
<h:commandLink action="#{manager.removeEntity(row.id)}" value="Remove">
<f:ajax event="action" render=":form:table" />
</h:commandLink>
The rendering works perfectly, though it renders the component before the action is performed. (I know this through logging)
Is there any way for me to render the components after the action function is performed on the server?
Any help will be greatly appreciated
Update 1
I removed the action attribute and added a listener to the tag, though unfortunately it doesn't seem to help, the method is still called after the component tree is rendered.
<h:commandLink action="#{manager.removeEntity(row.id)}" value="Remove">
<f:ajax event="action" render=":form:table" />
</h:commandLink>
The rendering works perfectly, though it renders the component before the action is performed. (I know this through logging)
This is not true. You must be misinterpreting the logging. Perhaps you have put a log statement inside the getter method of the table's value in a misassumption that it's only called during render response. This is thus not true. The getter is called as many times as an EL expression referencing the property is been evaluated. This can happen in a different phase before and after invoke action phase. As you've the command link inside a datatable, the table's value getter method will also be called during apply request values phase in order to find find the row associated with the link.
Pass FacesContext#getCurrentPhaseId() along with the log to learn during which phase the getter method is been called. Also note that doing business job (like calling database and so on) inside a managed bean getter method is a bad idea.
See also:
Why JSF calls getters multiple times
You can use the listener of the f:ajax to execute your logic and pass the row.id with one of the following ways (remove the action="#{manager.removeEntity(row.id)}")
Pass a parameter on ajax call 1
Pass a parameter on ajax call 1
kinda late but i had the same problem.
The ajax renders before my jsf logic completed. My solution? Well i added a confirmation dialog. I know it's not a technical solution but hey, it works. Once the user presses ok on the dialog(which takes about a sec, in this time the logic should be done) the component should be rendered. Good Luck Hope this helps.
Before changes:
<h:commandButton action="#{bean.buisnessLogic(param1, param2)}">
<f:ajax
execute="components"
render="table"
/>
</h:commandButton>
After Changes:
<h:commandButton onclick="javascriptCofirm();" action="#{bean.buisnessLogic(param1, param2)}">
<f:ajax
execute="components"
/>
</h:commandButton>
<h:commandButton id="button" style="display: none">
<f:ajax
render="table"
/>
</h:commandButton>
javascript:
function javascriptConfirm() {
bootbox.alert("Se agrego la accion con exito.", function () {
var boton = document.getElementById("button");
boton.click();
});
e.preventdefault();
return false;
}
What i did:
Ok so before changes were made. My commandButton would render the table before the registers were added. For example i would add row 2 and it would not show changes until the page was refreshed or row 3 was added. I did some research and my conclusion is that jsf translate the ajax tag to javascript, and javascript directly executes the code without waiting for the the action to finish.
Solution:
So now i remove the render attribute from ajax and i create another commandButton and in the new commandButton i add the render. The javascriptConfirm method calls the button and "clicks it". This renders the page, but by the time they confirm the buisness logic is complete. So yeah. This is probably confusing. Well whatever you just comment and i will try to respond as quickly as possible (probably not that quick).
I've noticed that this doesn't work for me and I'm wondering if it's just not possible:
<h:form id="one" prependid="false" >
<h:commandButton>
<f:ajax execute=":two">
</h:commandButton>
</h:form>
<h:form id="two" prependid="false">
... content ...
</h:form>
Whenever I click the button above ,I can see that the values on form two are not executed as expected.
Is this the normal JSF behavior?
To 'trick' it, I usually insert a hidden button in form two and trigger it using JavaScript code when the button in form one is clicked. But that's a 'trick' and makes me work extra when I'm not sure I have to.
I should mention the rendering another form is possible.
Could the prependid attribute be causing problems?
Thanks in Advance!
UPDATE Adding more information that might be relevant - adding the prependid="false" to the forms as it is used in the actual code.
No, that's not possible with <f:ajax>. It just submits the parent form. The execute merely tells JSF which components it has to process based on the submitted data, not which request parameters the client side have to send. The button has really to go in the form where it belongs.
I'm experiencing some problems when using the "rendered" attribute with ajax behavior. I'll paste the code so I think it will be a lot more clear:
<h:selectOneMenu value="#{registrarVentaController.esCobroChequeString}">
<f:selectItem itemLabel="Efectivo" itemValue="false"/>
<f:selectItem itemLabel="Cheque" itemValue="true"/>
<f:ajax execute="#this" render="#form"/>
</h:selectOneMenu>
<h:panelGroup id="panelMonto">
<span>Monto:</span>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{registrarVentaController.banCobroCheque}"/>
<h:inputText value="#{registrarVentaController.monto}" rendered="#{not registrarVentaController.banCobroCheque}"/>
</h:panelGroup>
My "#{registrarVentaController}" is just a View Scoped JSF Managed Bean with appropiate setters/getters.
This way it works, I mean, when user selects option "Efectivo", panelGroup "panelMonto" will get updated and we'll see the first inputText, and conversely when user selects option "Cheque" user will see the second inputText.
For this approach I used "f:ajax" component where I updated the whole #form to get this behavior work and I just want to update panelGroup "panelMonto" (using render="panelMonto" It doesn't work at all (I even try with full scope resolution :formName:panelMonto with no result).
I just want to have rendered work with ajax="idComponent" or similar behavior to show certain parts according what user have selected.
Best Regards!
Note (One solution)
I managed to get a solution (taking as an input
JSF rendered is not working
and a bit of myself). I've just moved to a new form the part that I'm
interested in filtering according what user selected. This way I still
use #form ajax's render and it will just render this new form (not the
whole form as I was using!) Neverthless I'm still wondering if there
is a solution to not used #form and just the component/s ID.
what if you check with
render=":panelMonto"
not
render=":formName:panelMonto"
still not working?
this should work only with
render="panelMonto" //because is in the same form
Can you add more code?
Also can you check with your browser (in chrome: right click, inspect element, network) to see if there is any activity?? perhaps is rendering the same thing because of you...
I want to update a part of a page by PPR.
This is the part of page that i want to update:
<h:panelGroup id="aggiungiAuto"
rendered="#{!autoBean.operazioneOk}">
<ui:include src="../component/aggiungi_auto.xhtml"/>
</h:panelGroup>
While this is the commandButton present in aggiungi_auto.xhtml
<p:commandButton value="Submit"
update="growl aggiungiAuto aggiungiFoto"
actionListener="#{autoBean.insert}"/>
Any Idea?
JS/Ajax works on the client side, not on the server side. JSF works on the server side, not on the client side. When you instruct JSF to not render the component to HTML, then nothing will be present in the client side, so JS/Ajax will be unable to locate the HTML element to refresh/update.
You need to wrap it in another <h:panelGroup>.
<h:panelGroup id="aggiungiAuto">
<h:panelGroup rendered="#{!autoBean.operazioneOk}">
<ui:include src="../component/aggiungi_auto.xhtml"/>
</h:panelGroup>
</h:panelGroup>
This way the <span id="aggiuniAuto"> is always present in the client side, so JS/Ajax will be able to update it with the new HTML data generated by JSF.
So I was having this kind of a problem with PrimeFaces (the above answer not being sufficient this time), and I also discovered a solution.
Part of the problem I think was that I was using ui:include recursively. For whatever reason, PrimeFaces was irrationally causing UI components to be bound to the backend data out-of-sync; e.g., when an "Add" button was clicked, a new value would be created in the UI, but then the data for it would be ripped out of the values for the section below, etc...
The explanation? "[O]n a viewscoped bean, a hidden field is added to the form to hold post-back data[;] if that field is not included with the process, then the bean will lose context." This particular problem is prevalent with ui:include recursion especially. Solution (all regarding the p:commandButton or other actionable component):
Ensure that update and process are pointing to a JSF component, not a regular HTML component.
update the next scope up if it breaks (goes out-of-sync with the binding).
Use styleClass's for update (not e.g. PF ID's or #this:#parent kind of stuff), so that jQuery is utilized instead of PF, e.g.: #(.fieldset-class).
process whatever scope is being updated. (This is needed for the post-back data so that the Bean keeps its context for the update...) process="#this" is not needed here, provided that the button is contained by the process value component.
For all buttons without validation wanted, set immediate="true".
If none of the above works (which happened with the Add buttons, probably due to ui:include recursion), set process="#this", immediate="true", and update="#none", and then oncomplete="remoteCommandName();", and have a p:remoteCommand instead with that name with the process, immediate, and update mentioned in the above points.
If none of the above works (which happened with some other buttons, probably due to being yet another layer deeper in the ui:include recursion)... wrap a h:panelGroup around the next c:forEach up and then update the PrimeFaces ID of that in the button itself while keeping its remoteCommand call afterwards, as specified above.
If none of the above works (which happened yet again to me)... Try the following code:
In the p:commandButton(s): oncomplete="$('.FixButtonSC').click();"
In the p:fieldset with a style class of FieldsetSC:
<!-- Fix (hidden) button. -->
<p:commandButton id="FixButton" styleClass="FixButtonSC"
process="#this" update="#(.FieldsetSC)" style="display: none;" />
Hope that helps...