Execution order of Javascript Events in JSF Managed Bean [duplicate] - jsf

This question already has answers here:
Execution order of events when pressing PrimeFaces p:commandButton
(2 answers)
Closed 7 years ago.
I have a primefaces datatable with a <p:rowEditor />. The Logic of my process is when i click on a button it's suppose to:
Jump to the last page of the Datatable
Refresh the table
Click on the edit button of the last row
in the footer i implemement a commandButton and remoteCommand looking like:
<f:facet name="footer">
<p:remoteCommand name="rctype" update="typeDT"
actionListener="#{myView.onNewType}" />
<p:commandButton id="btnNewType" ajax="true" onclick="rctype()"
update="typeDT" icon="ui-icon-plus" title="New Type"
value="New Type" >
</p:commandButton>
</f:facet>
my Bean looks like :
public void onNewType() {
try {
...
RequestContext.getCurrentInstance().execute("PF('widgettypeDT')
.paginator.setPage(PF('widgetinitiatorDT').paginator.cfg.pageCount - 1)");
RequestContext.getCurrentInstance()
.execute("jQuery('.typeClass')
.find('span.ui-icon-pencil').last().click();");
} catch() {}
}
But unfortunatly the Click Event always occur before the Jump Event.
How can i control the Execution order of my Javascript Events in my Managed Bean?

The solution is simple. Call one javascript function on the client and do both in there. Or do both in one RequestContext.getCurrentInstance().execute(...)

Related

p:selectBooleanCheckBox does not work inside a p:dialog [duplicate]

This question already has answers here:
Can you nest html forms?
(21 answers)
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
(2 answers)
Closed 6 years ago.
I'm using PrimeFaces 5.3 with the following code:
<p:dialog id="dlg1" appendTo="#(body)" header="Confirm Dialog" widgetVar="dlg1" modal="true">
<h:form id="dialogform">
<h:outputText id="confirmlabel" value="Are you Sure you want to #{reportRunnerNamedBean.currentCommand} ?" />
<br/>
<center>
Check to send only missed emails:<p:selectBooleanCheckbox id="sendOnlyMissedBox" value="#{reportRunnerNamedBean.sendMissedOnly}"></p:selectBooleanCheckbox><br/>
<p:commandButton id="yesButton" value="Yes" action="#{reportRunnerNamedBean.runCurrentCommand()}" onstart="startWait();PF('waitDialog').show();" oncomplete="PF('waitDialog').hide();stopWait();" onclick="PF('dlg1').hide();" process="#form"/>
<p:commandButton id="noButton" process="#this" value="No" onclick="PF('dlg1').hide();"/>
</center>
</h:form>
</p:dialog>
No matter what, the backing bean value for the sendMissedOnly is set to false. I have confirmed this by attaching a debugger. I have even tried adding ajax to the box, it is still false every time, no matter if it is checked or not. Does p:selectBooleanCheckbox just not work in a dialog?
I figured this out. It was because the dialog was in an form. It seems that when a dialog is in a form , and you have a form within the dialog itself, the component will not be processed. It seems JSF/primefaces does not like multiple layers of forms or dialogs defined within forms. If you are having a similar issue, makes sure your dialog is defined outside any form. Moving a dialog can cause paths to components to change. the easiest way to resolve that is to use the primefaces handy p:component tag like this update=":#{p:component('compoment_name')}" > that will make it find it no matter where in the tree the component occurs.

p:commandButton can't to update p:panel [duplicate]

This question already has an answer here:
How to update panel from datatable [duplicate]
(1 answer)
Closed 7 years ago.
I'm using PF 5.3, with JSF 2.2
I have a p:commandButton which exists in one of p:column of a p:dataTable. I have a panel outside the dataTable and I want it to be updated once the commandButton is clicked, but this didn't work.
xhtml sample:
<h:form id="register_edit_student" enctype="multipart/form-data" >
<p:dataTable var="students" value="#{generalPresentation.students}">
<p:column headerText="Edit">
<p:commandButton update="updateStudent" value="Edit" action="#{teacherPresentation.assignEditableStudent(students)}" />
</p:column>
</p:dataTable>
<p:panel id="updateStudent">
</p:panel>
</h:form>
My requirement is to update the "updateStudent" p:panel.
Once I ask the p:commandButton to update the panel (update="updateStudent") the page design crashed and all controls disappeared.
I was reading in the internet the commandButton of a column in a dataTable cannot update anything outside the dataTable, so the question, is there a solution or work around?
Thanks
You have three options to solve this:
add prependId="false" to your form,
Prepend the form id in your reference: update=":register_edit_student:updateStudent" or
move your panel outside of the form element.
Note: The first option should be used rarely and is known to cause issues with plain JSF.

JSF backing bean triggered when not called [duplicate]

This question already has answers here:
Outcommented Facelets code still invokes EL expressions like #{bean.action()} and causes javax.el.PropertyNotFoundException on #{bean.action}
(3 answers)
Closed 7 years ago.
I have this button in a .xhtml:
<p:commandButton id="openDialog"
value="#{msg.CreateMultiple}"
onclick="PF('dialogLocations').show();" title="View"
type="button">
</p:commandButton>
What it is supposed to do, is to open the dialog dialogLocations which has the next code:
<p:dialog header="#{msg.CreateMultiple}" id="dialogLocations"
widgetVar="dialogLocations" modal="true"closable="true"
dynamic="true" closeOnEscape="true">
<h:form>
<p:commandButton id="acceptMultiple_button" value="#{msg.Create}"
action="#{locationCreateBean.createMultiple(true)}"
styleClass="btn-green internal-margin-left" update="#form">
</p:commandButton>
<p:commandButton id="cancelMultiple_button"
styleClass="btn-red internal-margin-left"
onclick="PF('dialogLocations').hide();" value="#{msg.Cancel}"
title="View" type="button">
</p:commandButton>
</div>
</h:panelGroup>
</h:form>
</p:dialog>
The dialog has some inputs also to use in the bean.
My problem is that, when I click the button "openDialog" the dialog opens and the method locationBean.createMultiple(true) is being called, which is the action of the button "acceptMultiple_button" .
Shouldn't the action of the button be triggered when I click the button?
Thanks.
Solved it. It was a comment on the xhtml surrounded by <!-- --> that has the call to the method. I thought that in a comment wouldn't call the function. But it seems sometimes it calls a comment anyway.
Thanks for the comments.

a4j:commandButton's action is never triggered when it's inside a rich:panel with rendered tag [duplicate]

This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Closed 8 years ago.
Here is the simplified version of my xhtml code, I can't figure out why my save1 commandButton doesn't work while save2 works:
<rich:panel id="table_panel">
<h:form>
<rich:panel rendered="#{bean.showPanel}">
<a4j:commandButton id="save1" value="Save"
action="#{bean.executeAction()}">
</rich:panel>
<rich:panel>
<a4j:commandButton id="save2" value="Save2"
action="#{bean.executeAction()}">
</rich:panel>
</h:form>
</rich:panel>
When click a button, it will update showPanel value to true in backend and re-render *table_panel*,
then commandButton save1 will show up, but even if it show up, the action executeAction()
will never be invoked after click (never enter into my breakpoint in the method). However, the commandbutton save2 can always act normally.
The only difference for those two buttons is their wrapper rich:panel, one is always there while
another is displayed after some UI action as it has rendered="#{bean.showPanel}" attribute. I didn't see any javascript errors on firebug.
I would appreciate any ideas, thanks in advance!
Try putting execute="#this" explicitly in the commandButton.
Have you tried immediate="true", it might narrow down the issue in my opinion:
<a4j:commandButton id="save1" value="Save" immediate="true"
action="#{bean.executeAction()}">

JSF Delete entity on DataTable with p:dialog [duplicate]

This question already has answers here:
p:commandbutton action doesn't work inside p:dialog
(4 answers)
Closed 6 years ago.
I'm currently working on a CRUD form and is now working on the last part which should be the most easiest - delete. But I want to show a dialog before the user can do the actual deletion. And this is where I'm having problem with Primefaces 3.4. For some reason I cannot set the action in the button inside the p:dialog, ajax=false failed. So here's what I did:
<p:column headerText="#{msgs['action.delete']}"
styleClass="a-center">
<p:commandButton icon="ui-icon-trash"
oncomplete="confirmation.show()">
<f:setPropertyActionListener
target="#{marketingCodeBean.marketingCode}" value="#{code}"></f:setPropertyActionListener>
</p:commandButton>
</p:column>
The Dialog:
<p:confirmDialog id="confirmDialog"
message="#{msgs['message.marketingCode.confirmDelete']}"
header="#{msgs['common.confirmDelete']}" severity="alert"
widgetVar="confirmation">
<p:commandButton id="confirm" value="#{msgs['common.yes']}"
oncomplete="confirmation.hide()" update=":form:mktgCodeTable"
actionListener="#{marketingCodeBean.remove}" />
<p:commandButton id="decline" value="#{msgs['common.no']}"
onclick="confirmation.hide()" type="button" />
</p:confirmDialog>
I'm aware that the actionListener should not be use for business action, but I can't think of a workaround given the datatable and the dialog. Any idea on how I can make ajax=false in p:commandButton inside p:confirmDialog?
Once rendered, the dialog's HTML output is by some onload JavaScript relocated to end of HTML <body> in order to achieve the best cross-browser compatible overlay/positioning. However, this thus means that if it was placed inside a <form>, it would not be in a <form> anymore and synchronous (non-ajax) requests would then not work anymore. This is not exactly an action vs actionListener issue.
The <p:dialog> (and <p:confirmDialog> as you seem to be actually using) should have its own <h:form> component.
<h:form>
<p:dataTable>
...
</p:dataTable>
</h:form>
...
<p:confirmDialog>
<h:form>
...
</h:form>
</p:confirmDialog>

Resources