Skip to main content

Search and Top Navigation

#8931 closed bug (duplicate)

Opened December 23, 2012 07:22PM UTC

Closed December 27, 2012 06:03PM UTC

Last modified April 16, 2014 10:16AM UTC

jQuery UI tabs loading complete page

Reported by: t90fpe Owned by: t90fpe
Priority: minor Milestone: 1.10.0
Component: ui.tabs Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

I'm having a wierd problem with jquery ui tabs. As soon as the page loads, the complete page is loaded into the tab tabs. 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. I've used part of the demo code as well as my own SQL-generation code with the same result.

I found another similar problem at Stackoverflow: http://stackoverflow.com/questions/13999152/jquery-ui-tabs-reacting-weired

Could it be related to mod-rewrite as the Stackoverflow author states?

Script:


<script type="text/javascript">

$(document).ready(function(){

$( "#tabs" ).tabs();

..

HTML-snippet:


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

Attachments (0)
Change History (16)

Changed December 23, 2012 10:00PM UTC by tj.vantoll comment:1

owner: → t90fpe
status: newpending

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

Changed December 23, 2012 11:21PM UTC by t90fpe comment:2

status: pendingnew

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.

Changed December 24, 2012 01:15PM UTC by tj.vantoll comment:3

status: newpending

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.

Changed December 26, 2012 09:43AM UTC by t90fpe comment:4

status: pendingnew

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

Changed December 26, 2012 01:19PM UTC by tj.vantoll comment:5

status: newpending

Changed December 26, 2012 07:27PM UTC by t90fpe comment:6

status: pendingnew

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

Changed December 27, 2012 01:27PM UTC by scottgonzalez comment:7

status: newpending

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?

Changed December 27, 2012 05:54PM UTC by t90fpe comment:8

status: pendingnew

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.

Changed December 27, 2012 06:03PM UTC by scottgonzalez comment:9

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.

Changed December 27, 2012 06:03PM UTC by scottgonzalez comment:10

resolution: → duplicate
status: newclosed

Duplicate of #7822.

Changed June 07, 2013 08:45AM UTC by jrooster comment:11

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

Changed August 08, 2013 09:42AM UTC by c2jinfo@c2jinfo.com comment:12

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.

Changed August 08, 2013 01:24PM UTC by tj.vantoll comment:13

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.

Changed January 13, 2014 03:31PM UTC by Johnny990 comment:14

_comment0: 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. \ \ Any solution in sight????1389627280980563

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

Changed January 13, 2014 03:47PM UTC by tj.vantoll comment:15

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.

Changed April 16, 2014 10:16AM UTC by jrooster comment:16

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

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