0

I have an visualforce page in which i am rerendering the apex form element on dropdown change. This page works fine until their is an validation error ( i am validating with jquery validate). Once validation throws an error, next post back works fine but after that no ajax calls are executed.

Any help would be appreciate.

           <apex:form id="frmMain" onsubmit="removeSpanForm();" styleClass="frmMain form-1">

                    <fieldset>
                        <ul>
                            <li class="" id="countryclass">
                                <p>
                                <apex:actionRegion >
                                    <apex:selectList title="Select Country" id="ddlCountry" value="{!usableAccount.Country}"  styleClass="ddlCombo" size="1" >
                                      <apex:selectOptions value="{!countries}"/>
                                      <apex:actionSupport event="onchange" action="{!setCountryAndStateData}" rerender="frmMain" />
                                    </apex:selectList>
                                 </apex:actionRegion>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="Trading Name (Required)" id="txtTradingName" value="{!usableAccount.Name}" />   
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="Legal Business Name" label="Legal Bussiness Name" value="{!usableAccount.LegalName}"/>
                                </p>
                            </li>
                            <li style="display:{!IF(usableAccount.Country == 'Australia', 'block', 'none')}">
                                <p>
                                    <apex:inputText title="ABN (Required)" id="txtAbn" value="{!usableAccount.ABN}" />
                                </p>
                            </li>
                            <li style="display:{!IF(usableAccount.Country == 'Australia', 'block', 'none')}">
                                <p>
                                    <apex:inputText title="ACN" id="txtACN" label="ACN" value="{!usableAccount.ACN}"  />
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="Region" label="Region" value="{!usableAccount.Region}" />
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="Address (Required)" id="txtAddress1"  value="{!usableAccount.Address1}"/>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="Address2" value="{!usableAccount.Address2}"/>
                                </p>
                            </li>
                            <li>
                                <p>
                                    <apex:inputText title="City/Suburb (Required)" id="txtCitySubrub" label="City/Suburb" value="{!usableAccount.Suburb}"/>
                                </p>
                            </li>
                            <li>
                                <p class="width-half stateClass">
                                    <apex:outputPanel id="divStates">
                                        <apex:selectList id="states" value="{!usableAccount.State}" styleClass="ddlStates ddlCombo" size="1" >
                                          <apex:selectOptions value="{!states}"/>
                                        </apex:selectList>
                                    </apex:outputPanel>
                                </p>
                                <p class="width-half postcodeClass">
                                    <apex:inputText title="PostCode (Required)" id="txtPostCode" label="Post Code" value="{!usableAccount.Postcode}"/>
                                </p>
                            </li>
                            <li class="box-submit">
                                <apex:commandButton id="btnSubmit" title="State__c" action="{!submit}" value="Next"/>
                                <apex:commandLink styleClass="link-1"  id="btnBackToContactInfo" action="{!backToContactInfo}" value="Back"/>
                            </li>
                        </ul>
                    </fieldset>

            </apex:form>
<script type="text/javascript">      
    $j = jQuery.noConflict();


    function removeSpanForm()
    {
    /*
        if('[id$=frmMain]') {
            $j('.field-validation-error').remove();
        $j('input').removeClass('input-validation-error');
        $j('select').removeClass('input-validation-error');
        }
        */
    }

    function removeSpan(){
        /*
        $j('.field-validation-error').remove();
        $j('input').removeClass('input-validation-error');
        $j('select').removeClass('input-validation-error');
        return true;
        */
    }

    function setFormValidations(){
        /*
        handlePageMes();
         $j('[id$=frmMain]').validate({
            errorClass: "field-validation-error",
            errorElement: "span",
            errorPlacement: function(error, element) {
                    error.insertAfter(element);
                },
            highlight: function (element) { // hightlight error inputs
                    $j(element).addClass('input-validation-error');

            },
            unhighlight: function (element) { // revert the change done by hightlight
                $j(element).removeClass('input-validation-error');
            },
             messages:
                {
                    'companyInfo:layout:frmMain:ddlCountry': {
                        required: '<span class="input-validation-error " style="display:none !important">Email is required.</span>'
                    },

                    'companyInfo:layout:frmMain:txtTradingName': {

                        required:  '<span class="input-validation-error cPassword" style="display:none !important">Password is required.</span>'
                    },
                    'companyInfo:layout:frmMain:txtAddress1': {

                        required: '<span class="input-validation-error cPassword" style="display:none !important">Confirm Password is required.</span>'
                    },
                }
        });

        $j('[id$=ddlCountry]').rules("add",{ required: true });
        $j('[id$=txtTradingName]').rules("add",{ required: true });
        $j('[id$=txtAddress1]').rules("add",{ required: true });
        */
    }

    $j(document).ready(function(){



        setFormValidations();

        $j(".field-validation-error" ).live( "mouseover", function() {
            $j(this).find('.input-validation-error').attr("style", "display:block !important");
        });

        $j(".field-validation-error" ).live( "mouseout", function() {
            $j(this).find('.input-validation-error').attr("style", "display:none !important");
        });




        //$j('[id$=txtAbn]').rules("add",{ required: true });


        //$j('[id$=txtCitySubrub]').rules("add",{ required: true });
        //$j('[id$=states]').rules("add",{ required: true });
        //$j('[id$=txtPostCode]').rules("add",{ required: true });

         $j(".frmMain ").live( "submit", isValidForm);
    });

    function isValidForm()
    {
    alert($j('[id$=txtTradingName]').val());
        var bValid = true;
        if($j.trim($j('[id$=txtTradingName]').val()) == '')
        {
        alert();
            return false;
        }
        return bValid;
    }

</script>
<style>

    .ddlStates {
        width: 127px;
    }
    .ddlStates option {
        width: 127px;
    }
</style>    

0

A conventional way of adding JQuery listeners to DOM objects is to use the ready function. But that only runs when the page loads; it does not run when parts of the page are updated via the re-render mechanism. But there is an oncomplete available where you can call some JavaScript code when the re-render has completed..

So the general solution to this problem is to factor out the JQuery initialisation into a separate function and call that function from both places:

<apex:actionSupport event="onchange" action="{!setCountryAndStateData}"
    rerender="frmMain" oncomplete="addJQueryLogic()" />

function addJQueryLogic() {
    setFormValidations();

    $j(".field-validation-error" ).live( "mouseover", function() {
        $j(this).find('.input-validation-error').attr("style","display:block !important");
    });

    ...
}

$j(document).ready(addJQueryLogic);

The title of your question doesn't match the detailed information. One or other should probably be changed.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.