Question

I’m quite new with javascript and I don’t understand this problem:

$(function() {
    var $tab_title_input = $( "#tab_title"),
    $tab_content_input = $( "#tab_content" );
    var tab_counter = 0;
    var editors = {};
    var tab_current = 0;

    // 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.";
            $( ui.panel ).append("<div id=\"editor" + tab_counter + "\" class=\"editor\">" + tab_content + "</div>");
            adjust_size();
            tab_current = ui.index;
            editors[tab_current] = ace.edit("editor" + tab_counter);
            },
        show: function( event, ui ) {
            adjust_size();
            tab_current = ui.index; // zero-based index
            editors[tab_current].resize();
        },
        select: function( event, ui ) {
            adjust_size();
            tab_current = ui.index; // zero-based index
            },

    });

The problem is that this line of code:

editors[tab_current].resize();

breaks everything telling Uncaught TypeError: Cannot call method 'resize' of undefined.

But editors editors[tab_current].resize() is well defined in the add event and alert(tab_current) gives me the correct result.

Answer 1

I’d bet money that editors[tab_current] returns undefined.

Your alert(tab_current) may well return a correct value, but that doesn’t mean that there’s an element of editors that corresponds to it. Test it with alert(editors[tab_current]), and if it shows undefined then go check if the element is being set properly.