GetOrgChart value not updating in jquery validator

Question

I am trying to update element in GetOrgChart and for that I am doing following

Html

<form id="one">
    <input type="text" name="aaa">
    <input type="text" name="bbb">
    <input type="submit" name='submitform' value="submit">
</form>
<br> 
<div id="people"></div>

JavaScript

var oneForm = $("#one");
$("#people").getOrgChart({  
        clickEvent: function( sender, args ) {
            alert('args.id value outside validate '+args.id);

            oneForm.show();
            oneForm.validate({
                 // to add new area for team
                 rules: {
                     aaa: {
                         required: true,
                         minlength: 3
                     },
                     bbb: {
                         required: true,
                         minlength: 3
                     }
                 },
                 submitHandler: function (form) {
                     alert('args.id value inside validate '+args.id);
                     oneForm.hide();
                     return false;
                 }
             })

            //return false; //if you want to cancel the event
        },

         primaryColumns: ["Name", "Type"],
         linkType: "M",
         editable: false,
         zoomable: false,
         movable: true,
         gridView: true,

        dataSource: [
            { id: 1, parentId: -1, Name: "Amber McKenzie", Title: "CEO", Address: "MyAddress"},
            { id: 2, parentId: 1, Name: "Ava Field", Title: "CTO", Phone: "+359 888 888 888"},
            { id: 3, parentId: 1, Name: "Evie Johnson", Title: "CFO", Car: "BMW"}]
    });

Now just click on the chart element and than submit form you will see that

value of args.id not changing for validate function after first click

JsFiddle

Answer 1

your problem seems to be the scope of the variable "args".

It variables "born" in the anonymous function called on clickEvent and it exists only inside that event.

submitHandler is an handler managed by another inner function; so it is outside the scope of clickEvent.

So the solution is to declare (outside both functions a variables with a page scope). Then, on click event, assegn it the id of args. In this way you can use it inside submit event too.

In short (I commented with "//---" lines I added):

var oneForm = $("#one");
var globalArgsId; //--- Declare "global" variable
$("#people").getOrgChart({  
        clickEvent: function( sender, args ) {
            alert('args.id value outside validate '+args.id);
            globalArgsId = args.id; //--- Write value to global variable

            oneForm.show();
            oneForm.validate({
                 // to add new area for team
                 rules: {
                     aaa: {
                         required: true,
                         minlength: 3
                     },
                     bbb: {
                         required: true,
                         minlength: 3
                     }
                 },
                 submitHandler: function (form) {
                     alert('args.id value inside validate '+args.id);
                     alert('args.id value inside validate '+globalArgsId); //--- Access to global variable
                     oneForm.hide();
                     return false;
                 }
             })

            //return false; //if you want to cancel the event
        },

         primaryColumns: ["Name", "Type"],
         linkType: "M",
         editable: false,
         zoomable: false,
         movable: true,
         gridView: true,

        dataSource: [
            { id: 1, parentId: -1, Name: "Amber McKenzie", Title: "CEO", Address: "MyAddress"},
            { id: 2, parentId: 1, Name: "Ava Field", Title: "CTO", Phone: "+359 888 888 888"},
            { id: 3, parentId: 1, Name: "Evie Johnson", Title: "CFO", Car: "BMW"}]
    });

Hope it helps... :)