JQuery를 사용하여 호버에 데이터베이스 정보 표시

Question

나는 Red Box과 비슷한 JQuery를 사용하려고합니다. 테이블의 항목 위로 마우스를 가져 가면 데이터베이스에서 가져온 항목에 대한 정보를 표시하는 상자 팝업이 나타납니다. 나는 이러한 요소 : 위에 마우스를 올려 때

는 내가 지금까지 가지고하면 테이블에서 특정 요소를 선택할 수있는 능력, 그리고 경고입니다

그래서 내 질문은 : 나는 콜백을 사용하여 데이터베이스 정보를 (표시 어떻게, I 'm 추측) jquery 호버에서 팝업 텍스트 상자에?

감사합니다,
마이클

Answer 1

당신이 적절한 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> 

Answer 2

이 압축 된 설명이 코드 xandy에 도움이되고 함께 있어야합니다.

이 JSON을 제공하는 동적 페이지를 만들 것입니다. 페이지는 데이터를 가져올 수 있으려면 주요 정보가 필요합니다. 그런 다음 제품을 가리키고있는 JSON에 정보를 전달할 호버 이벤트를 만듭니다. 데이터가 돌아 오면 DIV에 정보를 채우거나 모달 또는 툴팁 플러그인을 사용하여 정보를 표시합니다.

Answer 3

클라이언트 측 템플릿을 사용하는 것이 가장 간단한 방법입니다 (자세한 내용은 this blog post 참조). 요약으로, 어떤 클라이언트 측 템플릿은 기본적으로 의미입니다 : 당신은 당신이 서버에 AJAX 호출이를 얻을 수 있도록

그런 다음 jQuery를 사용하여 호버 표시 요소를 나타내는 페이지에 일부 HTML 조각이

1. 표시하려는 데이터
2. AJAX 호출에서 데이터를 받으면 jquery를 사용하여 html 조각을 복제합니다.
3. 마지막으로받은 데이터를 복제 된 HTML 조각에 삽입하여 표시합니다.

호프가 도움이 될 것입니다.

Answer 4

페이지 생성 도중 (데이터가 크지 않은 경우) 각 항목에 대해 숨겨진 <div>을 생성하고 해당 데이터를 팝업 상자로 가져올 수 있습니다. 이 div는 jQuery로 숨길 수 있습니다. javascript가없는 사람들 (즉, Google 크롤러 및 텍스트 리더)은 여전히 ​​"전체 설명"데이터를 얻습니다.

그러면 마우스를 가져 가면 <div>의 위치를 ​​지정하거나 표시하는 문제가됩니다. hovertip이 좋은 시작일 것 같습니다.

AJAX 호출을 통해 데이터를 요청할 필요가 없으면 페이지의 반응이 더 좋을 것입니다.