#7785 closed bug (wontfix)
script in tabs content executed twice when using .tabs("add",...)
Reported by: | nabster | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.9.0 |
Component: | ui.tabs | Version: | 1.8.16 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
When creating a tab dynamically by using .tabs("add",...) it seems that any scripts tags within the content of the tab are executed again. Here is an example code that shows the behavior:
<!DObCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tabs Bug Demo</title> <link rel="stylesheet" type="text/css" href="./css/jquery-ui-1.8.16.custom.css"/> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/jquery-ui.js"></script> <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> --> <script> $(document).ready(function() { var theTab = $("#myTabs").tabs(); theTab.tabs("add","#tab-4","Tab 4 (added dynamically)"); }); </script> </head> <body> <div id="myTabs"> <div> <ul> <li><a href="#tab-1"><span>Tab1</span></a></li> <li><a href="#tab-2"><span>Tab2</span></a></li> <li><a href="#tab-3"><span>Tab3</span></a></li> </ul> </div> <div id="tab-1" > <span>Tab 1</span> <script> alert('Tab 1 script is executed...'); </script> </div> <div id="tab-2"> <span>Tab 2</span> <script> //alert('Tab 2 script is executed...'); </script> </div> <div id="tab-3"> <span>Tab 1</span> <script> //alert('Tab 3 script is executed...'); </script> </div> <div id="tab-4"> <span>Tab 4</span> <script> alert('Tab 4 script is executed...'); </script> </div> </div> </body> </html>
The example has initially 3 "static" tabs. Then it adds another tab dynamically (tab-4). The div with id="tab-4" contains a script tag which is executed twice:
- when page is loaded
- when tabs("add","#tab-4","Tab 4 (added dynamically)") is called
In my opinion the second call is not a good thing. I believe that ui tabs is copying #tab-4 what makes every script tag being executed again. now i have come into a situation where a second call of the script tag is not expected at all.
i believe this is either a bug or at least a workaround should be provided.
Change History (3)
comment:1 Changed 12 years ago by
Resolution: | → wontfix |
---|---|
Status: | new → closed |
comment:2 Changed 12 years ago by
You are removing the add method? That's not good to hear since I believe this is an important feature. Will there be any replacement for allowing dynamic creation of tabs?
There are also other jQuery plugins for tabs, i.e. the EasyTabs plugin which can be found here: http://plugins.jquery.com/project/easytabs I know that they had a similar problem as reported here:
- https://github.com/JangoSteve/jQuery-EasyTabs/issues/15
- https://github.com/JangoSteve/jQuery-EasyTabs/pull/16
Maybe you want to check how they solved it.
This is a pain to deal with and we're removing the add method. Also see http://bugs.jquery.com/ticket/3105