Использование JQuery для отображения информации базы данных при наведении - PullRequest
Новая
       5

Использование JQuery для отображения информации базы данных при наведении

1 голос
/ 09 июля 2009

Я пытаюсь что-то с JQuery, похожее на Red Box . Я хотел бы иметь возможность навести курсор на запись в таблице, а затем всплывающее окно, в котором отображается информация об этой записи, извлеченной из базы данных.

До сих пор у меня была возможность выбирать определенные элементы в таблице и предупреждать, когда я наводил курсор на эти элементы:)

Итак, мой вопрос: как мне отобразить информацию базы данных (я полагаю, с помощью обратных вызовов) в текстовом поле, которое появляется при наведении курсора jquery?

Спасибо
Michael

Ответы [ 4 ]

5 голосов
/ 09 июля 2009

Если у вас есть серверное приложение, которое может вернуть правильный JSON, реализация будет выглядеть так: 

$(".item").mouseenter(function(){
    var postUrl = $(this).href;
    // Get the JSON From server, and format the data into the box
    $.getJSON(postUrl, function (data) {
        showInfoBox(data);
    });
});

showInfoBox = function(data) {
    var ibox = $("#divInfoBox");
    $(".name", ibox).html(data.name);
    $(".description", ibox).html(data.description);
    // More data injection here

    ibox.show();

};

Соответствующий HTML будет выглядеть примерно так: 

<div id="divInfoBox">
    <h3 class="name"></h3>
    <p class="description"></p>
</div>

<.......>

<!-- list of the item that need database data !-->
<ul id="itemList">
    <li><a href="/url/to/data?id=1">1</a></li>
    <li><a href="/url/to/data?id=2">2</a></li>
    <li><a href="/url/to/data?id=3">3</a></li>
</ul>
1 голос
/ 09 июля 2009

Вы можете создать скрытый <div> для каждого элемента также во время генерации страницы (если данные не очень большие) и перетащить эти данные в ваше всплывающее окно. Этот div можно скрыть с помощью jQuery - чтобы люди без javascript (а именно сканер Google и программы для чтения текста) по-прежнему получали данные «полного описания».

Тогда становится просто вопрос позиционирования / показа вашего <div> при наведении курсора. hovertip кажется хорошим началом.

Отсутствие запроса данных через вызов AJAX сделает страницу более отзывчивой

0 голосов
/ 09 июля 2009

Довольно простой способ добиться этого - использовать шаблоны на стороне клиента, подробное описание см. В этом сообщении в блоге . Таким образом, клиентские шаблоны в основном означают:

  1. На вашей странице есть фрагмент HTML, представляющий элемент отображения при наведении курсора
  2. Затем с помощью jquery вы делаете AJAX-вызов на сервер, чтобы получить данные, которые вы хотите отобразить.
  3. Получив данные из вызова AJAX, вы используете jquery для клонирования фрагмента html.
  4. Наконец, вы вводите полученные данные в клонированный фрагмент HTML и отображаете их.

Надеюсь, это поможет вам.

0 голосов
/ 09 июля 2009

Надеюсь, это сокращенное описание поможет и должно сопровождаться кодом xandy:

Я бы создал динамическую страницу, которая служит JSON. Страница займет ключевая информация, чтобы иметь возможность получить эти данные назад. Я бы тогда создал парение событие, которое передало бы информацию JSON о продукте, находящемся в продаже. Когда данные вернулись, я бы заполнить эту информацию в DIV или использовать модальный или всплывающая подсказка для отображения Информация.

...