Javascript: Scope issues in object

Question

I cannot access certain variables from a function. Here's what I got:

var PTP = function (properties) {
    this.errorsArray = []
}


PTP.prototype.initHTMLItems = function () {
    $('input[data-widget-type="date"]').each(this.dateValidation)
}


PTP.prototype.dateValidation = function() {
    var field = '#' + $(this)[0].id
    var that = this
    $(field).focusout(function(){
        var valid = form_validate_date($(field).val())
        var label = $('#date').siblings('label').children('.label-text').text()

        if (!valid) {
            that.errorsArray.push({
                'field': field,
                'fieldType': 'date',
                'errorMessage': 'Incorrect data' + (label !== undefined ? ' for ' + label : "")
            })
        }
    })
}

The issue is that I cannot access errorsArray.

I also tried passing a callback function as a parameter to dateValidation:

PTP.prototype.addError = function(errorObj) {
    this.errorsArray.push(errorObj)
}

Tried this way:

PTP.prototype.initHTMLItems = function () {
    $('input[data-widget-type="date"]').each(this.dateValidation(this.addError))
}

and also this way:

PTP.prototype.initHTMLItems = function () {
    $('input[data-widget-type="date"]').each(this.dateValidation.bind(this.addError))
}

but that screwed with the scope of this in dateValidation:

PTP.prototype.dateValidation = function(callback) {
    var field = '#' + $(this)[0].id
    var that = this
    $(field).focusout(function(){
        var valid = form_validate_date($(field).val())
        var label = $('#date').siblings('label').children('.label-text').text()

        if (!valid) {
            callback({
                'field': field,
                'fieldType': 'date',
                'errorMessage': 'Incorrect data' + (label !== undefined ? ' for ' + label : "")
            })
        }
    })
}

How can I get access to errorsArray?

AnilRedshift · Accepted Answer · 2018-07-20T00:45:50.683

1

Change $('input[data-widget-type="date"]').each(this.dateValidation)

to

$('input[data-widget-type="date"]').each(function(index, element) {
  this.dateValidation(element);
}.bind(this));

and then change PTP.prototype.dateValidation = function(callback) {

to PTP.prototype.dateValidation = function(element) { now, inside dateValidation, this is your PTP object, and element is the jquery element from your each loop

edited Jul 20 '18 at 00:45

answered Jul 20 '18 at 00:31

AnilRedshift

7,937
7
35
59

If I bind to 'this', I get access to errorsArray but I lose access to the current field I'm working on, meaning that var field = '#' + $(this)[0].id won't work – MrCujo Jul 20 '18 at 00:33
@MrCujo: ah this is a very annoying part of the jquery api. I'll update my answer (tl;dr you should pass both parameters in) – AnilRedshift Jul 20 '18 at 00:38
@MrCujo: updated – AnilRedshift Jul 20 '18 at 00:49
it worked indeed. I appreciate very much your time. Thanks! Just wondering, could it be possible to solve this issue with a closure to preserver the scope? – MrCujo Jul 20 '18 at 16:25

Javascript: Scope issues in object

1 Answers1