Question

我有一个函数，它在onClick上运行ajax请求并创建一个包含已加载数据的新选项卡。它工作正常，但为了更好的用户体验，我正在尝试在功能完成后加载选项卡，因此用户无需单击新创建的选项卡。

以下是代码：

function addTab(id, name, action) {
 var tabs = $( "#tabs" ).tabs();
 var tabTemplate = "<li style='max-height:32px;'><a href='#"+id+"'>"+name+"</a> <span class='ui-icon ui-icon-close' onclick='removeTab()' role='presentation'>Remove Tab</span></li>";
      tabs.find( ".ui-tabs-nav" ).append(tabTemplate);
       $.ajax({ 
        type: 'GET', 
        url: action+'?id='+id, 
        data: { get_param: 'value' },
        dataType: "text",
        success: function(data) {var j = $.parseJSON(data);
                      tabs.append(
                   //formatting json response
                      );
                    }

    });
      tabs.tabs( "refresh" );
     $("#tabs").tabs("load", "#"+id); //this thing is not working
    }

Answer 1

这可能是由于您的ajax请求的异步调用造成的。 $("#tabs").tabs("load", "#"+id);将在发送ajax响应之前执行。将依赖于响应的所有内容放入成功函数中，它将起作用。在你的情况下：

＆＃13;

function addTab(id, name, action) {
 var tabs = $( "#tabs" ).tabs();
 var tabTemplate = "<li style='max-height:32px;'><a href='#"+id+"'>"+name+"</a> <span class='ui-icon ui-icon-close' onclick='removeTab()' role='presentation'>Remove Tab</span></li>";
      tabs.find( ".ui-tabs-nav" ).append(tabTemplate);
       $.ajax({ 
        type: 'GET', 
        url: action+'?id='+id, 
        data: { get_param: 'value' },
        dataType: "text",
        success: function(data) {var j = $.parseJSON(data);
                      tabs.append(
                   //formatting json response
                      );
                    }
      tabs.tabs( "refresh" );
     $("#tabs").tabs("load", "#"+id); //this thing is not working
    });

    }

＆＃13;

Answer 2

load方法无法像宣传的那样工作（我正在使用v1.12.1），需要将IMHO从其文档中删除。另一方面，启动方法可以完成任务。

$( "#tabs" ).tabs({active: 1});

这将切换到第二个选项卡。但是看到文档和this answer，下面的代码可能是更合适的方法：

$( "#tabs" ).tabs( "option", "active", 1 );

不幸的是，无论哪种方式，我们都必须传递选项卡的索引号，并且不能使用分配给选项卡的id值（这是“加载”的主要功能）。

jQuery选项卡“加载”方法不起作用

2 个答案: