jQuery UI tabs loading complete page

Hi t90fpe,

In order to assess your ticket we're going to need a reduced case that shows the issue. The example code you provided appears to work just fine - http://jsfiddle.net/tj_vantoll/HWZ8H/.

Replying to [comment:1 tj.vantoll]:

Hi t90fpe, In order to assess your ticket we're going to need a reduced case that shows the issue. The example code you provided appears to work just fine - http://jsfiddle.net/tj_vantoll/HWZ8H/.

Well that's that tricky part. I know that the demo code I used do work on the jQueryUI site. I think that there are some other external dependencies. I am for example using Firefox 17.0.1 and IE 9 both showing the same result. In the Firebug log window I can se that the javascript references are been fetched over and over again like an infinite loop.

"

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="includes/javascript/jQuery/jquery-ui-1.9.2.custom.min.js"></script>

"

The only thing I changed in the code was the referens to version 1.9.2 of jQueryUI instead of 1.8.17. I have taken screenshoots for each case, is there a way to include this with the ticket? This clearly shows how the tab content is loaded by the complete page.

Replying to [comment:2 t90fpe]:

Well that's that tricky part. I know that the demo code I used do work on the jQueryUI site. I think that there are some other external dependencies. I am for example using Firefox 17.0.1 and IE 9 both showing the same result. In the Firebug log window I can se that the javascript references are been fetched over and over again like an infinite loop. " <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="includes/javascript/jQuery/jquery-ui-1.9.2.custom.min.js"></script> " The only thing I changed in the code was the referens to version 1.9.2 of jQueryUI instead of 1.8.17. I have taken screenshoots for each case, is there a way to include this with the ticket? This clearly shows how the tab content is loaded by the complete page.

You can link to images hosted elsewhere. But, we're going to need a reduced test case that shows the issue without external dependencies.

Here are the two images. The only difference in the code is the inclusion of the two jQueryUI versions. FYI, I did change the CSS according to the jQuery UI 1.9 upgrade docs.

https://dl.dropbox.com/u/9943878/jQueryUI.1.8.17.png

https://dl.dropbox.com/u/9943878/jQueryUI.1.9.2.png

Please note the tab content in the image of the 1.9.2. Also pay attention to the header buttons that increase in size for every refresh/reload of the java script.

I'll try to put together a small test case.

As a development tool I use:

PHP 5.3.10

Apache 2.2.21

MySQL 5.5.16

Firefox 17.0.1

IE 9

I've tried to investigate this a bit further. In IE9, the complete page is not showing in the tabpanel as in Firefox but in IE9 the tab content is outside the actual tab panel. If I use the code from the jQuery UI demo I get the following result:

https://dl.dropbox.com/u/9943878/jqueryui192_ie9.png

In the debug view in IE (F12) the result looks kind of strange, please have a look at the following screenshot.

https://dl.dropbox.com/u/9943878/jqueryui192_ie9_debug.png

As you can see there are three div panels with id ui-tabs-[1..3] and role tabpanel and these are tied to the actual tabs. My tabpanels with id "tabs-[1..3]" are not tied to the tabs and are rendered below. As you can see from the code I don't have these "ui-tabs-[1..3]" they must be added by the jQuery UI framework?

If I changed the IDs of my tabpanels to "ui-tabs-[1..3]" instead of "tabs-[1..3]" in the debug window the tabs and the tabpanels are looking OK in IE9.

Code:

...
<link rel="stylesheet" href="includes/javascript/jQuery/themes/custom/jquery.ui.ink66.css" type="text/css" media="screen">
<script type="text/javascript" src="includes/javascript/jQuery/jquery-1.8.3.min.js"></script>  
<script type="text/javascript" src="includes/javascript/jQuery/jquery-ui-1.9.2.custom.min.js"></script>
</script>


<script type="text/javascript">
$(document).ready(function(){
  ...
  $( "#tabs" ).tabs();  


...

<tr>       
<td>
<table id="tab-container-categorylisting" width="100%" cellpadding="1" cellspacing="0">  
<tbody>  
<tr>    
<td>
<div id="tabs">    
<ul>        
<li><a href="#tabs-1">Nunc tincidunt</a></li>        
<li><a href="#tabs-2">Proin dolor</a></li>        
<li><a href="#tabs-3">Aenean lacinia</a></li>    
</ul>    

<div id="tabs-1">        
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>    
</div>    

<div id="tabs-2">        
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>    
</div>    

<div id="tabs-3">        
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>    
</div>
</div>    
</td>  
</tr>  
</tbody>
</table>       
</td>     
</tr>
...

Since you can't reproduce this for us, we're going to have to close this. However, I'd first like to ask one question: Are you using <base> in your code?

Replying to [comment:7 scott.gonzalez]:

Since you can't reproduce this for us, we're going to have to close this. However, I'd first like to ask one question: Are you using <base> in your code?

Yes, I am using <base> in my code. I am trying to put together a small test case.

Replying to [comment:8 t90fpe]:

Yes, I am using <base> in my code. I am trying to put together a small test case.

Don't bother.

Duplicate of #7822.

I have the same weird effect in Firefox 21 with jQuery 2.0.0 and jQueryUi 1.10.3: The first tab reloads the complete page in its panel where the first tab loads the complete page in its panel and so on.

I do not use the <base> tag on the page. But my assumption is, that this effect is caused by the Firefox addon "Adblock plus". The error doesn't occur, when I start Firefox in safe mode (without addons). The tabs are display also correctly when I deactivate "Addblock plus" (the addon totaly, not just select "deactive Addblock plus for this page" in the addons settings).

So maybe the addon "Adblock plus" (or an other addon?) causes this problem and because of this, the error isn't reproduceable by the jQueryUI team?

@t90fpe: Do you have it installed this addon while getting this strange error?

Cheers, Joe

I have the same issue but not using "Addblock plus". I have also the problem on IE 10.

I use jqueryui 1.10.3 with jquery 1.9.1

If I use link to ID, the DIV content is outside the tabs and if I use links to other pages, it loop with loading the complete page.

Thanks.

Replying to [comment:12 c2jinfo@…]:

I have the same issue but not using "Addblock plus". I have also the problem on IE 10. I use jqueryui 1.10.3 with jquery 1.9.1 If I use link to ID, the DIV content is outside the tabs and if I use links to other pages, it loop with loading the complete page. Thanks.

As we've mentioned before, we need a reduced test case that shows this problem in order to investigate.

We have the same problem. Seems that the base tag causes the situation. As when we delete base tag from our code everything is working fine.

We tried to reproduce the problem with jsfiddle (with included base Tag in the code) but there it works fine.

We are using jquery 1.10.2 and jquery ui 1.10.3

Any solution in sight????

Replying to [comment:14 Johnny990]:

We have the same problem. Seems that the base tag causes the situation. As when we delete base tag from our code everything is working fine. We tried to reproduce the problem with jsfiddle (with included base Tag in the code) but there it works fine. We are using jquery 1.10.2 and jquery ui 1.10.3 Any solution in sight????

Please read through the discussion on the duplicate of this ticket: #7822.

Do this reload occur on a username/password protected site (.htpasswd)? Then see bug #9984 for a solution.