Question

我正在使用this插件通过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内容
WEB-INF
JSP FILES ..
CLUETIP CSS和JAVASCRIPTFILES ..

这是截图。如您所见， js 字段不正在加载。但是正在检索css文件。 enter image description here

修改＃1
该页面通过div内的ajax加载。所以在点击查看页面源时，我们看不到div里面东西的源代码
修改＃2
即使在开发人员工具的网络选项卡中使用 CDN ，也未导入jquery.js文件，因此没有对javascript文件进行调用。我在头部给出了script src行。

Answer 1

编辑：根据问题的编辑，这里是怎么回事。当您通过Ajax在页面上加载内容时，该内容中的任何脚本标记都不会被执行。有关详细信息，请参阅此问题：Loading script tags via 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错误，这些错误应显示在您正在使用的任何应用程序的开发人员工具中。看看这个fiddle中发生了什么，我用不存在的javascript文件替换'cluetip'。 chrome开发者控制台如下所示：

enter image description here

通过ajax将内容加载到工具提示中

1 个答案: