JQuery工具::無法在第二個選項卡中加載AJAX內容

Question

jQuery工具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代碼段”以完成頁面。

事情在這里很好，但是當我轉到第三個選項卡時，僅顯示左面板，並且我必須重新加載頁面以修復它，例如，右面板顯示

我認為問題可能與選項卡加載內容的方式以及AJAX不會在第二個選項卡中加載內容有關，因為它已經加載了“ $（document）.ready（function（{}）;”）。重新加載頁面后，將刷新文檔，然后執行新的AJAX。

希望有道理。

PS相同的過程適用於第三個選項卡，相同的腳本結構。 HTML文件的內容（Web內容）發生了變化。

Answer 2

我解決了這個問題。

摘要：

• 每個div使用唯一的ID。
• 由於AJAX無法獲得正確的值，因此每個HTML輸入都使用唯一的ID。

現在所有人似乎都可以使用此實現正常工作。