1

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…</p>

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.

4

2 に答える 2

2

これを試してください: jQuery が定義されていない場合は、それを に追加し、<head>完了したら を呼び出しますresizeColumns。にresizeColumns、私も追加noConflictしました。

これによりundefined、スクリプトを使用する前にスクリプトが完全にダウンロードされるのを常に待つため、停止します。

<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>
于 2013-05-06T14:27:29.213 に答える