Search code examples
javascriptjquerygoogle-chromefirefoxreferenceerror

Jquery Uncaught reference errors in google chrome

I've been using jquery for this web design project and there's one problem I've been running into. The script works just fine in safari, though in firefox and google chrome I get a uncaught reference error. I've read in few places that it might be charset of the script, but when I changed the charset nothing would happened. Has anyone else had this problem? If somebody knows a good fix to this problem help would be appreciated.

Here's the script I'm working with:

$(function ($) {
    'use strict';
    var slidebar = new $.slidebars({siteClose: true, scrollLock: true});
    $('i.button').on('click', function () {
        slidebar.slidebars.toggle('left');
    });
});
$(function PYLoad() {
    'use strict';
    $.ajax({
        url: 'http://127.0.0.1:8000/json',
        type: 'GET',
        success: function (data) {
            console.log("PY_Load has Loaded successfully...");
            console.log(data);
            if (data.green === "green") {
                    $('#PY_Load').addClass('server-status-green').removeClass('server-status-red server-status-red-blink default');
            };
            if (data.red === "red") {
                $('#PY_Load').addClass('server-status-red').removeClass('server-status-green server-status-red-blink default');
            };
            if (data.blink === "blink") {
                $('#PY_Load').addClass('server-status-red- blink').removeClass('server-status-green server-status-red default');
            };
            if (data.default === "default") {
                $('#PY_Load').addClass('default').removeClass('server-status-green server-status-red server-status-red-blink');
            };
        },
        complete: function () {
            console.log('Reloading...');
            setTimeout(PYLoad, 3000);
        }
     });
});

The head of my html page:

   <head>
        <meta http-equiv="X-UA-Compatible" />
        <meta http-equiv="Content-Type" charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        {% load staticfiles %}
        {% load compress %}
        {% compress css %}
        <link href="{% static 'scss/app.scss' %}" type="text/x-scss" rel="stylesheet" media="all"/>
        {% endcompress %}
        <script src="{% static 'js/jquery/jquery-2.1.4.js' %}" async></script>
        <script src="{% static 'js/modernizr/modernizr.custom.62824.js' %}" async></script>
        <script src="{% static 'js/slidebars/slidebars.js' %}" async></script>
        <script src="{% static 'js/app.js' %}" async></script>
    </head>

Here's what shows up in the console:

enter image description here

Solution

  • Remove Async tag so script loads before function is run