Custom jQuery function randomly undefined

Question

Thank you in advance for your help.

I have a page that renders a handful of charts but I seem to be experiencing a scope issue only once in a while.

I have a series of jQuery functions I made to render specific types of charts based on options passed in, each one contains an AJAX call to request the proper data-set based on the options submitted when calling the chart function on the chart container.

Some of the charts are paired with a second chart whose options are determined by the JSON response of the first charts AJAX call response. The paired chart is rendered in a callback in the first chart, after the AJAX success: is triggered.

Most of the time this works perfectly fine but occasionally I get the error "TypeError: $(...).lineChart is not a function". The first barChart renders every time, but once in a while the lineChart function that is defined in the same file as barChart is no longer accessible.

Any delay I add into the code seems to fix the issue. The issue does not exist when I use the debugger and I can catch the error and re-call the lineChart function after a timeout which seems to work as well.

I'm at a loss as to why the function would no longer be available sometimes and what seems randomly.

I apologize for not pasting in the exact code. There are a fair bit of comments and variable/function names I cannot post here.

Thanks.

$.fn.barChart = function (options, callback) {
    $.ajax(options["url"], {
        method: "POST",
        type: "json",
        data: options.data,
        success: function (response) {

            // ..render this chart ..

            var optionsForNewChart = {}; // ..generate new options to respond with base on response JSON
            callback(optionsForNewChart);
        }
    });
};

$.fn.lineChart = function (options) {
    $.ajax(options["url"], {
        method: "POST",
        type: "json",
        data: options.data,
        success: function (response) {
            // ..render this chart ..
        }
    });
}


$("#barChart1").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart1').lineChart(response);
});

$("#barChart2").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart2').lineChart(response);
});

$("#barChart3").barChart({
    url: "https://...",
    data: {
        //post data
    }
}, function (response) {
    $('#lineChart3').lineChart(response);
});

Are you absolutely sure that the dollar sign is not being overwritten by anything else? As a matter of course, I always use an explicit reference to jQuery to guarantee that the dollar sign hasn't been "claimed" by some other library. Try switching ```$``` to ```jQuery``` if you're unsure and see if the problem goes away. I doubt this is the issue, but worth checking. — CPR, Apr 12 '17 at 17:58
Enclose your code in : `$(document).ready(function(){ //YOUR CODE GOES HERE });` — Shakti Phartiyal, Apr 12 '17 at 17:59
@ShaktiPhartiyal This does seem to fix the issue thank you. I'm not entirely sure why though. The render logic is called at the bottom of the page, after the js file that contains the chart functions has already been loaded (not deferred or async). This same file contains the bar function that works flawlessly along with all of the other charts not rendered in a callback. Its just the charts rendered via callback that experience this issue seemingly at random. Thank you for the help. — BigDrums, Apr 12 '17 at 19:35

score 1 · Accepted Answer · answered Apr 12 '17 at 19:36

1

Enclose your code in : $(document).ready(function(){ //YOUR CODE GOES HERE }); This will solve the issue of the function being not loaded.

answered Apr 12 '17 at 19:36

Shakti Phartiyal

6,156
3
25
46

Thanks Shakti. Marked as answer. Do you possibly know why when two functions defined in the same file, one with a callback on AJAX success, why inside that callback the functions defined in that file that had to have been loaded already to get this far, might no longer be defined? I cant think of a scenario where that callback function can be ran prior to that file being loaded. Edit* Maybe I'm just thinking about all of this too linearly and need to read up more on callback functions. – BigDrums Apr 12 '17 at 19:49
There maybe a case when the content of the page/file has loaded partially making one function being loaded and before the second one is loaded the ajax calls the callback. To encounter this problem we have the $(document).ready approach . Read more about it here http://stackoverflow.com/questions/6005789/when-do-you-need-to-use-document-ready and http://stackoverflow.com/questions/24930807/jquery-best-practise-using-document-ready-inside-an-iife – Shakti Phartiyal Apr 12 '17 at 19:55

Custom jQuery function randomly undefined

1 Answers1