Creating jQuery dynamic hints for dynamic content

Question

UPDATE: this is the CFC code that I use to retrieve data.

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

Two problems:

• How to create a tooltip for three dynamically generated links, where the contents 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 3

I would like to create a tooltip for each link. Each tooltip then downloads information about each book. Thus, I have to pass bookID in a 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 does not work correctly.

I got a followng job when I 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' } }); 

2. Even when it works (using a static number for "bookID", I cannot format the data correctly. It is returned as the result of a query or a bunch of text strings. Should I send the results as HTML? Not sure.

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 for Javascript and jQuery, so please try not to be so technical.

Many thanks!

Answer 1

I also used qtip many times for my projects, so I could help you. As far as I understand your question, what do you need to get bookId from a url for example. for <a href="books.cfm?bookID=11"> you need to go through 11. For this you can use the 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. } }); }); 

The correct bookId should be sent above the code to the server, where you can get it from the get variable. There are two ways to handle the response. 1) send html from the server, which will be displayed as is. 2) you can also generate html from a client-side response using the onContentLoad callback provided by qtip. But I recommend the first method.

Answer 2

Why not use <cftooltip> instead of jQuery tooltip?