Opened 13 years ago

Closed 13 years ago

#5341 closed bug (notabug)

Using #{...} in tabTemplate leads to errors in Ruby (on Rails)

Reported by: kosmas58 Owned by:
Priority: major Milestone: 1.8
Component: ui.tabs Version: 1.8rc3
Keywords: Cc:
Blocked by: Blocking:


Since ruby uses "#{variable}" to substitute a variable value in a sring, this interferes with jQuery tab syntax and leads to errors.

Example code (taken from original demo/manipulation.html and converted to haml syntax):

%style{:type => "text/css", :media => "screen"}
    #dialog label, #dialog input { display:block; }
    #dialog label { margin-top: 0.5em; }
    #dialog input, #dialog textarea { width: 95%; }
    #tabs { margin-top: 1em; }
    #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    #add_tab { cursor: pointer; }

  $(function() {
    var $tab_title_input = $('#tab_title'), $tab_content_input = $('#tab_content');
    var tab_counter = 2;
    // tabs init with a custom tab template and an "add" callback filling in the content
    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.';
    // modal dialog init: custom buttons and a "close" callback reseting the form inside
    var $dialog = $('#dialog').dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        'Add': function() {
        'Cancel': function() {
      open: function() {
      close: function() {
    // addTab form: calls addTab function on submit and closes the dialog
    var $form = $('form',$dialog).submit(function() {
      return false;
    // actual addTab function: adds new tab using the title input from the form above
    function addTab() {
      var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
      $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);
    // addTab button: just opens the dialog
      .click(function() {
    // close icon: removing the tab on click
    // note: closable tabs gonna be an option in the future - see
    $('#tabs span.ui-icon-close').live('click', function() {
      var index = $('li',$tabs).index($(this).parent());
      $tabs.tabs('remove', index);

Leads to the error message:

undefined local variable or method `href' for #<ActionView::Base:0x6172400>

So for ruby and rails it's needed to change the syntax.

Change History (1)

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

Resolution: invalid
Status: newclosed

You need to escape that specific part using a slash to avoid interpolation, i.e., \#{...}.

Note: See TracTickets for help on using tickets.