0

当用户按下链接时，我试图将页面加载到 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>
4

2 回答 2

1

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

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

如果它被调用，请在 load() 函数调用中关联一个回调函数。验证是否收到数据。或者，在 firebug 中检查网络调用。

如果这也可以正常工作，则将 CSS 链接作为主页本身的一部分。至于脚本，将它们链接到主文件本身。如果这是不可能的，您必须自己评估作为响应的一部分存在的脚本。请参阅如何将 Jquery 响应（带有脚本标签的 HTML 页面）加载到 DOM 中（或）使用 jquery.getScript() 来评估脚本。尝试先加载基本的 HTML 内容，然后引入交互式元素

于 2013-02-06T22:34:27.177 回答
0

我会尝试的第一件事是编辑您的 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 ，可能会导致一些脚本错误......

编辑

正如 Colin 所指出的，您已经尝试删除额外的 doctype 和 html（我没有阅读所有 22 条评论），但是您遇到了一个完全不同的错误：

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

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

我会首先删除 doctypes 和 map.js 的所有脚本，然后在添加脚本功能时一一调试。

于 2013-02-06T22:15:02.860 回答