How to set href attribute to anchor created in $.ajax success function

Question

An $.ajax function is returning some data that I'm putting into a table within the success function.

Here's how I'm building the table rows:

$.each(branchList, function(index,element) {
    $('table#tblViewEditAllBranches tbody').append('<tr class="viewEditRow">' +
        '<td class="deleteBranch">' +
            '<input type="checkbox" class="chkDeleteBranch" name="deleteBranches[]" value="' + element['id'] + '" /><br />' +
            '<input type="submit" class="cancelListEditBranch edit hideOnLoad" value="Cancel" title="Cancel editing this branch" /><br />' +
            '<input type="submit" class="submitListEditBranch edit hideOnLoad" value="Save" title="Save the changes" />' +
        '</td>' +
        '<td class="viewEditBranchName">' +
            '<label class="viewBranchName detailDisplay">' + element['name'] + '</label>' +
            '<input type="text" class="edit editBox editName hideOnLoad" value="' + element['name'] + '" /><br /><br />' +
            '<label id="lblBranchesListEditError" class="errorMsg"></label>' +
        '</td>' +
        '<td class="viewEditBranchUrl">' +
            '<label class="viewBranchUrl detailDisplay"><a href="#" class="branchDetailLink" title="Click to go the branch\'s web page">' + element['url'] + '</a></label>' +
            //'<label class="viewBranchUrl detailDisplay">' + element['url'] + '</label>' +
            '<input type="text" class="edit editBox editUrl hideOnLoad" value="' + element['url'] + '" />' +
        '</td>' +
    '</tr>');
    // Get the first part of the url
    var targetFolder = BuildUrlTargetFolder();
    console.log('full url:' + targetFolder + '/index.php/coverage-area/' + element['url']); // Displays correct url for the current branch
    // Set the href attribute for the branch link otherwise have an empty anchor tag
    if (element['url'] !== '') {
        $(this).find('tr a.branchDetailLink').attr('href', targetFolder + '/index.php/coverage-area/' + element['url']);
    } else {
        $(this).find('tr a.branchDetailLink').attr('href', '#');
    }
});

As you can see, at the bottom of the code, before the the iteration to the next table row, I'm building the link and then I'm trying to set the href attribute.

As the code currently is, the console output is showing the correct url as each row is iterated through. But, what's happening is all of the href attributes are getting set to the last url that is retrieved. So, in each iteration, the code sets all links in the table to the current url.

I've tried finding the correct selector for the if/else block by changing the selector and checking the console output, but I can't get it.

I think all I need to do is to get the selector right in the if/else block so it only sets the href attribute for the current row.

Answer 1

Why not build the URL first and then append it as you are adding the HTML? That way you dont have to select on the DOM to find the link.

Also selecting the table outside of the each will give you speed boosties.

  var myTable = $('table#tblViewEditAllBranches tbody');
  $.each(branchList, function(index,element) {

        // Get the first part of the url
        var targetFolder = BuildUrlTargetFolder();
        var branchUrl = '#';
        console.log('full url:' + targetFolder + '/index.php/coverage-area/' + element['url']); // Displays correct url for the current branch
        // Set the href attribute for the branch link otherwise have an empty anchor tag
        if (element['url'] !== '') {
            branchUrl =  targetFolder + '/index.php/coverage-area/' + element['url'];
        }

        myTable.append('<tr class="viewEditRow">' +
            '<td class="deleteBranch">' +
                '<input type="checkbox" class="chkDeleteBranch" name="deleteBranches[]" value="' + element['id'] + '" /><br />' +
                '<input type="submit" class="cancelListEditBranch edit hideOnLoad" value="Cancel" title="Cancel editing this branch" /><br />' +
                '<input type="submit" class="submitListEditBranch edit hideOnLoad" value="Save" title="Save the changes" />' +
            '</td>' +
            '<td class="viewEditBranchName">' +
                '<label class="viewBranchName detailDisplay">' + element['name'] + '</label>' +
                '<input type="text" class="edit editBox editName hideOnLoad" value="' + element['name'] + '" /><br /><br />' +
                '<label id="lblBranchesListEditError" class="errorMsg"></label>' +
            '</td>' +
            '<td class="viewEditBranchUrl">' +
                '<label class="viewBranchUrl detailDisplay"><a href=' + branchUrl + ' class="branchDetailLink" title="Click to go the branch\'s web page">' + element['url'] + '</a></label>' +
                '<label class="viewBranchUrl detailDisplay">' + element['url'] + '</label>' +
                '<input type="text" class="edit editBox editUrl hideOnLoad" value="' + element['url'] + '" />' +
            '</td>' +
        '</tr>');

    });