0

我正在使用此插件通过 ajax 将内容加载到工具提示中。理解并开始使用它非常简单。这是我的 jsp 页面，我想在其中将内容动态加载到悬停在链接上的工具提示中。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<html>
<head>
  <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('a.basic').cluetip();
  });
  function web()
  {
      alert('asffdsr');
  }
</script>
</head>
<table border="1">
<tr>
<th>Question name</th>
<th>Group ID</th>
<th>opt1(#votes)</th>
<th>opt2(#votes)</th>
<th>opt3(#votes)</th>
<th>opt4(#votes)</th>
<tr>

    <c:forEach var="questions" items="${questionslist}">

                <tr>
                    <td><a  class="basic" href="http://www.google.com" rel="http://www.google.com" ><c:out value="${questions.question}"/></a></td>
....

如果你查看上面的代码，在底部你会发现<a>标签class = basic和要通过 ajax 加载到工具提示中的页面是http://www.google.com 在头部你可以看到脚本 src 和 javascript 函数。我已将所有 js 文件导入到包含 jsp 页面的文件夹中。
但由于某种原因，工具提示没有出现。这里有什么问题以及如何纠正它？还有有什么方法可以检查是否所有 3 个 js 文件都已导入页面？
以下结构描述了 css 和 jsp 文件所在的位置。css 和 js 字段存在于Web 内容文件夹中，而 jsp 文件存在于
WEB CONTENT
      WEB-INF
      JSP 文件中。
CLUETIP CSS 和 JAVASCRIPTFILES..


这是屏幕截图。如您所见，未加载js字段。但是正在检索css文件。 在此处输入图像描述

EDIT#1
该页面是通过 div 内的 ajax 加载的。所以在点击查看页面源码时，我们看不到div里面的东西的源代码。

EDIT#2即使使用CDN即在开发人员工具的网络选项卡中，文件也没有被导入，没有调用 javascript 文件
。我已经在标题部分给出了这条线。jquery.jsscript src

4

1 回答 1

3

编辑：根据对问题的编辑，这里发生了什么。当您通过 Ajax 在页面上加载内容时，该内容中的任何脚本标签都不会被执行。有关更多详细信息，请参阅此问题：通过 AJAX 加载脚本标签。请务必阅读所有答案，因为解决方案可能取决于您的特定情况。

原始答案

您正在尝试从您的站点向另一个域 google.com 发出 ajax 请求。这是浏览器不允许的，称为跨域请求。根据 qtip 错误处理程序：

error: function(xhr, textStatus) {
    if ( options.ajaxCache && !caches[cacheKey] ) {
        caches[cacheKey] = {status: 'error', textStatus: textStatus, xhr: xhr};
    }

    if (isActive) {
        if (optionError) {
            optionError.call(link, xhr, textStatus, $cluetip, $cluetipInner);
        } else {
            $cluetipInner.html('<i>sorry, the contents could not be loaded</i>');
        }
    }
}

您应该得到以下信息：<i>sorry, the contents could not be loaded</i>加载到您的工具提示中（请参阅jsfiddle）。检查错误控制台，最明显的答案是您的某个404文件出现错误，该错误应该显示在您正在使用的任何应用程序的开发人员工具中。看看在这个小提琴中发生了什么，我用一个不存在的 javascript 文件替换了“cluetip”。chrome 开发者控制台如下所示：

在此处输入图像描述

于 2013-05-08T01:50:34.317 回答