Display dialog window if some criteria is not met in JSF form

Question

I'm trying to implement JSF button with AJAX which form with AJAX if some criteria is not met. I tried this example:

<h:form id="paymentform" enctype="multipart/form-data" x:data-form-output="form-output-global" x:data-form-type="contact" class="rd-mailform text-left">

<h:commandButton id="buy" class="btn btn-primary" type="submit" value="Put" action="#{dashboard.calculateProcessing}"  >
    <f:ajax render="@form" execute="@form" x:data-toggle="modal" x:data-target="#demoModal"/>  // if #{dashboard.amount} <= 0 call modal dialog 
</h:commandButton>

<div class="modal fade" id="demoModal" role="dialog">
.....
</div>

</h:form>



@Named
@SessionScoped
public class Dashboard implements Serializable {

    private static final long serialVersionUID = -2363083605115312742L;

    private double amount;

    public double getAmount() {
        return amount;
    }

    public void setAmount(double amount) {
        this.amount = amount;
    }
}

If I edit the button this way:

<h:commandButton id="buy" class="btn btn-primary" type="submit" value="Put" action="#{dashboard.calculateProcessing}" x:data-toggle="modal" x:data-target="#demoModal" >

The dialog is display and the form is submitted.

But I can't find a solution how to not submit the form if some criteria from the Bean is not met. Can you guide me how to find a solution?

<Removed blatant begging for help, see edits>

Answer 1

You want to execute an f:ajax based on a criteria in your bean. Basically the f:ajax should get rendered when the criteria is true and else then not. Every JSF component has a rendered value.

Your code should look like this:

<h:commandButton id="buy" class="btn btn-primary" type="submit" value="Put" action="#{dashboard.calculateProcessing}"  >
    <f:ajax render="@form" execute="@form" x:data-toggle="modal" x:data-target="#demoModal" rendered="#{dashboard.amount <= 0}"/>
</h:commandButton>

This also can be done with more than one f:ajax like this:

<h:commandButton>
    <f:ajax render="@form" rendered="#{bean.condition}" />
    <f:ajax execute="@form" rendered="#{bean.int < 0}" />
    <f:ajax action="#{bean.action}" rendered="#{bean.property == null}" />
</h:commandButton>

Basically if a rendered attribute is false it will not result in the HTML the client receives. More about rendered

You can also use jstl tags to define if a component gets rendered. Use like this:

<h:commandButton>
    <c:if test="#{bean.condition}>
        <!-- f:ajax here-->
    </c:if>

    <c:choose>
        <c:when test="#{bean.condition}">
            <!-- f:ajax here-->
        </c:when>

        <c:otherwise>
            <!-- f:ajax here-->
        </c:otherwise>
    </c:choose>
</h:commandButton>

For calling dynamic actions in for example a commandButton see this.