jquery - 在 Jquery 中，为什么在通过函数选择选项卡时未加载该选项卡的内容？

Question

我所追求的行为是当用户单击超链接时 - 然后它启用一个选项卡（在加载时禁用），然后刷新该选项卡的内容

我看到的行为是选项卡被启用然后被选中，但内容没有显示 - 如果我然后单击选项卡，内容就在那里！诡异的！

我的html

<div id="tabs">

    <ul>
      <li><a href="#tab1" id="addloader">Add a Loader</a></li>
      <li><a href="#tab2" id="addcsv">Add a CSV</a></li>
      <li><a href="#tab3" id="manage">Manage Loaders</a></li>
      <li><a href="#tab4" id="runLoaders">Run Loaders</a></li>
      <li><a href="#tab5" id="addChartSql">Add Chart SQL</a></li>
      <li><a href="#tab6" id="manageChartSql">Manage Chart SQL</a></li>
      <li><a href="#tab7" id="editSql">Edit Chart SQL</a></li>
    </ul>

.......

      <div id="tab7" class="tab_content">
          <strong>Edit Chart SQL</strong>
          <div id="editChartSqlData"></div>
      </div>

jQuery

       $(function() {

         $("#tabs").tabs({disabled: [6]});
      });

  function editsql(id) {

$("#tabs").tabs("enable", 6);
$('#tabs').tabs({ selected: 6 }); 


var editid = ('id='+ id);

    $.ajax({
    type: "GET",
    url: "editChartSql.php",
    data: editid,
    success: function(server_response){
    $('#editChartSqlData').html(server_response);
  }
    });

return false;
}

如何让该内容显示在启用的选项卡中？

更新：

1) 用户点击编辑

2) 选项卡已启用并聚焦

3）当用户然后单击选项卡时，它会显示内容

Answer 1

用于 ajax 调用

$.ajax({
    type: "GET",
    url: "editChartSql.php",
    async: false,
    data: editid,
    success: function(server_response){
    $('#editChartSqlData').html(server_response);
  }
    });

Answer 2

它可能非常简单，例如响应是无效的 HTML。执行 console.log 或 console.dir 并检查您从服务器返回的内容。

success: function(server_response){
   console.dir(server_response);
...

Answer 3

我想你想启用当前加载的标签是这样的

 $(function() {

         $("#tabs").tabs({disabled: [6]});
      });

  function editsql(id) {

$("#tabs").tabs("enable", 6);
$('#tabs').tabs({ selected: 6 }); 


var editid = ('id='+ id);

    $.ajax({
    type: "GET",
    url: "editChartSql.php",
    data: editid,
    success: function(server_response){
    $('#editChartSqlData').html(server_response);
     $("#tabs").tabs("enable", editid);
  $('#tabs').tabs({ selected: editid }); 
  }
    });

return false;
}