Ticket #4033 (closed bug: fixed)
Tab hrefs may be converted to full URLs in IE, then misinterpreted as ajax tabs
| Reported by: | mgl | Owned by: | klaus.hartl |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.7 |
| Component: | ui.tabs | Version: | 1.6rc6 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
I already posted about this in Google groups. After upgrading an application I've been working to jQuery 1.3.1 and UI 1.6rc6, I encountered a problem where some UI dialogs I have that contain tabs would not load properly in IE 6/7. The code below exemplifies the problem. I have been able to fix this problem in my case by adding:
if (href.indexOf("#")>0) href = href.substring(href.indexOf("#"));
at line 65 in ui.tabs.js. I don't know if this is a proper solution, but it fixes the problem in my specific case.
Here's the example that recreates the problem I encountered.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dialog Bug</title>
<link rel="stylesheet" type="text/css" href="../css/ui.all.css" />
<script type="text/javascript" src="../js/jquery/jquery.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.core.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.draggable.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.resizable.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.dialog.js"></script>
<script type="text/javascript" src="../js/jquery/ui/ui.tabs.js"></script>
<script>
var tabdialog = function()
{
var t = this,
content = (t.content = $('<div />').dialog()),
divTabs = (t.divTabs = $('<div><ul><li><a href="#tab1">Tab 1</a></li><li><a href="#tab2">Tab 2</a></li></ul><div id="tab1">stuff here</div><div id="tab2">stuff here</div></div>')
.appendTo(content).tabs());
}
$(document).ready(function(){
var x = new tabdialog();
x.content.dialog("open");
});
</script>
</head>
<body>
</body>
</html>
Change History
comment:1 Changed 4 years ago by klaus.hartl
- Owner set to klaus.hartl
- Priority changed from minor to critical
- Status changed from new to assigned
- Milestone changed from TBD to 1.6
comment:2 Changed 4 years ago by klaus.hartl
- Summary changed from Tab IDs may be converted to full URLs in IE, then misinterpreted by ui-tabs to Tab hrefs may be converted to full URLs in IE, then misinterpreted as ajax tabs
comment:3 Changed 4 years ago by klaus.hartl
- Status changed from assigned to closed
- Resolution set to fixed
comment:4 Changed 4 years ago by syragon
This issue has only been fixed in the case there is no <BASE HREF> element within the HTML document.
When the above tag is defined, you can end up with a scenario where:
Current page URL in browser = www.domain.com/some_page.html AND Base Href = www.domain.com/ AND <a href="#tabs-1"> = www.domain.com/#tabs-1 (In IE) SHOWS href.split('#')[0] = www.domain.com/ AND SHOWS location.toString().split('#')[0] == www.domain.com/some_page.html
Resulting in the expression: (href.split('#')[0] == location.toString().split('#')[0]) never returning true.
I hope a fix for this is released soon, I had to hack the code. I noticed UI has not been updated in a while.
comment:5 Changed 4 years ago by klaus.hartl
- Status changed from closed to reopened
- Resolution fixed deleted
comment:6 Changed 4 years ago by klaus.hartl
- Priority changed from critical to minor
- Status changed from reopened to assigned
comment:7 Changed 4 years ago by klaus.hartl
- Status changed from assigned to closed
- Resolution set to fixed
comment:8 Changed 4 years ago by justlost
I encountered the same issue Syragon stated.
All its needed to fix it is:
change:
if (href.split('#')[0] == location.toString().split('#')[0]) href = a.hash;
to:
if (location.toString().split('#')[0].search(href.split('#')[0]) > -1 ) href = a.hash;
I used this to fix my issue, it searches for the base url in href on the document location.