탭에 자신의 콘텐츠 추가하기 이벤트 UI

Question

새 탭에 내 자신의 콘텐츠를 추가 할 때 몇 가지 문제가 있습니다.

  add: function(event, ui) { 
      _CURRENT_TAB = $(ui.tab).attr('href'); 
      var tab_content = "TEST"; 
      $(ui.panel).append("<p>" + tab_content + "</p>"); 
      $tabs.tabs('select', '#' + ui.panel.id); 

는하지만 클릭 기능에 콜백을했습니다 :이 사용하고

function tb(tab_title){ 
      return '#\\#tabs'+tab_title; 
     }; 

$("#buuton").click(function(){ 
       $.post("open.php", { read: file }, 
        function(data){ 
         var read = data.read; 
         alert(read); 
         tab_content = read; 
        }, "json"); 

      $tabs.tabs("add", "#tabs-" + tab_counter, "Lorem"); 
      tab_counter++; 
      $(tb(tab_title)).append(tab_content); 
} 

: http://jqueryui.com/demos/tabs/#manipulation. AJAX는 작동합니다 - 그것은 내가 원하는만큼 가치를 제공합니다. 내가 뭘 잘못하고있어? 어떻게해야합니까?

Answer 1

비동기 트랜잭션의 작동 방식을 이해하는 것이 문제입니다. $ .post를 호출하면 .post가 완료되기 전에 javascript가 계속 실행됩니다. 이것은 비동기 트랜잭션의 성격입니다. .post 함수가 tab_content의 값을 설정하기 전에 기본적으로 tb 함수를 호출하고 있습니다. tb() 함수가 .post 핸들러 함수 내에서 호출되도록 논리가 이와 같아야합니다.

$.post("open.php", { read: file }, function(data){ 
    var read = data.read; 
    alert(read); 
    tab_content = read; 
    $tabs.tabs("add", "#tabs-" + tab_counter, "Lorem"); 
    tab_counter++; 
    $(tb()).append(tb(tab_title)); 
}, "json");