Geek Answers Handbook

JQuery UI - Tab Engagement

I am having a problem with jquery ui tabs.

here is 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 full page loads into tab tabs. I really don't understand why this is happening.

+4
source share
6 answers

I found the essence of the problem. The system does not prevent the default handler from starting. For links, this is a redirect to the page. If you add preventDefault inside the click handler and handle the click event according to what you want to do (for example, change the tab to the selected tab), you can work around this.

Example:

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

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

Today I had a similar problem. After adding this code, it worked without problems.

0
source

For me, this exact problem is related to the base tag and cannot be resolved using the click event referenced by Chris's idea. This can also happen if your URLs are being rewritten to have a complete absolute URL, for example. using the caching tool or .htaccess

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

Then the solution is to remove the full URL before initializing the tabs. The following (extended so that it is simple) removes everything that leads to #

 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( .. )
+4
source

As user user2235863 said, you need to remove the base tag from the code for it to work. I do not know why this works, but it is.

But this modification may have side effects, such as loading relative url images. The solution is to remove the base tag using javascript after loading the page and before init tabs:

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

I have the same strange problem that the tab is loaded with a full page. This is like an endless loop in which the contents of the tab are loaded with the full page again and again.

This happens with ver. 1.9.2 from jQueryUI and ver. 1.8.3 from jQuery, but not in ver. 1.8.17 from jQueryUI and ver. 1.8.3 from jQuery. This is why jsfiddle does not show it.

Chris. I also use the mod_rewrite module, but I really need it, so you should not miss it or use an Ajax-based version.

+1
source

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

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

+1
source

If the removal of the BASE tag does not work for your site environment (due to rewriting the URL or other similar methods), the solution should generate a variable containing the full URL of the current page and write it to the beginning of your HREF tab before the # tab corresponding to your tab identifiers. This way, the jQuery user interface will determine that the contents of your tab is local to the current page, and not try to load it through AJAX using the URL stored in the BASE tag. PHP example:

 $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 correct current URL, especially if you use a load balancer in answering this question in Stack:

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

More articles:


All Articles