page navigation not occuring after enabling button from row select using ajax - jsf-2

I am using JSF 2.0 and primefaces 3.0
I am trying to enable a command(Submit) button after a row select from datatable
<p:datatable ....>
<p:ajax event="rowUnselect" onstart="showImageButton.disable();" />
<p:ajax event="rowSelect" onstart="showImageButton.enable();" />
</p:datatable>
<p:commandButton id="commandbuttonid" widgetVar="showImageButton" action="#{bean.methodreturningapage}" value="Submit"
ajax="false" disabled="true" />
after selecting the rows command button gets enabled but the action method is not firing.

Change the disabled attribute into something like #{bean.buttonDisabled}
take a look on this question
p:commandButton not working when disable=“true” initially
and this one
Re-enabled p:commandButton not firing ajax

Related

Handling an external dialog return with commandLink

After much hair-pulling, I am finally able to open a full html page as a dialog box. I'm doing this with a commandLink as the button needs to be a clickable image.
Unfortunately it seems that commandLink does not handle the "returnDialog" event.
What would be a convenient way do get hold of the data from the dialog in this case ?
<h:form>
<h:commandLink id="pdf" actionListener="#{testBean.viewSelector}">
<h:graphicImage library="images" name="icon_pdf.png" />
<p:ajax event="dialogReturn" etc.. /><!-- This does not work -->
</h:commandLink>
<p:commandButton value="View" icon="ui-icon-extlink" actionListener="#{testBean.viewSelector}">
<p:ajax event="dialogReturn" listener="#{testBean.onPageSelectionSubmitted}" /><!-- This one does but I don't want a button -->
</p:commandButton>
</h:form>
EDIT version + implementation info :
primefaces 5.3
JSF 2.2, mojarra

Primefaces - Ajax - Select Components

I'm using this primafaces example http://www.primefaces.org/showcase/ui/pprSelect.jsf,
but I'm having problem when I put the first p:selectOneMenu as required true, it isn't clean the second p:selectOneMenu when I choose the first option again.
Regards
What happens here is that when you try to "unselect" the first p:selectOneMenu, you end up triggering a validation rule.
You can do what you want by using two remoteCommand tags and JavaScript.
<p:remoteCommand name="makeSelection" process="select" update="suburbs" />
<p:remoteCommand name="clearSelection" process="#this" update="suburbs" >
<f:setPropertyActionListener value="#{null}" target="#{pprBean.city}" />
</p:remoteCommand>
Now you can decide which one to call using a javascript funcion
<p:selectOneMenu id="city" required="true" value="#{pprBean.city}" onchange="selectFunction(this)">
...
function selectFunction(el){
//if el.value is empty you call clearSelection();
//else you call makeSelection();
}
Another common solution is using a commandButton that clears the selection calling something like:
<p:commandButton update="suburbs" (...)>
<f:setPropertyActionListener target="#{pprBean.city}" value="#{null}" />
</p:commandButton>

primefaces command button action invoked after datatable load

I am facing a problem with primefaces command button and datatable. I have two buttons inside the datatable. when I click on the button everytime datatable loaded first and then button action invoked. I just want to avoid the datatable loading when button is clicked.
<p:dataTable id="alphaTable" var="cs" binding="#{challengeSetBean.alphaChallengeSetTable}"
value="#{challengeSetBean.challengeSet}" styleClass="myTable"
style="list-style-type:none;width:600px;border:1px;" >
<p:column id="col" style="width:20px;font-size:12px;padding-left:7px;padding-bottom:7px;padding-top:7px;">
..................
................
</p:column>
<p:column style="width:28px;font-size:9px;padding-left:7px;padding-bottom:7px;padding-top:7px;">
<p:commandButton value="#{msg.updateAccount_reset}" action="#{challengeSetBean.editAnswer()}" immediate="true" rendered="#{!cs.editMode}" process="#this" update="col" >
</p:commandButton>
<p:commandButton value="#{msg.common_save}" action="#{challengeSetBean.saveAnswers()}" rendered="#{cs.editMode}" ajax="true" immediate="true" update="#form"/>
<p:commandButton value="#{msg.cancel}" action="#{challengeSetBean.cancelAnswer()}" rendered="#{cs.editMode}" ajax="true" immediate="true" update="#form"/>
<p:commandButton value="#{msg.common_delete}" action="#{challengeSetBean.deleteAnswer()}" rendered="#{!cs.editMode}" immediate="true" update="#form"/>
</p:column>
</p:dataTable>
Put the bean in the view scope so that it would be instantiated only once on initial GET request and be reused on subsequent postbacks. Remove the binding attribute from the <p:dataTable> so that the view scoped bean won't be recreated due to chicken-egg JSF issue 1492. Now you can just load the challengeSet in the (post)constructor of the bean. It won't be invoked during subsequent postbacks.
See also:
Binding kills backing beans...what am I doing wrong?
How can I pass selected row to commandLink inside dataTable?
Recommended JSF 2.0 CRUD frameworks

How to hide and show p:panel on commandbutton click

i have the following problem:
I'm new to JSF2 and primefaces.
I have a table in a page that will be populated with information, after the user enters a string and clicks a CommandButton. After clicking the button, I want it to be disabled until processing is over.
To disable the CommandButton I'm doing the following;
<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend"
value="Calcular" actionListener="#{calcBean.getTrfs}"
onclick="btnSend.disable()" oncomplete="btnSend.enable()" />
And then I have a panel where I want to show its contents:
<p:panel id="outPanel" widgetVar="outpanel">
#{calcBean.result}
</p:panel>
How can I hide this outpanel when the page loads the first time?
How can I hide it when I click the CommandButton, and only show it again if the processing in my bean is successful?
Thanks.
Solved,
i have to put
closable="true" toggleable="true"
attributes in p:panel... Thanks
I have checked following panel hide and show using p:commandButton in JSF,
please try following methods in JSF,
<p:panel id="button_panel" widgetVar="testPanel" closable="true" toggleable="true">
<h1>Testing</h1>
</p:panel>
<p:commandButton onclick="PF('testPanel').show()" value="Show Panel" type="button"/>
<p:commandButton onclick="PF('testPanel').hide();" value="Hide Panel" type="button"/>
to show the panel after the ajax request is finished try this:
<p:commandButton update=":outPanel" widgetVar="btnSend" id="btnsend"
value="Calcular" actionListener="#{calcBean.getTrfs}"
onclick="btnSend.disable()" oncomplete="btnSend.enable();outPanel.show();" />

How to refresh page in JSF on selectOneMenu selection?

I have a page containing a PrimeFaces (2.2.1) Editor component, a Refresh button and a selectOneMenu, whose selection affects the contents of the Editor, as follows:
<p:editor id="uploadedText" value="#{facilityDataUploadBean.uploadedText}"
width="600" height="180" disabled="true" controls="" />
<h:commandButton value="Refresh" immediate="true" />
<h:selectOneMenu id="skipLines" styleClass="dropdown"
value="#{facilityDataUploadBean.skipLines}">
<f:selectItems value="#{facilityDataUploadBean.skipLinesList}" />
<f:ajax listener="#{facilityDataUploadBean.importParameterChanged}" />
</h:selectOneMenu>
facilityDataUploadBean.importParameterChanged updates facilityDataUploadBean.uploadedText. After changing the selectOneMenu value, the operator presses the Refresh button to refresh the page, including the contents of the p:editor. (I cannot simply refresh the p:editor using AJAX, because it doesn't re-render correctly, at least in PF 2.2.1.)
It seems like I ought to be able to accomplish the page refresh automatically when the selectOneMenu value is changed, but I've been unable to come up with a combination of attributes and events that will do that. I've tried various combinations of onchange="submit();", immediate="true" and valueChangeListener on the selectOneMenu, as well as execute="#all/#form", render="#all/#form" on the f:ajax event, all to no avail. My current workaround is to display a message asking the user to press the Refresh button whenever they change the selectOneMenu selection - pretty hokey.
Invoke window.location.replace(window.location.href) rather than submit() in the onchange event, as in:
<h:selectOneMenu id="skipLines" ... onchange="window.location.replace(window.location.href);">
<f:selectItems ... />
<f:ajax ... />
</h:selectOneMenu>
please try the onchange="window.location.reload();" approach like:
<h:selectOneMenu id="skipLines" ... onchange="window.location.reload();">
<f:selectItems ... />
<f:ajax ... />
</h:selectOneMenu>
This works just fine in my environment (GF 3.1.1, PF 3.2) but please be aware that there is the possibility of interrupting some ajax functinality.
Hope this helpes, have Fun!

Resources