Search code examples
javascriptphpjqueryhtmljquery-tools

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

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.

Solution

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