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