Question

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

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

两个问题：

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

a href =“books.cfm？bookID = 11”＆gt; Book One

a href =“books.cfm？bookID = 22”＆gt;第二册

a href =“books.cfm？bookID = 33”＆gt; Book Three

我想为每个链接创建一个工具提示。然后，每个工具提示将加载有关每本书的详细信息。因此，我必须将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？不确定。

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：我对Javascript和jQuery绝对是NOVICE，所以请尽量不要像技术那样。

非常感谢！

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。 2）你也可以使用qtip提供的onContentLoad回调从客户端的响应生成html但是我推荐第一种方式。

Answer 2

为什么不使用＆lt; cftooltip＆gt;而不是jQuery工具提示？

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

2 个答案: