CODEWITHSUNDEEP
javascriptjqueryhtmljsf
Lampard
Lampard

Reputation: 404

Use jQuery (or JSF way) to prevent h:commandButton submit

I have a JSF page(already register jQuery in header) contains indicator, reason and a h:commandButton used for submit h:form. The indicator has two values Y and N.

The logic I try to build is when page load and indicator = Y(in jQuery below is indicator.data("prev") == 'Y'), if user toggle from Y to N but NOT type in any word in reason, even the user click the h:commandButton, the form should NOT submitted.

In short, before submit, it should check status of indicator's current and previous value relation is turn from Y to N(I set this logic part in jQuery script section), also need to check reason is not empty. I guess to implement such checking operations may need to re-organize code structure.

Below is my current code which missing this logic, never prohibit a submit and cause conflict on backing bean, . As I am new to jQuery and JSF, could someone tell me how to prevent this submit ? Thank you.

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" 
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">

<h:head>
    <title>myPage</title>
    <h:outputScript name="jquery.js" target="head"/>
</h:head>

<f:event type="preRenderView" listener="#{myPage.getmyPage}" />

<h:body>
    <f:view>
        <h:form name ="myPage" id ="myPage">        
            <table>
            <tr>
                <td align="left">
                    <h:selectOneMenu id="indicator" value="#{myPage.indicator}">
                        <f:selectItem itemValue="Y" itemLabel="YES" />
                        <f:selectItem itemValue="N" itemLabel="NO" />                           
                    </h:selectOneMenu>
                </td>
                <td>
                    <h:inputTextarea id="reason" value="#{myPage.reason}">
                    </h:inputTextarea>
                </td>                   
                <td>
                    <h:commandButton id="submit" value="Submit" 
                        onclick="if (! confirm('Do you want to update?')) return false" action="#{myPage.update}">
                    </h:commandButton>
                </td>
            </tr>
            </table>
        </h:form>
    </f:view>


    // TODO: I want to add the logic to prevent h:commandButton submit(e.g disable the button) when reason is empty 
    // and indicator value turn from 'Y' to 'N', the jQuery section reflect the case when toggle from 'Y' to 'N', 
    // reason editable, as it need to consider two elements(indicator value/ reason value) at the same time, 
    // how should the code look like ?

    <script type="text/javascript">
        $(window).load(function() {        
            var indicator = $(document.getElementById("myPage:indicator"));
            // set the indicator pre data
            indicator.data("prev", indicator.val());

            // Handle initial status of indicator, when page load, if it is 'Y' open reason field
            // if it is 'N' disable reason field, 
            if(indicator.data("prev") == 'Y') {
                $(document.getElementById("myPage:reason")).prop('disabled', false);
            } else {
                $(document.getElementById("myPage:reason")).prop('disabled', true);
            }

            // Handle change status of indicator, 
            indicator.change(function(data){
                var jqThis = $(this);
                var after_change = jqThis.val();
                var before_change = jqThis.data("prev");
                if(before_change == 'Y' &amp;&amp; after_change == 'N'){
                    $(document.getElementById("myPage:reason")).prop('disabled', false);                        
                }
            });
        });
    </script>});
</h:body>

Upvotes: 1

Views: 2371

Answers (1)

Artur Skrzydło
Artur Skrzydło

Reputation: 1155

Basically you could implement some logic to disable your commandbutton depend on some conditions. For instance :

<h:commandButton id="submit" value="Submit" disabled=#{myPage.isSubmitButtonDisabled()} onclick="if (! confirm('Do you want to update?')) return false" />

Then in backing bean you should implement logic which you want to achieve like :

public boolean isSubmitButtonDisabled() { return indicator.equals("N") && reason.isEmpty(); }

Finally to process changes on indicator selection you should add onchange="submit()" to your <h:selectOneMenu> component. Logic for button enabling/disabling could be further expanded with reaction to typed text in reason text area with similiar manner, for instance by addig onkeyup="submit()". Of course this would require to use render attribute to prevent pafe refresh. This is of course some way of do that, but it could point you to solution which satisfy you

Upvotes: 1

Related Questions