#9584 closed bug (fixed)

Opened October 03, 2013 08:39PM UTC

Closed October 04, 2013 02:10PM UTC

Last modified November 26, 2013 08:44PM UTC

Tabs: Refresh issue when tabs are moved to bottom

Reported by:	SledgehammerPL	Owned by:	SledgehammerPL
Priority:	minor	Milestone:	1.10.4
Component:	ui.tabs	Version:	1.10.3
Keywords:		Cc:
Blocked by:		Blocking:

Description

Browsers: IE and Chrome (other not tested)

OS: XP, Win8 (other not tested)

How to reproduce bug:

It's hard to me to show it on jsFiddle, because the problem is with ajax loaded content.

The base is here :

http://jsfiddle.net/Sledgehammer/hCdRy/9/

The idea of the problem: tab-index.html contains only this:

<ul>
  <li><a href="deny.html">FOOBAR</a></li>
</ul>
    <span style="cursor:pointer" onclick="$.addTab();">PRESS HERE TO ADD TAB</span>

After loading page almost looks ok. But firing addTab() by clicking PRESS HERE TO ADD TAB should just add new Tab. But it makes strange new Tab (without) borders, and changes <li> FOOBAR</li> from first tab into a new tablist and new tab

if you want, you can see the problem here: http://www.kredyty.brzezina.pl/debug/

Attachments (0)

Change History (9)

Changed October 03, 2013 08:52PM UTC by scottgonzalez comment:1

owner:	→ SledgehammerPL
status:	new → pending

There's no reason that you need to use ajax to show whatever bug you're describing. Just inject the markup directly. You should be able to reduce this quite a bit.

Changed October 03, 2013 09:40PM UTC by SledgehammerPL comment:2

status:	pending → new

Replying to [comment:1 scott.gonzalez]:

There's no reason that you need to use ajax to show whatever bug you're describing. Just inject the markup directly. You should be able to reduce this quite a bit.

1. yes, you're right, I reduced two functions not connected to the problem.

2. I'm not sure what you mean "inject the markup".

Changed October 04, 2013 05:50AM UTC by tj.vantoll comment:3

status:	new → pending

Replying to [comment:2 SledgehammerPL]:

2. I'm not sure what you mean "inject the markup".

Don't rely on remote files, for example - http://jsfiddle.net/tj_vantoll/ZjgbK/

Changed October 04, 2013 06:12AM UTC by SledgehammerPL comment:4

_comment0:	Replying to [comment:3 tj.vantoll]: \ > Replying to [comment:2 SledgehammerPL]: \ > > 2. I'm not sure what you mean "inject the markup". \ > \ > Don't rely on remote files, for example - http://jsfiddle.net/tj_vantoll/ZjgbK/ \ Ok, this is not exactly the same, but let's try to fix this \ \ http://jsfiddle.net/Sledgehammer/hCdRy/14/ \ \ Expected result is simply add new tab and when clicked on new tab -> shows new content loaded from external link \ \ But unexpectedly previous content (contained <li> tags) is lost... → 1380867209940773
status:	pending → new

_comment0:

Replying to [comment:3 tj.vantoll]: \ > Replying to [comment:2 SledgehammerPL]: \ > > 2. I'm not sure what you mean "inject the markup". \ > \ > Don't rely on remote files, for example - http://jsfiddle.net/tj_vantoll/ZjgbK/ \ Ok, this is not exactly the same, but let's try to fix this \ \ http://jsfiddle.net/Sledgehammer/hCdRy/14/ \ \ Expected result is simply add new tab and when clicked on new tab -> shows new content loaded from external link \ \ But unexpectedly previous content (contained <li> tags) is lost... → 1380867209940773

status:

pending → new

Replying to [comment:3 tj.vantoll]:

Replying to [comment:2 SledgehammerPL]: > 2. I'm not sure what you mean "inject the markup". Don't rely on remote files, for example - http://jsfiddle.net/tj_vantoll/ZjgbK/

Ok, this is not exactly the same, but let's try to fix this

http://jsfiddle.net/Sledgehammer/hCdRy/14/

Expected result is simply add new tab and when clicked on new tab -> shows new content loaded from external link

But unexpectedly previous content (contained <li> tags) is lost... And press RIGHT TAB 1 after adding NEW TAB - it contains another tablist

Changed October 04, 2013 07:31AM UTC by tj.vantoll comment:5

status:	new → open
summary:	Jquery Tabs creates unwanted tabs from external contents → Tabs: Refresh issue when tabs are moved to bottom

Here's a reduced test case - http://jsfiddle.net/tj_vantoll/maC8B/. Something about the

<ul><li><a href>

structure on the other tab is throwing this off.

The tabs also have to be on the bottom for this issue to happen as well. I'll have to dig into this more before determining if this is something we should support, but it seems like a legit problem so I'll mark it valid for now.

Changed October 04, 2013 02:10PM UTC by Scott González comment:6

resolution:	→ fixed
status:	open → closed

Tabs: Keep reference to existing tablist during refresh. Fixes #9584 - Tabs: Refresh issue when tabs are moved to bottom.

Changeset: e14f75ed480e5b036bb47ab3398d1e0df28a128a

Changed October 04, 2013 02:10PM UTC by scottgonzalez comment:7

milestone:	none → 1.11.0

Changed November 26, 2013 08:12PM UTC by Scott González comment:8