jQuery Tools ::无法在第二个选项卡中加载Ajax内容

Question

jQuery工具v1.2.7

问题：

当前处理三个选项卡，这些选项卡是通过AJAX调用加载到PHP控制器（MVC）的三个选项卡。

第一个选项卡加载控制器返回的简单HTML文件。

第二个选项卡加载两个不同的文件，通过并行AJAX调用（左图和右图）调用。事情在这里运作良好。

第三个选项卡的作用几乎相同，但是问题是右面板确实加载了，除非整个页面重新加载，否则所有选项卡都可以正常工作

要注意的是，当我从选项卡2切换到3时，右面板不会显示，然后我返回到上一个标签2，现在应该出现在Tab 3上的面板显示在Tab上2.

我已经完成了研究，但是一切都指向jQuery UI，我正在使用工具。我需要一种方法来刷新每个过渡的标签，或避免使用"重叠"的类型。

我尝试重新设计该站点，但问题仍然发生。

如果需要任何代码，请告诉我。

预先感谢。

Answer 1

感谢您研究：

主页（加载选项卡）：

<ul class="css-tabs">
<li><a href="controller1/getOne">1</a></li>
  <li><a href="controller1/getTwo">2</a></li>
  <li><a href="controller2/getThree">3</a></li>
</ul>
<div class="css-panes">
  <div id="dynamic-pane"></div>
  <div id="dynamic-pane"></div>
  <div id="dynamic-pane"></div>
</div>
<!-- activate tabs with JavaScript -->
<script>
    $(function() {
      $("ul.css-tabs").tabs("div.css-panes > div.#dynamic-pane", {
      history: true,
      effect: 'fade',
      onBeforeClick: function(event, i) {
        var pane = this.getPanes().eq(i);
        pane.load(this.getTabs().eq(i).attr("href"));
      }
  });
});
</script>

第二个选项卡通过jQuery工具" HREF"方法加载了Controller2的内容。然后，此类内容是一个带有JS的HTML文件，该文件进行另一个AJAX调用：

<script src="../js/secondTab.js"></script>
<script>$(document).ready(function() { showLeftPanel(); showRightPanel(); }); </script>
<div id="dynamic-content-left"> </div>
<div id="dynamic-content-right"> </div>

JS脚本包括：

function showLeftPanel(){
    $.ajax({
        type: "POST",
        url: "controller2/showLeftPanel",
        contentType: "html",
        success: function(response) {
            $("#dynamic-content-left").html(response);
        }
    });
};
function showRightPanel(){
    $.ajax({
        type: "POST",
        url: "controller2/showRightPanel",
        contentType: "html",
        success: function(response) {
            $("#dynamic-content-right").html(response);
        }
    });
};

的原因是，因为此项目具有聪明，并且使用Render（）方法返回" html代码"以完成页面。

在这里工作正常，但是当我转到第三个选项卡时，只显示左面板，我必须重新加载页面以修复它，例如，右面板显示

我认为问题可能与选项卡加载内容的方式以及Ajax不会在第二个选项卡中加载内容的事实有关已经在上一个选项卡中加载（TAB 2）。一旦我重新加载页面，文档就会刷新，然后执行一个新的ajax。

希望这是有道理的。

p.s 适用于第三个选项卡，相同的脚本结构。更改是HTML文件（Web内容）的内容。

Answer 2

我解决了问题。

摘要：

• 为每个部门使用唯一ID
• 每个HTML输入使用唯一ID，因为Ajax没有获得正确的值。

现在似乎都可以使用此实现。