The Ajax function is not defined and results in a runtime error being thrown

Question

The Ajax function is not defined and results in a runtime error being thrown

    customAjax.postJson(
                "/foo/GetFoo",
                { fooName: fooName },
                function (data) {

                },
                function (error) {  });
        };

My Rest api call is GetAsync()

It throws customAjax is undefined : JavaScript runtime error: Unable to get property 'exceptionStart' of undefined or null reference. The custom code to make ajax call is below. The api call Getfoo is GetAsync method using attribute HttpGet. Can someone point me to the cause of this failure

var customAjax = {

    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->',

    postJson: function (url, data, success, error) {
        $.ajax(
            {
                type: "POST",
                dateType: "json",
                url: url,
                data: data,
                timeout: customAjax.defaultAjaxTimeout,
                success: function (result) {
                    if (success) success(result);
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    if (error && jqXhr) {
                        var responseText = jqXhr.responseText;
                        var index = responseText.indexOf(customAjax.exceptionStart);
                        if (index > 0) {
                            var exception = responseText.substr(index + customAjax.exceptionStart.length + 1);
                            index = exception.lastIndexOf(customAjax.exceptionEnd);
                            if (index > 0) {
                                exception = exception.substr(0, index);
                            }
                            error(exception);
                        } else {
                            error(errorThrown);
                        }
                    }
                }
            });
    },
}

javascript ajax json rest

Answer 1

Answer №1

The issue that you are encountering is related to accessing the variable ajax from a closure before it has been created:

var myVariable = {
    myProperty: "Hello",
    myFunction: function () {
        //... access myVariable.myProperty -> error
    }
};

There are two possible solutions in this scenario. The more organized approach, which I personally prefer, involves:

var ajaxOptions = {
    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->'
};
var ajax = {
    postJson: function (url, data, success, error) {
        ... ajaxOptions.exceptionStart.length
    }
};

This solution works because ajaxOptions already exists in the scope where you define the function ajax.postJson, allowing for proper referencing within its closure.

An alternative to this option is:

var ajax = {
    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->'
};
ajax.postJson = function (url, data, success, error) {
    ... ajax.exceptionStart.length
};

This alternative functions because ajax is declared beforehand and then linked to the closure of the function.

A less tidy option is to place the ajax variable under the window object:

window.ajax = {

    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->',

    postJson: function (url, data, success, error) {
        ... window.ajax.exceptionStart.length
    }
};

This method operates effectively as window is consistently present in all lexical scopes, permitting seamless referencing. However, it is considered less ideal due to polluting the window object, enabling any JavaScript code on your page to access and modify it, leading to potential unpredictable behavior. Although presented as an example, I do not recommend this practice.

Answer 2

The issue that you are encountering is related to accessing the variable ajax from a closure before it has been created:

var myVariable = {
    myProperty: "Hello",
    myFunction: function () {
        //... access myVariable.myProperty -> error
    }
};

There are two possible solutions in this scenario. The more organized approach, which I personally prefer, involves:

var ajaxOptions = {
    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->'
};
var ajax = {
    postJson: function (url, data, success, error) {
        ... ajaxOptions.exceptionStart.length
    }
};

This solution works because ajaxOptions already exists in the scope where you define the function ajax.postJson, allowing for proper referencing within its closure.

An alternative to this option is:

var ajax = {
    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->'
};
ajax.postJson = function (url, data, success, error) {
    ... ajax.exceptionStart.length
};

This alternative functions because ajax is declared beforehand and then linked to the closure of the function.

A less tidy option is to place the ajax variable under the window object:

window.ajax = {

    defaultAjaxTimeout: 600000,
    exceptionStart: '<!--',
    exceptionEnd: '-->',

    postJson: function (url, data, success, error) {
        ... window.ajax.exceptionStart.length
    }
};

This method operates effectively as window is consistently present in all lexical scopes, permitting seamless referencing. However, it is considered less ideal due to polluting the window object, enabling any JavaScript code on your page to access and modify it, leading to potential unpredictable behavior. Although presented as an example, I do not recommend this practice.

Answer 3

Answer №2

I encountered a similar issue, and after trying various steps, I found a solution using IE11.

Go to the internet settings and select 'Compatibility View settings'.
In the 'Add this website' section, enter the server name for your website (e.g., localhost) and click the 'Add' button.
Make sure to check the 'Display intranet sites in Compatibility View' box.

Answer 4

I encountered a similar issue, and after trying various steps, I found a solution using IE11.

Go to the internet settings and select 'Compatibility View settings'.
In the 'Add this website' section, enter the server name for your website (e.g., localhost) and click the 'Add' button.
Make sure to check the 'Display intranet sites in Compatibility View' box.

The Ajax function is not defined and results in a runtime error being thrown

Answer №1

Answer №2

Similar questions

The internal style and script specified within the <head> section are not being rendered

It is not possible to utilize a JavaScript function once the script has been loaded through

What is the best way to incorporate global variables within Vue JS components?

Pressing a button triggers the highlighting of a tab in HTML through the use of Javascript

Developing a two-dimensional JavaScript array using an AJAX PHP request

Insert a JSX element into the body of a webpage using React JSX

Issue with an Angular filter for formatting a lengthy JSON string onto separate lines within an HTML document

Convert Ruby array into a hash using specific parameters

Sending data through AJAX

Error: Unable to convert object to TestAcceptanceCriteria due to unexpected format being passed as an array

Improving JavaScript Functions: Minimize duplication of helper methods

Performing real-time arithmetic calculations on dynamic text input fields using AngularJS

ng-bind-html is functional, yet it is raising a TypeError

At what point should I expect a promise in Protractor to be resolved?

What is the best way to combine these two arrays in order to generate the desired JSON structure in a React

Passing a Scope to ES6 Template Literals: How to Ensure they are Interpreted Correctly?

What is the method for determining the numerical worth of the px containers?

Repeating the execution of Asp.net MVC ajax once again

Encountering an unforeseen change in the "buttonText" attribute

Utilizing libraries in JavaScript