Creating dynamic jQuery tooltips for dynamic content

Question

UPDATE: This is the CFC code that I'm using to retrieve the data.

I'm using the qTip jQuery plugin to create tooltips for a set of links.

Two problems:

1. How do I create a set of tooltips for three dynamically generated links where the content of the tooltip will also be dynamic:

   a href="books.cfm?bookID=11">Book One

   a href="books.cfm?bookID=22">Book Two

   a href="books.cfm?bookID=33">Book Three

I would like to create a tooltip for each link. Each tooltip will then load details about each book. Thus I must pass the bookID to the tooltip:

$('#catalog a[href]').each(function()
   {
      $(this).qtip(
      {
            content: {
            URL: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: <cfoutput>#indexView.bookID#</cfoutput> },
            method: 'get'
         }
      });
   });

Unfortunately the above code is not working correctly.

I've gotten the followng to work when I've used a static 'bookID' instead of a dynamically generated number.

$("#catalog a[href]").qtip({
   content: {
      url: 'cfcs/viewbooks.cfc?=method=bookDetails',
      data: { bookID: 11 },
      method: 'get'
   }
});

1. Even when it does work (by using a static number for 'bookID', I can't format the data correctly. It comes back as a query result, or a bunch of text strings. Should I send back the results as HTML? Unsure.

CFC:

<cffunction name="bookDetails" access="remote" returnType="any" returnformat="plain" output="true" hint="This grabs book details for the books.cfm page">
    <cfargument name="bookID" type="numeric" required="true" hint="CFC will look for bookID and retrieve its details">
    <cfset var bookDetails = "">
    <!--- GET bookS FROM DATABASE --->
    <cfquery name="bookDetails" datasource="">
    SELECT
        titles.titleName AS tName,
        books.titleID,
        books.releaseDate AS rDate,
        genres.genreName AS gName,
        books.bookID,
    FROM
        books
            Inner Join titles ON titles.titleID = books.titleID
            Inner Join genres ON genres.genreID = books.genreID
    WHERE 
        (books.bookID = #ARGUMENTS.bookID#);
    </cfquery>
    <!--- RETURN VARIABLE --->
    <cfreturn bookDetails>
</cffunction>

PS: I am an absolute NOVICE to Javascript and jQuery, so please try not to be as technical.

Many thanks!

Answer 1

Hi, i have also used qtip for my projects many time therefore I might be able to help you. As far as i understand your question that you need to fetch bookId from the url for e.g. for <a href="books.cfm?bookID=11"> you need to pass 11. For this you can use following code

 $('#catalog a[href]').each(function()
   {
     var bi = parseInt($(this).attr("href").split("=")[1])
      $(this).qtip(
      {
            content: {
            url: 'cfcs/viewbooks.cfc?method=bookDetails',
            data: { bookID: bi  },
            method: 'get'
            },
            api :{
              onContentLoad : function(){ }
              // view complete list at http://craigsworks.com/projects/qtip/docs/api/#callbacks
            },
            style: {
               //for styling your qtip. http://craigsworks.com/projects/qtip/docs/tutorials/#styling. Also here you can provide nearly all css properties for main content wrapper.
            }

      });
   });

Above code must send correct bookId to the server where you can fetch it from the get variable. For processing response you have two ways. 1) send html from the server that will be displayed as it is. 2) you can also generate html from the response at the client side using onContentLoad callback provided by the qtip But I recommend first way.

Answer 2

Why not use <cftooltip> instead of jQuery tooltip?