CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-ui-tabs
Chris West
Chris West

Reputation: 741

Jquery UI - Tabs reacting weired

I'm having a wierd problem with jquery ui tabs.

here's the code:

  <div class="ym-gbox">
    <script>
    $(function() {
        $( "#tabs" ).tabs();
    });
    </script>
            <h1>Versions Übersicht</h1>
    <br />
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">System Kern</a></li>
            <li><a href="#tabs-2">Anwendungen</a></li>
            <li><a href="#tabs-3">Bibliotheken</a></li>
        </ul>
        <div id="tabs-1">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" class="bordertable">
<tr><th>Name</th><td>System Kern</td></tr>
<tr><th>Version</th><td>1.0.0 </td></tr>
<tr><th>Beschreibung</th><td></td></tr><tr><td colspan="2">System Kern</td></tr>
<tr><th>Webseite</th><td>http://www.dsws.biz</td></tr>
<tr><th>Lizenz</th><td>Dark Star Web Services Source Lizenz</td></tr>
<tr><th>Autor</th><td>
</td></tr>
</table>
        </div>
        <div id="tabs-2">
            b
        </div>
        <div id="tabs-3">
            c
        </div>
    </div>
  </div>

As soon as the page loads, the complete page is loaded into the tab tabs. I don't really have a clue why this happens.

Upvotes: 4

Views: 2043

Answers (6)

eagle779
eagle779

Reputation: 704

For me this exact problem was related to the base tag and couldn't be solved by click event Chris idea refers to. It may also occur if your urls are being rewritten to have the full absolute url, e.g. by a caching tool or .htaccess

So if your tabs were being rewritten as <a href="http://example.com/page/#tab1">tabname</a>

Then a solution is to remove the full url before initializing the tabs. The following (expanded to keep it simple), removes everything leading up to the #

jQuery("#mytabs ul li a").each(function () {
    var current = jQuery(this).attr("href");
    var n = current.indexOf("#");
    jQuery(this).attr("href", current.substr(n));
});

jQuery("#mytabs").tabs( .. )

Upvotes: 4

Chris West
Chris West

Reputation: 741

I found the core of the problem. The System does not prevent the default handler from beeing fired. For Links it is an redirect to the page. If you add the preventDefault inside of a click handler and handle the click event according to what you want to do (for example change Tab to selected tab) you can bypass this.

example:

$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
});

This example is taken from this page: http://getbootstrap.com/javascript/#tabs

I had a quite similar problem today. After adding this code it worked without a problem.

Upvotes: 0

Night Owl
Night Owl

Reputation: 4213

If removing the BASE tag will not work for your site environment (because of URL rewriting or other similar techniques being used) the solution is to generate a variable containing the full URL of the current page and write it to the beginning of your tab HREFs before the #tab-number matching your tab IDs. This way jQuery UI will identify that your tab content is local to the current page and not try to load it via AJAX using the URL stored in the BASE tag. A PHP example would be:

$url = "http" . ((!empty($_SERVER['HTTPS']) && strtolower($_SERVER['HTTPS']) != 'off') ? "s://" : "://") . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

There may be more complete or accurate ways to get the proper current URL, especially if you are using a load balancer, in the answers to this Stack question:

http://stackoverflow.com/questions/6768793/php-get-the-full-url

Upvotes: 1

Dmitry P.
Dmitry P.

Reputation: 384

As user user2235863 said, you need to delete base tag from the code to make it work. I don't know why it works, but it is.

But this modification can have a side effects like loading relative url images. The solution is delete base tag using javascript after page load and before tabs init:

jQuery(function($){
    $('base').remove();
    $('#tabs_div').tabs();
});

Upvotes: 3

Skobbejak
Skobbejak

Reputation: 106

The solution is to remove the HTML < base href="http://site_name" / > from your pages. (Base Tags)

I had the same problem and this fixed it for some reason. I'm using ui-1.10.2

Upvotes: 1

Fred
Fred

Reputation: 11

I'am having the same weird problem that the tab is loaded with the complete page. It seems like an infinite loop where the tab content is loaded with the complete page over and over.

This happens using ver. 1.9.2 of jQueryUI and ver. 1.8.3 of jQuery but not in ver. 1.8.17 of jQueryUI and ver. 1.8.3 of jQuery. That's why jsfiddle does not show it.

Chris I am also using a mod_rewrite module but I really need it so it is not an option to skip it nor to use an Ajax-based version.

Upvotes: 1

Related Questions