2012-02-17 3 views
1

Jquery UI 탭에는 탭 추가 후 즉시 트리거되는 추가 이벤트가 있습니다. 이 예제에서 버튼을 클릭하면 새 탭이 추가되고 선택됩니다.새로 추가 된 jquery 사용자 탭에 Ajax 콘텐츠를로드 한 후 콜백 함수를 실행하는 방법

나는 다음과 같은 방법으로 AJAX를 사용하여 동적 콘텐츠를 추가 해요 :

var $tabs = $("#tabs").tabs({ 
    tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>", 
    add: function (event, ui){ 
     var lastIndex = $("#tabs").tabs("length")-1; 
     $("#tabs").tabs("select", lastIndex); 
    } 
}); 

function createTab(phpFile){ 
    $tabs.tabs("add", phpFile, "Tab Title"); 
} 

$("button").on('click', function(){     
    var url = "search.php?term=someRandomString"; 
    createPlaySongTab(url);  
}); 

내 목표는 너무

add: function (event, ui){ 
     $(ui.panel).hide(); 
     var lastIndex = $("#tabs").tabs("length")-1; 
     $("#tabs").tabs("select", lastIndex); 
     $(ui.panel).fadeIn(1000); 
    } 

같은 패널에 새로 추가 된 내용 페이드를하는 것입니다의 내 가정 해 봅시다. PHP는 이것처럼 보였습니다

<?php sleep(1); echo 'hello world!';?> 

이 경우 내용은 전혀 오랜 시간 o fade가 fadeIn(1000)이고 add 이벤트는 .php 파일 로딩이 끝난 후에가 아니라 탭이 추가 된 직후에 트리거됩니다. 콘텐츠가 완전히로드 된 후 어떻게 페이드 인 할 수 있습니까?

+0

이것은 당신이 찾고있는 것이 아니지만 AJAX get 호출을 사용하면 성공 함수에서 fadeIn을 호출 할 수 있습니다. –

+0

감사합니다. Kris, jquery UI 탭을 통합하기 전에 AJAX 호출을 사용했습니다.하지만 jQuery UI를 사용할 때 특히 새로 작성된 탭으로 호출하는 ajax 출력을 파싱하는 방법이 특히 선호되었습니다. – user784637

답변

2

로드 이벤트를 시도하십시오. 이 이벤트는 원격 탭의 내용이로드되면 시작됩니다.

$(".selector").tabs({ 
    load: function(event, ui) { ... } 
}); 
0

jquery 함수가 있습니다. ajaxcomplete(); 구글, 희망이 도움이 되길 바랍니다. $ ('# element'). ajaxcomplete (function() {your stuff //});

+0

그 기능을 살펴 보았습니다. Kris가 내 원래 게시물에 대한 의견에서 제안한 것과 비슷합니다. 나는 jQuery UI 탭을 통해 ajax 호출이 메소드 http://jqueryui.com/demos/tabs/#method-add를 추가하기 때문에 당신의 제안을 어떻게 구현할 수 있을지 모르겠다. 나는 당신이 내 질문에 대한 맥락에서 묘사하고있는 것에 대한 실례를 고맙게 생각합니다. – user784637

+0

ajax 호출을 $ ('# element')에 바인딩하고 $ ('# element'.ajaxcomplete ...) 함수를 스크립트에 추가하면 자동으로 Ajax가 완료되면 자동으로 호출됩니다. 어떤 요소에서 아약스를 호출 한 다음 다이나믹 함수의 반환 값을 얻는 것처럼 까다로운 작업을 수행하십시오. 어떤 요소도 이고 $ ('. animNow') 한 번 함수를 추가하십시오. stuff와 $ (document) .find ('. animNow'). remove();}) // 그런 것 – Ironsun

관련 문제