Uncaught TypeError: Cannot call method 'split' of undefined

Question

in this fiddle there is a To button.When clicked on this button,a dialog box appears.By default from the select menu users is selected.If I select a check box from this users table and after that If change the drop down menu to groups and from the select a checkbox from groups table then Uncaught TypeError: Cannot call method 'split' of undefined appears in the consolse.However from the beginning(without selecting any checkbox of users table) If i change to groups table and then select some checkbox then the above error does not appear.Can any body please tell me how to solve this issue.

The following is the jquery code

$('#ViewFull').click(function () {
    $('#mytable1 tr').removeClass('hide');
});
$('.select').on('change', function () {
    var tablink = '#' + $(this).val();
    $('#groups').hide();
    $('#users').hide();
    $(tablink).show();
});

function copy_users_table() {
    var users = $('#mytable').html();
    $('#mytable12').html(users);
}

function copy_groups_table() {
    var groups = $('#TogroupsTable').html();
    $('#groupsTable1').html(groups);
}

function collect_users_and_groups(is_groups) {
    var tos = [];
    $('#mytable12 input:checked, #groupsTable1 input:checked').each(function (i, elt) {
        //alert("to groups");
        if (is_groups) {
            //alert("to groups");
            var dataids = $(this).parent().attr("data-selected").split(",");
            alert("dataids  " + dataids);
        }
        var name = $.trim($(this).parent().next().text());
        tos.push(name);
    });

    return tos.join(', ');
}

$('body').on('click', '#to-btn', function () {
    // copy current tables
    copy_users_table();
    copy_groups_table();

    // initialize checkboxes
    var number = $('#number').val();
    $('#ToAdd').text(number);
    var entries = number.split(/\s*,\s*/);
    init_users_table(entries);
    init_groups_table(entries);

    $("#mytable12 input:checkbox").on('change', function () {
        var tos = collect_users_and_groups(false);
        $("#ToAdd").html(tos);
    });

    $("#groupsTable1 input:checkbox").on('change', function () {
        var tos = collect_users_and_groups(true);
        $("#ToAdd").html(tos);
    });

    // show tab
    $('.select').val('users');
    $('#users').show();
    $('#groups').hide();
});

$('#ToOk').click(function () {
    $("#number").val($("#ToAdd").text());
});

function init_users_table(entries) {
    // go through all rows
    $('#users tr').each(function () {
        var username = $('td:nth-child(2)', this).text();
        var selected = $.inArray(username, entries) >= 0;
        $('input:checkbox', this).prop('checked', selected);
    });
}

function init_groups_table(entries) {
    $('#groups tr').each(function () { //added 13
        var groupname = $.trim($('td:nth-child(2)', this).text());
        var selected = $.inArray(groupname, entries) >= 0;
        $('input:checkbox', this).prop('checked', selected);
    });
}

Answer 1

So, when you make a call to the 'collect_users_and_groups' function, the code is executing for both checked checkboxes that belong to #mytable12 and checked checkboxes belonging to #groupsTable1 (due to the selector on which you apply each). Even if you call the function with is_groups = false, the code will still go through this snippet for the checkboxes previously selected in #mytable12:

if (is_groups) 
{
    //alert("to groups");
    var dataids = $(this).parent().attr("data-selected").split(",");
    alert("dataids  " + dataids);
}

So, if you previously checked a checkbox in #mytable12, the code will return undefined for $(this).parent().attr("data-selected"), because there is no such attribute for these kind of table cells.

Change your code the following way:

$('#mytable12 input:checked').each(function (i, elt)
{
    var name2 = $.trim($(this).parent().next().text());
    tos.push(name2);
});
$('#groupsTable1 input:checked').each(function (i, elt) {
    //alert("to groups");
    if (is_groups) {
        //alert("to groups");
        var dataids = $(this).parent().attr("data-selected").split(",");
        alert("dataids  " + dataids);
    }
    var name = $.trim($(this).parent().next().text());
    tos.push(name);
});