創建動態jQuery的工具提示動態內容

UPDATE：這是我使用的檢索數據的CFC代碼。創建動態jQuery的工具提示動態內容

我使用qTip的jQuery插件創建一組鏈接提示。

兩個問題：

如何創建了三個動態生成的鏈接，其中提示的內容也將是動態的一套工具提示：

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

不幸的是，上述代碼無法正常工作。

我已經得到了followng上班的時候我用一個靜態的「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的，所以請儘量不要作爲技術。

非常感謝！

來源

2010-05-29 Mohamad

我也用qtip爲我的項目很多時間，因此我也許能幫助你。據我瞭解你的問題，你需要從URL的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到服務器，你可以從一開始變量取它。處理響應有兩種方法。 1）從服務器發送html，它將以原樣顯示。 2）你也可以使用由qtip提供的onContentLoad回調在客戶端的響應生成html但我建議第一種方式。

來源

2010-05-29 15:02:11

非常感謝，阿亞茲。有趣的是，阿賈克斯不開火。當我說代碼使用靜態ID時，我犯了一個錯誤：它確實，但我沒有使用.each（function（）。我只是使用$（'＃catalog a [href]'）。將使用靜態工作的代碼更新我的代碼。 – Mohamad 2010-05-29 15:12:50

語法$（'＃catalog a [href]'）。qtip可以使用數據：{bookID：parseInt（$（this）.attr（「href」）.split（「=」）[1]） }而不是創建bi變量。它也應該工作得很好。同樣在qtip的內容屬性中，您需要使用小寫字母，即url：'cfcs/viewbooks.cfc？method = bookDetails'，而不是URL：'cfcs/viewbooks.cfc？method = bookDetails'。有關詳細信息，請參閱http://craigsworks.com/projects/qtip/docs/reference/#content。 – 2010-05-29 15:21:26

太好了，謝謝。這樣做：將網址更改爲網址。是否有一個標籤可以使CFC的回覆成爲HTML？ – Mohamad 2010-05-29 15:34:06

爲什麼不使用<cftooltip>而不是jQuery的提示？

來源

2010-06-08 07:44:58 ppshein

創建動態jQuery的工具提示動態內容

回答

相關問題