jquery로 각 탭 필터를 한 번만로드하십시오.

Question

탭 당 세 개의 탭에 특정 필터 내용이 있습니다. 각 탭을 클릭하면 특정 필터가 #filterContent div에로드됩니다.

문제는 각 필터가 한 번만로드되고 탭당 양호한 필터가 표시되기를 바랍니다.

나는 YUI 탭 뷰를 사용하고 있습니다 : http://developer.yahoo.com/yui/tabview/.

var tab0 = tabView.getTab(0); 
var tab1 = tabView.getTab(1); 
var tab2 = tabView.getTab(2); 

tab0.addListener("click", onClickTabToPick); 
tab1.addListener("click", onClickTabToSend); 
tab2.addListener("click", onClickTabFinished); 

var onClickTabToPick = function (e) { 
    $.get("/OrderManager/ToPickFilter", function (data) { 
     $("#filterContent").html(data); 
    }); 
}; 

var onClickTabToSend = function (e) { 
    $.get("/OrderManager/ToSendFilter", function (data) { 
     $("#filterContent").html(data); 
    }); 
}; 

var onClickTabFinished = function (e) { 
    $.get("/OrderManager/FinishedFilter", function (data) { 
     $("#filterContent").html(data); 
    }); 
}; 

어떻게 달성 할 수 있습니까? 미리 감사드립니다.

Answer 1

다른 컨테이너 (filterContent1, filterContent2, filterContent3)에 데이터를로드하기 만하면됩니다. 빈 innerHTML을 사용하여이 A 테이너를 작성할 수 있습니다. 요청하기 전에 $ ('# filterContent1') .html()을 확인할 수 있습니다. 비어있는 경우 요청하고 그렇지 않으면 요청하십시오.

또한 당신은 여전히 ​​하나 개의 컨테이너를 사용할 수 있지만 당신은 어떤 개체의 서버에서 응답을 저장해야합니다

var responses = { tab1: null, tab2: null, tab3: null }; 

var onClickTabToPick = function (e) { 
    if (responses.tab1 == null) 
    { 
     $.get("/OrderManager/ToPickFilter", function (data) { 
      responses.tab1 = data; 
     }); 
    } 
    $("#filterContent").html(responses.tab1); 
}; 

그리고 다른 탭을 처음에 같이.