CODEWITHSUNDEEP
jquerygoogle-chromevariables
Solomon Closson
Solomon Closson

Reputation: 6217

How to do resolve the 'jQuery not defined' error in Google Chrome?

Ok, sometimes the jQuery is defined and sometimes it is not. Here is the following jQuery code I am using on this page.

If it is defined, the columns are all the same width, else the two-side columns are 200 pixels and the middle is 100% width. I am trying to get jQuery defined at all times here, but can't figure out what the problem is exactly…

Any help would greatly be appreciated!

<script type="text/javascript">
if (!window.jQuery) {
   var script = document.createElement("script");
   script.type = "text/javascript";
   script.async = false;
   script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
   var oScripts = document.getElementsByTagName("script");
   var s = oScripts[0];

   s.parentNode.insertBefore(script, s);
}

var totaltds = 0;
function resizeColumns() {
    jQuery(document).ready(function($) {
        $('tr[class^="tablerow"]').each(function() {
            var tds = $(this).children('td[class^="tablecol"]').length;
            if (tds > totaltds)
                totaltds = tds;
        });
        var contentPadding = $("#content_section").css('padding-left');
        contentPadding = parseInt(contentPadding.substring(0, contentPadding.length - 2));
        var subPadding = contentPadding / totaltds;
        $(window).bind("resize", function(){
            for(var i = 0; i < totaltds; i++) {
                var colWidth = ($("#main_content_section").width() / totaltds) - subPadding;
                $(".tablecol_" + i).css({'width': colWidth + 'px', 'max-width': colWidth + 'px', 'min-width': colWidth + 'px'});
            }

        }).trigger("resize");

        $("#hideMe").parent().parent().parent().hide();
    });
}

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", resizeColumns, false);
else
    addLoadEvent(resizeColumns);

</script>

<div id="hideMe"></div>

All of this code is inserted into the body of the HTML, as it is inserted into a Module on that page, and needs to be that way. What am I doing wrong here? Is there a better way to define jQuery so that it is always defined?

Chrome errors are almost all of the time on the line jQuery(document).ready(function($) { saying that jQuery is not defined.

Upvotes: 1

Views: 7192

Answers (2)

RaphaelDDL
RaphaelDDL

Reputation: 4480

Try this one: If jQuery is undefined, add it to the <head>, and when completed, call resizeColumns. On resizeColumns, I added noConflict as well.

With this, the undefined will stop, since we will always wait the script gets fully downloaded before trying to use it.

<script type="text/javascript">
 // Localize jQuery variable
 var jQuery;

 /******** Load jQuery if not present *********/
 if (window.jQuery === undefined) {
      var jQueryTag = document.createElement('script');
      jQueryTag.setAttribute("type","text/javascript");
      jQueryTag.setAttribute("src",
      "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js");

      if (jQueryTag.readyState) {
           jQueryTag.onreadystatechange = function() { // For old versions of IE
                if (this.readyState == 'complete' || this.readyState == 'loaded') {
                     resizeColumns();
                }
           };
      } else {
           jQueryTag.onload = resizeColumns;
      }
      // Try to find the head, otherwise default to the documentElement
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(jQueryTag));
 } else {
      // The jQuery version on the window is the one we want to use
      jQuery = window.jQuery;
      resizeColumns();
 }

var totaltds = 0;
function resizeColumns() {
    jQuery = window.jQuery.noConflict(true);
    jQuery(document).ready(function($){
        $('tr[class^="tablerow"]').each(function() {
            var tds = $(this).children('td[class^="tablecol"]').length;
            if (tds > totaltds)
                totaltds = tds;
        });
        var contentPadding = $("#content_section").css('padding-left');
        contentPadding = parseInt(contentPadding.substring(0, contentPadding.length - 2));
        var subPadding = contentPadding / totaltds;
        $(window).bind("resize", function(){
            for(var i = 0; i < totaltds; i++) {
                var colWidth = ($("#main_content_section").width() / totaltds) - subPadding;
                $(".tablecol_" + i).css({'width': colWidth + 'px', 'max-width': colWidth + 'px', 'min-width': colWidth + 'px'});
            }

        }).trigger("resize");

        $("#hideMe").parent().parent().parent().hide();
    });
}

/* // Don't need that listener IMO

if (document.addEventListener)
    document.addEventListener("DOMContentLoaded", resizeColumns, false);
else
    addLoadEvent(resizeColumns);*/

</script>

Upvotes: 2

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

Can't you just wrap everything?:

// asynchronous function depending on jQuery
(function($){
    // define your shizzle
    var project = this,
        resizeColumns = function(){/**/};
})(jQuery);

This will also secure the $ variable inside this function.

The same can be achieved by adding asynchronous functions to the DOM tree.

window.project = (function($){
    var resizeColumns = function(){/**/};
})(jQuery);

or

window.project = (function(){
    var $ = window.jQuery || {},
        resizeColumns = function(){/**/};
});

Upvotes: 0

Related Questions