Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#8931 closed bug (duplicate)

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>

Change History (16)

comment:1 Changed 7 years ago by tj.vantoll

Owner: set to 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/.

comment:2 in reply to:  1 ; Changed 7 years ago by t90fpe

Status: pendingnew

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

comment:3 in reply to:  2 Changed 7 years ago by tj.vantoll

Status: newpending

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

comment:4 Changed 7 years ago by t90fpe

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

comment:5 Changed 7 years ago by tj.vantoll

Status: newpending

comment:6 Changed 7 years ago by t90fpe

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

comment:7 Changed 7 years ago by Scott González

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?

comment:8 in reply to:  7 ; Changed 7 years ago by t90fpe

Status: pendingnew

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

comment:9 in reply to:  8 Changed 7 years ago by Scott González

Replying to t90fpe:

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

Don't bother.

comment:10 Changed 7 years ago by Scott González

Resolution: duplicate
Status: newclosed

Duplicate of #7822.

comment:11 Changed 6 years ago by jrooster

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

comment:12 Changed 6 years ago by 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.

comment:13 in reply to:  12 Changed 6 years ago by tj.vantoll

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

comment:14 Changed 6 years ago by 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????

Last edited 6 years ago by Johnny990 (previous) (diff)

comment:15 in reply to:  14 Changed 6 years ago by tj.vantoll

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

comment:16 Changed 6 years ago by jrooster

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

Last edited 6 years ago by jrooster (previous) (diff)
Note: See TracTickets for help on using tickets.