Calling Nested Function In Javascript - Is Not Defined Error When Called Within jQuery.ajax.success

Question

I am making an ajax form submission inside an object.

When I try call the other object methods within the jQuery.ajax.success callback, this line throws an error...

Is this a scoping issue?

this.DisplayError(data.error);

this.DisplayError is not a function

Code:

    var toolsform = new function() {

        this.sumbitUrl = 'submit.php';


        this.DisplayError = function(errorMsg) {
            jQuery('#trialFormError').html('<strong>Error: </strong>' + errorMsg);  
        }

        this.AjaxSumbit = function() {

            let formData = jQuery("#trialsToolsRegisterForm").serialize();
            formData += '&toolsFormSumbit=1';

            jQuery.ajax({
                type: "POST",
                url: this.sumbitUrl,
                dataType: 'json',
                data: formData,
                success: function(data) {

                    if(data.success === false) { 
                        this.DisplayError(data.error);
                    }

                    console.log(data); // show response from the php script.
                }
            }); 
        }   
    }

Turn `success` into an arrow function to preserve the `this` context — CertainPerformance, May 15 '18 at 04:06
Possible duplicate of [How to access the correct \`this\` inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-inside-a-callback) — 31piy, May 15 '18 at 04:08

karaxuna · Answer 1 · 2018-05-15T04:15:33.463

2

Use arrow function:

success: () => {

}

This happens because you are loosing context, Ajax assigns different context when calling success function. You can also save context in New variable:

var self = this;

And use it inside success function instead of this. Or you can define function context:

success: (function() {

}).bind(this)

edited May 15 '18 at 04:15

answered May 15 '18 at 04:07

karaxuna

26,752
13
82
117

Thanks for the explanation. – Dale Woods May 15 '18 at 04:14

Pak Wah Wong · Answer 2 · 2018-05-15T04:23:16.067

this inside the success function is not equal to this outside. The simplest way to handle this is using arrow function.

var toolsform = new function() {

    this.sumbitUrl = 'submit.php';


    this.DisplayError = function(errorMsg) {
        jQuery('#trialFormError').html('<strong>Error: </strong>' + errorMsg);  
    }

    this.AjaxSumbit = function() {

        let formData = jQuery("#trialsToolsRegisterForm").serialize();
        formData += '&toolsFormSumbit=1';

        jQuery.ajax({
            type: "POST",
            url: this.sumbitUrl,
            dataType: 'json',
            data: formData,
            success: data => {

                if(data.success === false) { 
                    this.DisplayError(data.error); // now `this` should be equal to the one outside
                }

                console.log(data); // show response from the php script.
            }
        }); 
    }   
}

The magic is, arrow function does not has its own this. When you call this, it will refer to the outside one. But normal function has its own this, therefore when you call this, it will refer to its own this instead of the outside one.

For details, you may take a look on the MDN web docs

Thanks very much. I knew it was some kind of scoping issue. – Dale Woods May 16 '18 at 04:46 — Dale Woods, May 16 '18 at 04:46

Calling Nested Function In Javascript - Is Not Defined Error When Called Within jQuery.ajax.success

2 Answers2