CODEWITHSUNDEEP
javascriptjquery
IrfanRaza
IrfanRaza

Reputation: 3058

Reference issue with Javascript

I have an array of objects cached on client side using JS array. 

var scannerDictionary = new Array();            //Holds all scanners unmodified
var modifiedScannerDictionary = new Array();    //Holds all scanners with modified values

The properties of each object is set/changed using GUI and updated in the object. Each object contains list of InputParameters (array of Parameter class containing Name, Value and other members).

Please have a look on GUI.

enter image description here enter image description here enter image description here enter image description here

Below is the code i used to render the controls -

function renderControls(scannerId) {
        var currentScanner = modifiedScannerDictionary[scannerId];

        //Render Input Parameters
        $("#tblInputCriteria").find('tr:gt(5)').remove();
        for(var i=0;i<currentScanner.InputParameters.length;i++) {
            var propType = currentScanner.InputParameters[i].DataType;
            var inParName = currentScanner.InputParameters[i].Name;

            switch(propType) {
                case 0: //Number
                    var eRow1 = $("#tblInputCriteria").find('#emptyNumRow').clone();
                    $(eRow1).removeClass('hidden').attr('id', 'Row_'+currentScanner.InputParameters[i].Name);
                    $(eRow1).appendTo($('#tblInputCriteria'));
                    var prop1 = $(eRow1).find('#InNumPropName');
                    $(prop1).attr('id', 'InNumPropName_'+currentScanner.InputParameters[i].Name);
                    var propName1 = currentScanner.InputParameters[i].Name;
                    $(prop1).html(propName1);
                    var propVal1 = $(eRow1).find('#InNumPropValue');
                    $(propVal1).attr('id', 'InNumPropValue_'+currentScanner.InputParameters[i].Name);
                    $(propVal1).val(currentScanner.InputParameters[i].Value);
                    $(propVal1).blur(function () {
                        if(!ValidateNumber(this, propName1)) {
                            alert('Value should be numeric in ' + propName1);
                            setTimeout(function() {$(propVal1).focus();}, 100);
                        }else {
                            UpdateData(currentScanner.Id, propName1, $(propVal1).val());
                        }
                    });

                    break;
                case 1: //String
                    var eRow2 = $("#tblInputCriteria").find('#emptyStrRow').clone();
                    $(eRow2).removeClass('hidden').attr('id', 'Row_'+currentScanner.InputParameters[i].Name);
                    $(eRow2).appendTo($('#tblInputCriteria'));
                    var prop2 = $(eRow2).find('#InStrPropName');
                    $(prop2).attr('id', 'InStrPropName_'+currentScanner.InputParameters[i].Name);
                    var propName2 = currentScanner.InputParameters[i].Name;
                    $(prop2).html(propName2);
                    var propVal2 = $(eRow2).find('#InStrPropValue');
                    $(propVal2).attr('id', 'InStrPropValue_'+currentScanner.InputParameters[i].Name);
                    $(propVal2).val(currentScanner.InputParameters[i].Value);
                    $(propVal2).blur(function () {
                        UpdateData(currentScanner.Id, propName2, $(propVal2).val());
                    });
                    break;
                case 2: //Boolean
                    var eRow3 = $("#tblInputCriteria").find('#emptyBoolRow').clone();
                    $(eRow3).removeClass('hidden').attr('id', 'Row_'+currentScanner.InputParameters[i].Name);
                    $(eRow3).appendTo($('#tblInputCriteria'));
                    var prop3 = $(eRow3).find('#InBoolPropName');
                    $(prop3).attr('id', 'InBoolPropName_'+currentScanner.InputParameters[i].Name);
                    var propName3 = currentScanner.InputParameters[i].Name;
                    $(prop3).html(propName3);
                    var propVal3 = $(eRow3).find('#InBoolPropValue');
                    $(propVal3).attr('id', 'InBoolPropValue_'+currentScanner.InputParameters[i].Name);
                    $(propVal3).val(currentScanner.InputParameters[i].Value);
                    $(propVal3).blur(function () {
                        UpdateData(currentScanner.Id, propName3, $(propVal3).val());
                    });
                    break;
    }
}
}

PROBLEM: The problem here is of the variables inside switch working as reference variable. So the UpdateData() function gets the last Name for similar type properties. i.e. if fields are of Number type then only the last property is updated by UpdateData() method.

Can anybody help me out solve this issue. Thanks for sharing your time and wisdom.

Upvotes: 0

Views: 744

Answers (1)

Robert
Robert

Reputation: 2471

Try something like the following. Its a tad overkill, but will bind the values of the variables to the closures.

var fnOnBlur = (function(thePropName, thePropVal) {
    return function () {
        if(!ValidateNumber(this, thePropName)) {
            alert('Value should be numeric in ' + thePropName);
            setTimeout(function() {$(thePropVal).focus();}, 100);
        }else {
            UpdateData(currentScanner.Id, thePropName, $(thePropVal).val());
        }
    };
})(propName1, propVal1);
$(propVal1).blur( fnOnBlur );

The link that Felik King supplied has much more detailed discussion.

Upvotes: 1

Related Questions