CODEWITHSUNDEEP
javascriptjsfprimefaces
Steve W
Steve W

Reputation: 97

Primefaces - Executing Javascript only after validation passes but before action method is called

I have a Primefaces dialog with a form where a user enters some data. After hitting Save, I need the data validated (in the standard JSF way) and if it passes, then some Javascript needs to be called to be able to show an indeterminate progress bar and to hide the form buttons - this is because the action method can take several seconds to complete due to some heavy backend processing.

I know there is args.validationFailed which can be used in an oncomplete but this would only work once the action method has finished which is too late.

At the moment the javascript obviously gets executed when the button is clicked, but i'm unsure how to proceed. Is there any way of kicking off the referPressed function only once validation is passed but before the action method is called?

JSF snippet

<p:commandButton value="Refer" actionListener="#{manageTrickleData.setLogToReferred}" 
onclick="referPressed();" update="subview1:mainForm:tabs:tablePanel2 
subview1:mainForm:tabs:tablePanel commentMessage" styleClass="dialogButtons">
</p:commandButton>

Javascript

function referPressed() {
    $('.dialogButtons').hide(); 
    $('.ui-progressbar-indeterminate').show();  
}

Upvotes: 2

Views: 1673

Answers (2)

djmj
djmj

Reputation: 5544

As stated in the comments this is not possible since validation happens server side.

You could also use ajax to enforce validation on change and disable the submit button if not valid. 

<p:inputText value="#{bean.entity.comment}">
    <p:ajax event="change" update="btnSave"/>
</p:inputText>

<p:commandButton id="btnSave" disabled="#{bean.entity.comment ne null}" onStart="referPressed();" onComplete="hideProgressBar();"/>

To make this more flexible you can invoke bean validation programmatically or do custom validations like:

<p:commandButton id="btnSave" disabled="#{not bean.isValid(bean.entity)}" />

Those solutions show the problems of JSF validating server side. We programmers would need JSF to do two requests to the server and let us hook in after the validation phase adding a new ajax callback state like onEvent="if (data.status == 'validate') { }; or for primefaces onValidate to solve this.

Upvotes: 0

BalusC
BalusC

Reputation: 1108632

You can use <p:remoteCommand> for that. Just let the <p:commandButton> invoke it on complete without validation errors and then let the <p:remoteCommand> invoke the desired action.

<p:commandButton value="Refer" styleClass="dialogButtons"
    update="commentMessage"
    oncomplete="if (!args.validationFailed) { referPressed(); setLogToReferred(); }">
</p:commandButton>
<p:remoteCommand name="setLogToReferred"
    action="#{manageTrickleData.setLogToReferred}"
    update="subview1:mainForm:tabs:tablePanel2 subview1:mainForm:tabs:tablePanel">
</p:remoteCommand>

Upvotes: 4

Related Questions