다른 탭을 클릭하면 jqueryui ajax 탭로드가 중단됩니다.

두 개의 탭이있는 jQueryUI 탭 컨트롤이 있습니다. 하나는 아약스를 통해 내용을로드하고 기본 탭입니다. 다른 하나는 간단한 아약스가 아닌 탭입니다.다른 탭을 클릭하면 jqueryui ajax 탭로드가 중단됩니다.

사용자가 페이지를 방문하면 ajax 탭이 표시됩니다. 콘텐츠를로드하는 데 최소 5-10 초가 걸리기 때문에 일부 사용자는 두 번째 탭을 클릭하여 봅니다. 이 시점에서 두 번째 탭이 표시 될 때 ajax 호출이 취소 된 것처럼 보입니다. 탭의 로더가 사라지고 ajax 탭으로 다시 돌아 가면 빈 div가 표시됩니다. 캐싱을 해제 했으므로 탭이 다시로드되지 않습니다. 캐싱을 켜면 사용자가 최소한 데이터를 다시 요청할 수 있지만 이러한 호출은 오랜 시간이 걸릴 수 있기 때문에 실행 가능한 솔루션이 아닙니다.

이상적인 동작은 아약스 탭이 다른 탭을 클릭해도 요청을 계속 열어 두는 것입니다.

이것이 가능합니까?

if (this.xhr) { 
    this.xhr.abort(); 
    delete this.xhr; 
}

하지만 당신은 그것을 약간의 트릭이처럼 select 이벤트 핸들러를 사용하여 해당 이전 XmlHeepRequest에 대한 참조를 제거 할 수 있습니다 :

출처

2010-08-16 jmcmichael

기본 동작, 대기중인 요청상의 .abort()를 호출 you can see it in the source here입니다 : select event handler가 before that .abort() call when selecting을 유발하기 때문에

$("#tabs").tabs('destroy').tabs({ 
    select: function(event, ui) { 
    $(this).data("tabs").xhr = null; 
    } 
});

이 작동합니다.

출처

2010-08-16 16:16:36

감사! 나는 이것을 시도하고보고 할 것이다. – jmcmichael

좋습니다,이 기술은 작동하지 않습니다. select 이벤트가 제대로 트리거되지만 첫 번째 (기본) 탭으로 설정 한 ajax가 있고 선택 탭은 탭을 클릭 할 때만 발생하며 선택되지 않은 이벤트는 기본 탭이 아닌 경우에만 발생합니다. 그럼에도 불구하고 내가 다른 탭을 클릭하고 아약스 탭으로 돌아 왔을 때, 아약스가 아닌 탭으로 전환 할 때 아약스 요청이 여전히 중단되었습니다. 따라서 Ajax 탭이 기본 (클릭하지 않고)로드 될 때 select 이벤트가 트리거 된 경우에도이 기술이 작동하는지 확실하지 않습니다. – jmcmichael

줄 바꾸기 "$ (this) .data ("tabs "). xhr = null;" ~ "delete this.xhr;" 나는 이것이 효과가 있다고 생각합니다. 그러나 _cleanup 함수는 Ajax 탭의 스피너를 제거합니다. 실제로는 Ajax 쿼리가 중단 된 것처럼 사용자에게 보입니다. 나는 이것이 이상적은 아니지만 오래된 행동보다 낫다고 생각한다. AJAX 요청이 아직 보류 중일 때 스피너가 spinning 동작을 계속할 수 있도록 _cleanup의 동작을 어떻게 든 재정의 할 수 있는지 확인합니다. – jmcmichael

다른 탭을 클릭하면 jqueryui ajax 탭로드가 중단됩니다.

답변

관련 문제