1

I am trying to do a simple validation, if qty received ENTERED is different than qty ordered, a JQuery dialog box should open. For some reason this validation is working only for the first inputField. the code works if I have ONLY one record or row. but, for example if the numbers do not match in row 5 the validation doesn't occur. I will appreciate any help

Buttons:

   <button type="button"  onclick="validateReceived();">Save Shipment</button>
    <apex:commandLink id="savingButton"   action="{!SaveShipment}"  value="Save Shipment"  reRender="theForm" oncomplete="javascript: LoadStuff();"/>

Code page:

   <apex:pageBlockTable value="{!Details}" var="d" id="thePageblock">

      <apex:column headerValue="NRCode" value="{!d.NRCode}"/>     
      <apex:column headerValue="Ordered" >
             <apex:outputText value="{!d.Ordered }" id="ordered" />
      </apex:column>
       <apex:column headerValue="Received">
             <apex:inputText value="{!d.Received}" id="received"  />
       </apex:column>                
 </apex:pageBlockTable >

jquery validation:

   <!--to validate qty received when it doesn't match qty ordered-->
   <div id="dialog" title="Form Validation!" style="display:none;">
    <p>The qty received entered DO NOT match the qty ordered.<br></br>
        Would you like to continue?</p>
   </div>
   <script>

   function validateReceived(){
        var ordered= jQuery('[id$="ordered"]').val();
        var received= jQuery('[id$="received"]').val();
    if( ordered != received){

               $(function() {
                        $("#dialog").dialog({
                        modal: true,
                        resizable: false,
                        buttons: {
                        "Yeah!": function() {
                        jQuery('[id$="savingButton"]').click();
                        $(this).dialog("close");
                        },
                        "No": function() {
                        $(this).dialog("close");
                        }
                        }
                    });
                });


    }else{

      jQuery('[id$="savingButton"]').click();
    }    

   }

5
  • What does you console say? does it show any error,looking at the page I do not see any Jquery reference. – Rao Sep 15 '14 at 22:29
  • rao, the reference is in placed, the code works if I have ONLY one record or row. there is not error. I have updated my question. – Carlos Sep 15 '14 at 22:30
  • @Carlos check the ids. The table part rendering generates several rows and their id's are not ordered or received or maybe not even ending with those words. You probably get null from the selectors, – zokito Sep 15 '14 at 23:30
  • One more thing - val() - Get the current value of the first element in the set of matched elements or set the value of every matched element. – zokito Sep 15 '14 at 23:35
  • zokito, thank you for your response. i used the generic id for ordered and receiving (j_id0:theForm:j_id32:thePageblock:0:ordered) and nothing has changed. – Carlos Sep 15 '14 at 23:53
2

Take a look at the documentation on the jQuery.val() function.

Get the current value of the first element in the set of matched elements or set the value of every matched element.

Your code will only compare the first two elements on the list of elements returned by the selector.

If you want to compare each one then you need to iterate over the lists instead. You can do that different ways. One way is as follows. You may want to wait to show the dialog or save until outside of the loop, though, depending on your requirements.

function validateReceived() {
    var ordered= jQuery('[id$="ordered”]’);
    var received= jQuery('[id$="received”]’);

    for (var i = 0, cnt = ordered.size(); i < cnt; i++) {
        if ( ordered.eq(i).val() != received.eq(i).val() ) {
            $(function() {
                $("#dialog").dialog({
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Yeah!": function() {
                            jQuery('[id$="savingButton"]').click();
                            $(this).dialog("close");
                        },
                        "No": function() {
                            $(this).dialog("close");
                        }
                    }
                });
            });

        } else {
            jQuery('[id$="savingButton"]').click();
        }    
   }
}

You could also wait to display the dialog until after the loop, and just track whether or not there have been mismatches during the loop execution (again, dependent on the requirements):

function validateReceived() {
    var ordered= jQuery('[id$="ordered”]’);
    var received= jQuery('[id$="received”]’);

    var mismatches = 0;

    for (var i = 0, cnt = ordered.size(); i < cnt; i++) {
        if ( ordered.eq(i).val() != received.eq(i).val() ) {
            mismatches++;    
        }
    }
    if (mismatches > 0) {
        $(function() {
            $("#dialog").dialog({
                modal: true,
                resizable: false,
                buttons: {
                    "Yeah!": function() {
                        jQuery('[id$="savingButton"]').click();
                        $(this).dialog("close");
                    },
                    "No": function() {
                        $(this).dialog("close");
                    }
                }
            });
        });
    } else {
        jQuery('[id$="savingButton"]').click();

    }
}
1
  • Peter, thank you so much! i truly appreciate your help. – Carlos Sep 16 '14 at 1:39

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.