Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#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:

  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.

Change History (3)

comment:1 Changed 12 years ago by Scott González

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

comment:2 Changed 12 years ago by nabster

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.

Note: See TracTickets for help on using tickets.