Loading content into tooltip via ajax

Question

I am using this Plugin to load content into tooltip via ajax. It is pretty simple to understand and start using it. This is my jsp page in which I want to load content dynamically into tool tip on hovering on a link.

<!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>
....

If you look into the above code, at the bottom you will find the <a> tag with class = basic and the page to be loaded into the tooltip via ajax is http://www.google.com In the head you can see the script src and the javascript functions. I have imported the all the js files into the folder containing the jsp page.
But for some reason the tooltip is not appearing. What is wrong here and how to correct it? And also is there any way of checking if all the 3 js files jave been imported into the page?
The following structure describes where the css and the jsp files are present. The css and js fields are present inside the web content folder and the jsp files are present in
WEB CONTENT
WEB-INF
JSP FILES..
CLUETIP CSS AND JAVASCRIPTFILES..

This is the screenshot. As you can see the js fields are not being loaded. But the css files are being retrieved. enter image description here

EDIT#1
The page is loaded via ajax inside a div. So on clicking view page source, we cannot see the the source code of the stuff inside the div.

EDIT#2
The jquery.js file is not being imported even when using CDN i.e in the network tab of the developer tool, there is no call made for the the javascript file. I have given the script src line in the head section.

Have you added `http://www.google.com` for stackoverflow only, or also in your test script? I can imagine all kinds of cross-origin / cross-domain issues that will prevent the tooltip to be loaded. — Roonaan, May 05 '13 at 12:46
@Roonaan : To my test script also. Even if that was the problem at least an empty tooltip should be displayed, right? — Ashwin, May 05 '13 at 13:17
Any errors in the coonsole window of your debugger (firebug, chrome debugger)? — Dirk McQuickly, May 05 '13 at 15:25
@Ashwin, you will get the same result as Ryan described if you change the anchor's URL on their demo site to google.com or any external site. — bcm, May 08 '13 at 02:25
More info about grabbing external content here: http://stackoverflow.com/questions/3837717/get-html-of-external-url-in-jquery — bcm, May 08 '13 at 02:26
@DirkMcQuickly Sorry..in the network tab, only the GET request for css is fired. There is no request fired for the '.js' files. The js fies are also present in the same folder as the css files. — Ashwin, May 11 '13 at 07:34
Right click on the page and hit "View Page Source"...check and see if the script tags are in the rendered source, not just in the jsp page. — Ryan Lynch, May 11 '13 at 18:27
See my edit. The issue is that you are trying to load script tags via ajax. See http://stackoverflow.com/questions/1800585/loading-script-tags-via-ajax for more details. — Ryan Lynch, May 12 '13 at 13:26

score 3 · Accepted Answer · edited May 23 '17 at 12:21

3

EDIT: Based on the edits to the question here is what is going on. When you load content on a page via Ajax, any script tags in that content will not be executed. See this question: Loading script tags via AJAX for more details. Be sure to read all the answers, as the solution may be dependent on your particular scenario.

Original Answer

You're trying to do an ajax request from your site to another domain, google.com. This is not allowed by browsers, its called a cross domain request. According the the qtip error handler:

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>');
        }
    }
}

you should be getting the following: <i>sorry, the contents could not be loaded</i> loaded into your tooltip (see jsfiddle). Check the error console, the most obvious answer is that you are getting a 404 error on one of your files, which should show up in the developer tools of whatever application you are using. See what happens in this fiddle where I replace 'cluetip' with a non existant javascript file. The chrome developer console looks like this:

enter image description here

edited May 23 '17 at 12:21

Community

1
1

answered May 08 '13 at 01:50

Ryan Lynch

7,676
1
24
33

I am not getting the tool tip at all – Ashwin May 08 '13 at 18:13
the main problem is that I am not getting the tooltip only. I tried loading a page in the same domain also. The tooltip itself is not being displayed. – Ashwin May 08 '13 at 18:22
Have you checked to se whether or not the cluetip script and css are being loaded correctly? – Ryan Lynch May 08 '13 at 18:51
Sorry..in the network tab, only the GET request for css is fired. There is no request fired for the '.js' files. The js fies are also present in the same folder as the css files. – Ashwin May 11 '13 at 07:32
Thanks for the edit. As you said the script does not execute. So, instead of dynamically executing the scripts, I included the scripts in the parent page itself. Just curious to know, When you load content on a page via Ajax, why only scripts are not imported but css is imported? – Ashwin May 13 '13 at 05:12
I'm not really sure. According to an answer to this question it's just a non-standard thing that all browsers do: http://stackoverflow.com/questions/2203762/when-loading-an-html-page-via-ajax-will-script-tags-be-loaded – Ryan Lynch May 15 '13 at 15:44
Can you help me out with a similar question - http://stackoverflow.com/questions/17122789/using-google-charts-api-and-displaying-content-via-ajax-in-cluetip ? – Ashwin Jun 20 '13 at 01:45

Loading content into tooltip via ajax

1 Answers1