JQuery does not work in Firefox but works in Chrome

Question

I'm having trouble with jQuery and Mozzila Firefox. Everything is working just fine in Chrome, but somehow Firefox does not see jQuery.

This is how I call jQuery

 <!-- Favicon and touch icons -->
    <link rel="shortcut icon" href="assets/ico/favicon.png">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="assets/bootstrap/js/datepicker.js"></script>

And this is where it fails (error is: ReferenceError: $ is not defined):

 <script>
        function ajax_check(){

            var id = $("#xml_select").val(); // this is the line where I get error

             $.ajax({
                    url: "ajax_check.php?id="+id,
                    success: function(response) {

                        var result = jQuery.parseJSON(response);

                       //console.log( JSON.stringify(result['ncp'].replace('"','')) );

                       var ncp = JSON.stringify(result['ncp']);
                       var id = JSON.stringify(result['id']);


                       $("#racun").val(ncp.substring(1,12));

                       $("#id_podnosilac").val(id.substring(1,5));
                    }, 
                  });

        }
</script>

Please help, what could be causing this?

Answer 1

You will get this error randomly based on loading time/different browsers. Because Root cause of this is that you are loading jquery.min.js from googleapis. Third party domain resources will get low priority than the local domain resources. "document ready" function statements will be triggered once the local domain resources are loaded. That is why you get this error.

Permanent Solution: Put jquery.min.js file in your server and call it from your domain. this solution will work even if your page has load time issues and in any browser.