DIV를 오버레이로 표시합니다.

Question

저는 RoR을 사용하여 UI 작업을하고있는 백엔드 개발자였습니다.

I have a list object that I want to display. 
Object1 
Object2 
Object3 
Object4 
... 

나는이 비트를했다. 사용자가 오브젝트 1를 클릭 할 때

는 지금, 나는 (http://jquerytools.org/demos/overlay/index.htm 유사한) 나는 샘플 코드를 이해

을 객체의 세부 사항을 표시합니다.

div가 숨겨져 있으며 클릭하면 표시됩니다. 하지만 제 경우에는 많은 객체 (2 백 개)가 있고 각 객체는 매우 커서 페이지가로드 될 때 모든 데이터를 검색하지 않으려 고합니다. 그래서 현재 사용자가 객체를 클릭 할 때, 나는 모든 데이터가 상세하게 표시되는 새로운 페이지를 간단하게 엽니 다. 내가 원한 것은 예를 들어 오버레이를 열고 그 안에 데이터를 렌더링하는 것입니다.

저는 UI 개발을위한 용어에 익숙하지 않고 모든 기존 코드를 코딩하기 전에 기존 구현을 찾는 하드 유형이 있습니다.

라이센스가 문제이므로 바닐라 jQuery와 RoR을 계속 사용하고 싶습니다. 모든 종류의 라이센스 체계와 함께 타사 라이브러리를 사용하는 대신

Answer 1

의견에서 언급 한대로 AJAX을 사용하면됩니다. 그것은 링크를 클릭 할 때 전체 페이지를 다시로드하는 대신 비동기 적으로 서버에 요청을 보내고 응답을 반환합니다. 응답은 자바 스크립트에서 처리되어 페이지를 업데이트합니다.

시나리오에서 링크를 클릭하면 간단한 방법으로 서버에 Ajax 요청을 보내고 오버레이 상자에 표시 할 데이터를 검색하고 텍스트를 설정 한 다음 해당 텍스트를 표시해야합니다. 오버레이 박스 자체.

AJAX는 그 자체로 처리하려고 할 때 거의 문제를 일으키지 않습니다. 따라서 여기에있는 JQuery 라이브러리의 ajax API를 사용하는 것이 좋습니다 : http://api.jquery.com/jQuery.ajax/. 이것은 사용하기 쉽고 브라우저 호환도 가능합니다. 이 같은 사업부에 대한

:

$("#load").click(function(){ 
    //ajax request 
    $.ajax({ 
    url: "your/web/service.aspx", 
    cache: false 
    }) 
    .done(function(response_text){ 
    //setting the response got to the overlay box 
    //this can be a plain text or html or json. 
    //you need to set the box appropriately. 
    $("#overlay").text(response_text); 
    //then do the needful to display overlay box 
    }); 
}); 

Answer 2

Lakshmi의 의견에서 언급했듯이 Ajax 메서드를 사용하여 지나치게 많은 데이터를로드하고 표시해야합니다. Ajax 응답은 숨겨진 요소를 오브젝트 세부 정보로 채운 다음 지나치게 표시되도록 트리거해야한다.