Question

I am building a table row in a jQuery $.ajax() call that builds a row on successful execution of a PHP script.

I’m calling a function that builds a new table row based on the script results. Here is the function:

function addNewRow(addDocs, newClassID, classNumberAdd, classNameAdd) {

    var newRow = '';

    newRow += $('#classesTable tbody:last').after('<tbody>' + 
        '<tr bgcolor="#EFE5D3" style="font-weight: bold;">' +
            '<td width="35px"><a class="classEditLink" name="' + newClassID + '" href="#">Edit</a></td>' +
            '<td width="20px"><input type="checkbox" class="chkSelectToDelete" name="deleteClasses[]" value="' + newClassID + '" /></td>' +
            '<td>' + classNumberAdd + '</td>' +
            '<td>' + classNameAdd + '</td>' +
        '</tr>');

    if (addDocs == 'true') {

        $('#docsTable input[type="checkbox"]:checked').each(function() {
            var $row = $(this).parents('tr');
            var docID = $row.find('td:eq(0) input').val();
            var docName = $row.find('td:eq(1)').html();
            var docDescription = $row.find('td:eq(2)').text();

            newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' +
            '<td></td>' +
            '<td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="' + docID + '-' newClassID + '" /></td>' +
            '<td width="245px">' + docName + '</td>' +
            '<td width="600px">' + docDescription + '</td>' +
        '</tr>');
        });

//$('#classesTable tbody:last').append('<tr class="classDocsRow"><td></td><td align="right"><input type="checkbox" class="chkRemoveDocs" name="removeDocs[]" value="' + docID + '-' newClassID + '" /></td><td width="245px">' + docName + '</td><td width="600px">' + docDescription + '</td></tr>');

    } else {
        newRow += $('#classesTable tbody:last').append('<tr class="classDocsRow">' +
            '<td colspan="4">' +
                '<strong>No documents are currently associated with this class.</strong>' +
            '</td>' +
        '</tr>');
    }

    return newRow;
}

Aptana Eclipse IDE is reporting an error in two places in the “if (addDocs == 'true')” section: The first error, “missing ) after argument list“, is on the second line after “newRow += ...” and the second error “missing ; before statement” is two lines after that. Note that I also have that entire section in one line (not broken up with string concats) commented out shortly after that. That shows only one error, the error about missing a right paren.

If I comment out everything in the if clause and pass addDocs as false, the else clause returns a new row as expected.

This must be simply a js syntactic problem, but I can’t see what I’m doing wrong.

Any help will be greatly appreciated!

Answer 1

You are missing the + here:

' + docID + '-' + newClassID + '" /></td>' +
                ^

The second error is probably just a result of the first error.