Question

jQuery Tools v1.2.7

问题：

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

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

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

第三个标签几乎完全相同，但问题是正确的面板加载，除非整个页面重新加载，所有标签都能正常工作

需要注意的是，当我从标签2切换到3时，右侧面板没有显示，然后我返回上一个标签2，现在应该出现在标签3上的面板显示在标签上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代码段”以完成页面。

事情在这里工作很好，但是当我去第三张桌子时，只显示左侧面板并且我必须重新安装页面以固定它，EG，正确的面板显示

我认为问题可能与标签加载内容的方式有关，以及AJAX没有在第二个标签中加载内容的事实，因为它“$（document）.ready（function（{}）;”是已经加载到上一个选项卡（选项卡2）。一旦我重新加载页面，文档就会刷新，然后执行一个新的AJAX调用。

希望它有意义。

P.S 同样的过程适用于第三个标签，相同的脚本结构。 HTML文件（Web内容）的内容发生了哪些变化。

Answer 2

我解决了这个问题。

要点：

为每个div使用唯一ID。
为每个HTML输入使用唯一ID，因为AJAX没有获得正确的值。

现在所有这些实现似乎都正常。

JQuery工具::无法在第二个选项卡中加载AJAX内容

2 个答案: