Добавление собственного контента в пользовательский интерфейс вкладок по событию

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, JavaScript продолжает выполняться до завершения работы .post.Это природа асинхронных транзакций.Таким образом, вы в основном вызываете свою функцию tb до того, как ваша .post-функция закончит установку значения tab_content.Ваша логика должна быть примерно такой, чтобы функция 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");