coldfusion - 为动态内容创建动态 jQuery 工具提示

Question

更新:这是我用来检索数据的 CFC 代码。

我正在使用 qTip jQuery 插件为一组链接创建工具提示。

两个问题:

1. 如何为三个动态生成的链接创建一组工具提示，其中工具提示的内容也是动态的:

   a href="books.cfm?bookID=11">第一本书

   a href="books.cfm?bookID=22">第二本书

   a href="books.cfm?bookID=33">第三本书

我想为每个链接创建一个工具提示。然后，每个工具提示将加载有关每本书的详细信息。因此我必须将 bookID 传递给工具提示:

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

不幸的是，上面的代码无法正常工作。

当我使用静态“bookID”而不是动态生成的数字时，我得到了以下结果。

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

即使它确实有效(通过使用“bookID”的静态数字，我也无法正确格式化数据。它作为查询结果或一堆文本字符串返回。我应该将结果发送为HTML？不确定。

氟氯化碳:

<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:我对 Javascript 和 jQuery 绝对是新手，所以请尽量不要太技术化。

非常感谢!

Answer 1

我也多次在我的项目中使用 qtip，因此我也许可以帮助你。据我了解您的问题，您需要从网址中获取 bookId，例如对于 <a href="books.cfm?bookID=11">您需要传递 11。为此您可以使用以下代码

 $('#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.
            }

      });
   });

以上代码必须将正确的 bookId 发送到服务器，您可以从 get 变量中获取它。对于处理响应，您有两种方法。1)从服务器发送html，该html将按原样显示。2)您还可以使用 qtip 提供的 onContentLoad 回调从客户端的响应生成 html 但我推荐第一种方法。