Question

我正在尝试在用户按下链接时将页面加载到div中。但是在开发控制台（Chrome）中，我收到以下错误：

Uncaught TypeError: undefined is not a function
(anonymous function)

我的HTML：

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="CSS/common.css" />
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.2/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="JS/common.js"></script>
    <script src="JS/DyContent.js"></script>
    <title></title>
  </head>
  <body>
    <div id="bannerColor"></div>
    <div id="imgNav">
      <img id="banner" src="Images/logoLast.jpg"/> 
      <ul id="nav">
        <li class="current"><a "View/index.php">Home</a></li>
        <li><a href="#About">About Us</a></li>
        <li><a href="#Login">Login/Register</a>
          <ul>
            <li><a href="#Add">Add/Remove Car</a></li>
            <li><a href="#Search">Serach Invoices</a></li>
            <li><a href="#Book">Book Service</a></li>
          </ul>
        </li>
        <li><a href="#Gallery">Gallery</a></li>
        <li><a href="#Contact" id="Contact">Contact Us</a></li>
      </ul>
    </div>
    <div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
  </body>
</html>

我的JQuery文件：

$(document).ready(function () {
  $('#Contact').click(function () {
    $('#centerPane').load('External/map.php');
  });
});

和我试图加载的页面（map.php）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="/CSS/common.css" />
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="/JS/location.js"></script>
    <title></title>
  </head>
  <body>
    <header></header>
    <div id="mapContainer"></div>
    <div id="writtenDir"></div>
   <footer></footer>
  </body>
</html>

导致错误并且不允许填充div的是什么？

编辑：

<link rel="stylesheet" type="text/css" href="http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/CSS/common.css" />
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="http://scmweb.infj.ulst.ac.uk/~B00518833/DNA/View/JS/location.js"></script>
<div id="mapContainer"></div>
<div id="writtenDir"></div>

Answer 1

将我的所有评论整合为一个答案：

这可能是因为你还有其他的javascript库。 “未定义不是函数”在命名空间冲突的情况下通常会抛出错误。首先验证是否调用了onclick处理程序 - 这将验证jquery是否正常工作。

如果要调用它，请在load（）函数调用中关联回调函数。验证是否收到数据。或者，在firebug中检查网络呼叫。

如果这也正常工作，那么将CSS链接包含在主页面本身的一部分中。至于脚本，请将它们链接到主文件本身。如果无法做到这一点，您必须自己评估作为响应的一部分出现的脚本。请参考how to load the Jquery response(HTML page with script tags) into the DOM（或）使用jquery.getScript（）来评估脚本。首先尝试加载基本HTML内容，然后引入交互元素

Answer 2

我要尝试的第一件事是编辑你的map.js，这样它就不包含一个完整的html页面，而只是你需要的东西：

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/JS/location.js"></script>

<header></header>
<div id="mapContainer"></div>
<div id="writtenDir"></div>
<footer></footer>

如果像你一样加载文件，最终会在文档中出现类似内容：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        [....]
        <title></title>
    </head>
    <body>
        <div id="centerPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <!DOCTYPE html> 
            <html lang="en"> 
               <head>[...]</head>
               <body>[...]</body>
            </html>
        </div>
    </body>
</html>

显然这不是有效的HTML，可能会导致一些脚本错误......

修改

正如科林指出的那样，你已经尝试删除额外的doctype和html（我没有阅读所有22条评论），但你有一个完全不同的错误：

@Badaboooooom I then get the following error. Uncaught TypeError: Cannot read property 'offsetWidth' of null – Colin747 58 mins ago

这可能是一个完全不同的问题。其他代码已经执行。

我首先删除你的map.js的doctypes和所有脚本，然后逐个添加脚本功能来调试它们。

JQuery - 将页面加载到div中 - 匿名函数

2 个答案:

修改