jQuery Button not executing onclick

Question

I have a jquery function that loops through an xml and display it in a table and has buttons for each row so user can click on it and delete the record. Like this code I have attached;

$('#btnGetRecords').click(function() {
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/GetRecords',
        data: '',
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(xml) {
            parseXml(xml);
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
});

function DeleteRecord(receiptNo) {
    alert(receiptNo);
    $('#divOutput').html('');
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/DeleteRecord',
        data: 'receiptNo=' + receiptNo,
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(msg) {
            $('#delete_dialog').dialog('open');
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
}

function parseXml(xml) {
    $('#divOutput').html('');
    var x = 1;
    var _html = '<br />';
    _html += '<table id="tblRecords" >';
    $(xml).find('Table').each(function() {
        var fname = $(this).find('FName').text();
        var lname = $(this).find('LName').text();
        var receiptNo = $(this).find('ReceiptNo').text();
        _html += '<tr>';
        _html += '<td>';
        _html += fname + ' ' + lname;
        _html += '</td>';
        _html += '<td>';
        _html += $('<input type="button" class="clsBtnDelete" id="btnDeleteRecord' + x + '" value="Delete" onclick="DeleteRecord(' + receiptNo + ');" />';
        _html += '</td>';
        _html += '</tr>';
        // alert(_html);
        x++;
    });
    _html += '</table>';
    $('#divOutput').append(_html);
}

But for some reason the delete button does not call the function to execute the delete. Any ideas how to make this to work. Thank you!

-Ryan

Answer 1

Add your onclick events after adding the table to the DOM. Something like:

$('#tblRecords .clsBtnDelete').click(DeleteRecord);

And have the DeleteRecord() function get the ReceiptNo from, for example, the <button>'s id:

• use id="btnDeleteRecord_<ReceiptNo>"
• have DeleteRecord() split the id value on _, and use the second (numeric) part

Answer 2

On the surface it looks fine, but since it looks like you are using ASP.NET I'm guessing that btnGetRecords is a asp:Button.

Look at the HTML you get from the server and make sure the button has the id you think it does. In ASP.NET you usually see this in jquery selectors

$('#<%= btnSomething.ClientID %>')

Also, in IE table rows/cells are sometimes read only.

Answer 3

I changed my code to something like this and still not working. Any ideas?

$('#btnGetRecords').click(function() {
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/GetRecords',
        data: '',
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(xml) {
            parseXml(xml);
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
});

$('#tblRecords .clsBtnDelete').click(function() {
    var cId = $(this).attr('id');
    var arr = cId.split('_');
    var receiptNo = arr[1];
    DeleteRecord(receiptNo);
});

function DeleteRecord(receiptNo) {
    $('#divOutput').html('');
    $('#imgStatus').show();
    $.ajax({
        type: 'POST',
        url: '/WebService1.asmx/DeleteRecord',
        data: 'receiptNo=' + receiptNo,
        contentType: 'application/x-www-form-urlencoded; charset=utf-8',
        dataType: 'xml',
        success: function(msg) {
            $('#delete_dialog').dialog('open');
            $('#imgStatus').hide();
        },
        error: function(msg) {
            $('#imgStatus').hide();
            alert('Error!');
        }
    });
}

function parseXml(xml) {
    $('#divOutput').html('');
    var _html = '<br />';
    _html += '<table id="tblRecords" >';
    $(xml).find('Table').each(function() {
        var fname = $(this).find('FName').text();
        var lname = $(this).find('LName').text();
        var receiptNo = $(this).find('ReceiptNo').text();
        _html += '<tr>';
        _html += '<td>';
        _html += fname + ' ' + lname;
        _html += '</td>';
        _html += '<td>';
        _html += '<input type="button" class="clsBtnDelete" id="btnDeleteRecord_' + receiptNo + '" value="Delete" />';
        _html += '</td>';
        _html += '</tr>';
    });
    _html += '</table>';
    $(_html).appendTo('#divOutput');
}

Thank you

-Ryan

Answer 4

Got it!

function parseXml(xml) { 
    $('#divOutput').html(''); 
    var _html = '<br />'; 
    _html += '<table id="tblRecords" >'; 
    $(xml).find('Table').each(function() { 
        var fname = $(this).find('FName').text(); 
        var lname = $(this).find('LName').text(); 
        var receiptNo = $(this).find('ReceiptNo').text(); 
        _html += '<tr>'; 
        _html += '<td>'; 
        _html += fname + ' ' + lname; 
        _html += '</td>'; 
        _html += '<td>'; 
        _html += '<input type="button" class="clsBtnDelete" id="btnDeleteRecord_' + receiptNo + '" value="Delete" />'; 
        _html += '</td>'; 
        _html += '</tr>'; 
    }); 
    _html += '</table>'; 
    $(_html).appendTo('#divOutput'); 

    $('#tblRecords .clsBtnDelete').click(function() { 
        alert('y');
        var cId = $(this).attr('id'); 
        var arr = cId.split('_'); 
        var receiptNo = arr[1]; 
        DeleteRecord(receiptNo); 
    }); 
}

I placed the block of code inside the parse XML. Thanks Joel!