JQuery tools :: Unable to load AJAX content in second tab

Question

jQuery Tools v1.2.7

Issue:

Currently handle three tabs, which content is loaded via AJAX call to a PHP controller (MVC).

The first tab loads a simple HTML file returned by the controller.

The second tab loads two different files, called by parallel AJAX calls (left panel and right panel). Things work well here.

The third tab does pretty much the same, but the problem is that THE RIGHT PANEL DOES LOAD UNLESS THE ENTIRE PAGE IS RELOADED, THEN ALL TABS WORK FINE

Something to notice is that when I switch from tab 2 to 3, the right panel does not show up, I then go back to the previous tab 2 and now the panel which was supposed to appear on tab 3 is showing on tab 2.

I have done my research, but everything points to JQuery UI, I am using tools. I need a way to either refresh the tab on each transition or avoiding the kind of "overlap".

I have tried redesigning the site, but the issue still happens.

If any code is required let me know.

Thanks in advance.

Answer 1

I resolved the issue.

Summary:

• use of unique ID's for each div.
• use of unique id's for each HTML input, since AJAX was not getting the correct values.

All seems to be working fine with this implementation now.

Answer 2

Thanks for looking into this:

Home (where tabs are loaded):

<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>

The second tab, is loaded with content from the controller2 via JQuery tools "href" method. Then, such content is an HTML file with a JS which makes another AJAX call:

<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>

The JS script includes something like:

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);
        }
    });
};

The reason for this, is because this project has smarty and the render() method is used to return the "piece of HTML code" to complete the page.

THINGS WORK FINE HERE, BUT WHEN I GO TO THE THIRD TAB ONLY THE LEFT PANEL IS DISPLAYED AND I HAVE TO RELOAD THE PAGE TO FIX IT, E.G, THE RIGHT PANEL SHOWS UP

I think the issue may be related to the way the tabs load the content and the fact that AJAX does not load the content in the second tab since it "$(document).ready(function({});" was already loaded in the previous tab (tab 2). Once I reload the page, the document is refreshed and then a new AJAX called is performed.

Hope it makes sense.

P.S The same process applies for third tab, same scripts structure. What changes is the content of the HTML files (web content).