#7785 closed bug (wontfix)

Opened October 12, 2011 09:45AM UTC

Closed October 12, 2011 12:06PM UTC

Last modified October 13, 2011 11:39AM UTC

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:

1. when page is loaded

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

Attachments (0)
Change History (3)

Changed October 12, 2011 12:06PM UTC by scottgonzalez comment:1

resolution: → wontfix
status: new → closed

This is a pain to deal with and we're removing the add method. Also see http://bugs.jquery.com/ticket/3105

Changed October 13, 2011 06:00AM UTC by nabster comment:2

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:

Maybe you want to check how they solved it.

Changed October 13, 2011 11:39AM UTC by scottgonzalez comment:3

https://forum.jquery.com/topic/tabs-api-redesign