Question

This is jQuery tabs script: http://jqueryui.com/demos/tabs/#manipulation

        var $tabs = $( "#tabs").tabs({
            tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
            add: function( event, ui ) {
                var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
                $( ui.panel ).append( "<p>" + tab_content + "</p>" );
            }
        });

// rest of script

So, what’s I need? I need to script will be setting (with other content) on line var tab_content = . Normally (in script with static tabs) my own script is loading on the bottom of page (i was create a few instance of the same script like (founction(script1), founciton(script2) and 2 divs with id script1 and script2), after all HTML code, but in this case I don’t know how to do this. I need to script be unique for each tabs.

Answer 1

Assume that the underlying HTML looks like this:

<div id="tabs">
  <ul>
    <li><a name="my_id" href="/watman">Hey</a></li>
    <li><a name="test_it" href="/brown-chicken-brown-cow">Hey2</a></li>
  </ul>
</div>

Here’s what I used in such situation. In global script I define variables

var _SCRIPT = {};
var _CURRENT_TAB = '#ui-tabs-1';
var _CURRENT_TAB_NAME = 'my_id';

Now for each tab I load a script in the head of the main view (after the global script). The scripts I’m loading look like this:

_SCRIPT['my_id'] = {
  tab: null,
  init: function() {
    this.tab = _CURRENT_TAB;
    // initialize script
  },
  // some other fields
}

where my_id is the name that is going to be associated with the tab I’m going to load. Next I generate tabs with my main JavaScript like this:

$('#tabs').tabs({
  // some other options
  ajaxOptions: {
    cache: false,
    complete: function() {
      _SCRIPT[_CURRENT_TAB_NAME].init();
    },
  },
  select: function(event, ui) {
    _CURRENT_TAB = $(ui.tab).attr('href');
    _CURRENT_TAB_NAME = $(ui.tab).attr('name');
  },
  cache: true,
});

Now every html that goes inside a tab, say my_id can be accessed via jQuery like this (code from function _SCRIPT['my_id'].init or any other function inside _SCRIPT['my_id']):

console.log( $('a', this.tab) );

Note that this will return elements only inside my_id tab.

Side note 1: I do not recommend inserting script tags via ajax. Hard to debug and you can easily loose control over ”namespaces”. Also you will have problems whenever you reload the tab.

Side note 2: be careful about defining id attribute on elements in tabs. Keep in mind that they need to be unique across the HTML document.