0

I need to validate the Account.Unit__c field using some jquery dialog box.But I am having difficulty in getting visual force component Id in jquery.

Update I followed Keith C recommendation and made changes accordingly but I am getting unit value as undefined in alert statement.Someone please look into my code.

<apex:page standardController="Account">
<apex:form>
<apex:pageBlock title="Account Edit" mode="Edit">
    <apex:pageBlockButtons id="theButtons">
        <apex:commandButton value="Save" onclick="return validate()"/>
    </apex:pageBlockButtons>
    <apex:pageBlockSection title="Information">
        <apex:inputField value="{!Account.Name}" id="Unit"/>
    </apex:pageBlockSection>
 </apex:pageBlock>
 <apex:actionFunction action="{!save}" name="saveJavaScriptFunction"/>
</apex:form>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
 function validate(){ 
var j$ = jQuery.noConflict();
var unit = j$("input[id$='Unit']").val();  
alert(unit);
if (unit == '') {  
    j$('<div></div>').dialog({
        resizable: false,
        height:140,
        modal: true,
        open: function() {
            var markup = 'No Unit Selected. Do you want to add one?';
            j$(this).html(markup);
        },
        title: "Confirmation",
        buttons: {
            "Yes": function() {
                j$(this).dialog("close");
                // Do nothing so user can add
            },
            "No": function() {
                j$(this).dialog("close");
                // Invoke save
                saveJavaScriptFunction();
            }
        }
    });
    return false; 
} else {
    return true;
 }
}
 </script>
  </apex:page>
1

1 Answer 1

4

I don't think your problem is with the ID matching. The page below (a cut down version of yours without the controller extension and a few changes) displays the dialog when the unit field is empty.

The return values of the dialog button clicks are unconnected to the original "Save" button click so any action you want performing has to be done in JavaScript code. The code below has a saveJavaScriptFunction function defined via an apex:actionFunction and that invokes the controller save method when "No" is clicked.

<apex:page standardController="Account">
<apex:form>
    <apex:pageBlock title="Account Edit" mode="Edit">
        <apex:pageBlockButtons id="theButtons">
            <apex:commandButton value="Save" onclick="return validate()"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Information">
            <apex:inputField value="{!Account.Name}" id="Unit"/>
        </apex:pageBlockSection>
   </apex:pageBlock>
   <apex:actionFunction action="{!save}" name="saveJavaScriptFunction"/>
</apex:form>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<script>
function validate(){ 
    var j$ = jQuery.noConflict();
    var unit = j$("input[id$='Unit']").val();  
    if (unit == '') {  
        j$('<div></div>').dialog({
            resizable: false,
            height:140,
            modal: true,
            open: function() {
                var markup = 'No Unit Selected. Do you want to add one?';
                j$(this).html(markup);
            },
            title: "Confirmation",
            buttons: {
                "Yes": function() {
                    j$(this).dialog("close");
                    // Do nothing so user can add
                },
                "No": function() {
                    j$(this).dialog("close");
                    // Invoke save
                    saveJavaScriptFunction();
                }
            }
        });
        return false; 
    } else {
        return true;
    }
}
</script>
</apex:page>
3
  • I am just checking the value of unit in alert statement and its value is undefined.
    – sfdc
    May 5, 2014 at 10:57
  • @sf.dev I just took exactly the code you've changed your question too and when the Account Name in the page is blank the alert echoed that (an empty string) and when I entered a value the alert echoed that too. That was in Chrome. So the code is working for me.
    – Keith C
    May 5, 2014 at 13:01
  • Thanks @Keith C.I had to update unit to var unit = document.getElementById("thePage:theForm:theBlock:theSection:Unit").value; and it fixed my issue.
    – sfdc
    May 5, 2014 at 18:45

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .