Создание динамических подсказок 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'
   }
});

2. Даже когда это работает (используя статический номер для «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, поэтому, пожалуйста, постарайтесь не быть настолько техническими.

Большое спасибо!

Answer 1

Я также использовал qtip для своих проектов много раз, поэтому я мог бы помочь вам. Насколько я понимаю ваш вопрос, что вам нужно получить bookId из URL, например, для <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) вы также можете генерировать html из ответа на стороне клиента, используя обратный вызов onContentLoad, предоставляемый qtip. Но я рекомендую первый способ

Answer 2

Почему бы не использовать вместо подсказки jQuery?