"未捕获的TypeError:无法调用方法' appendChild' of null"发生在脚本中

时间:2014-04-09 19:14:37

标签: javascript jquery wordpress

我有一个手风琴模块,有很多移动部件。简而言之,它从Google Fusion Table中提取数据并将其添加到手风琴的不同区域。这里可以看到一个工作的例子。 http://csgjusticecenter.org/code/SDWeb/accordionOld.html

无论出于何种原因,当我将其添加到我的WordPress网站并单击其中一个标题时,我在Chrome中收到错误消息“未捕获的TypeError:无法调用方法'appendChild'为null。”在FF中,我得到一个错误,说“TypeError:resourceCategories为null”。

此页面是如何在页面上无法使用的示例:http://csgjusticecenter.org/code/SDWeb/intranetAccordion.html。 如果我将手风琴放在iframe中(页面上的第二个例子),它就可以正常工作。

工作页面的代码(iframe的源代码)是:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js">        </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href='http://csgjusticecenter.org/code/SDWeb/resourceAccordion.css' />
<script src="http://csgjusticecenter.org/code/SDWeb/accordionResources.js"></script>
<script src="http://csgjusticecenter.org/code/SDWeb/resourceAccordion.js"> </script>
</head>

<body>
<script>buildPage();</script>
<div id="wrapper2"></div>
</body>
</html>

为什么手风琴在Wordpress网站上时会出现错误,而不是在单独添加时会出现错误?

非常感谢任何帮助。

编辑:

这是在单击类.accordionButton的div时调用的函数。

function programResources(){

    var query = "SELECT Category, Name, Website, Description FROM " +
        '13aGTztEz7_XOWk7U_OzelJqr3Qr2yeFxv8ntt7FP ' + "WHERE 'Category' = '" +  resourceName1 + "'";
    var encodedQuery = encodeURIComponent(query);

    // Construct the URL
    var url = ['https://www.googleapis.com/fusiontables/v1/query'];
    url.push('?sql=' + encodedQuery);
    url.push('&key=AIzaSyD9Otr9A4pq624Ja9hRFMpUpBnyQAr06M0');
    url.push('&callback=?');

    // Send the JSONP request using jQuery
    $.ajax({
      url: url.join(''),
      dataType: 'jsonp',
      success: function (data) {
        var rows = data['rows'];
        var resourceCategories = document.getElementById(contentDivId);
        var containerContainer = document.createElement('div');
        containerContainer.className = 'containerContainer';              
        var infoContainer = document.createElement('div');
        infoContainer.className = 'infoContainer';
        infoContainer.innerHTML = 'Click resource title to learn more';
        infoContainer.id = 'infoContainer';


        for (var i in rows) {
          var category = rows[i][0];
          var resourceName2 = rows[i][1];
          var siteUrl = rows[i][2];
          var desc = rows[i][3];
          var divID = rows[i][4];


          var resourceName = document.createElement('div');
          resourceName.className= 'resourceContainer';
          resourceName.id = resourceName2 + 'resource';


          var resourceText = document.createElement('span');
          resourceText.className='resourceText';          
          resourceText.innerHTML = resourceName2;


          resourceName.appendChild(resourceText);
          containerContainer.appendChild(resourceName);
          resourceCategories.appendChild(containerContainer);
          resourceCategories.appendChild(infoContainer);


        }

      }
    });
    goScroll = 0;
};

错误出现在

之后

resourceCategories.appendChild(containerContainer);

此外,此功能(以及其他一些功能)包含在$(document).ready(function(){

0 个答案:

没有答案