views:

333

answers:

4

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

A: 

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
Joel L
Thanks Joel but it still wont seem to work. Should I remove the part where it says onclick="DeleteRecord(' + receiptNo + ');" and on the code you gave me its missing an argument how do I add that using your code? Thanks!
Ryan
Will try that. Thank you!
Ryan
A: 

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.

wm_eddie
Hi wm_eddie! I using <input type="button" />.
Ryan
In that case, then I'm not sure what the problem is, since like I said, the JavaScript code looks fine. Have you tried using firebug? Also, are you sure your JavaScript code has no syntax errors, those will usually stop the rest of the code from running.
wm_eddie
A: 

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

RyanAdriano
hm... if you add alert()-s before DeleteRecord is called and at the beginning of DeleteRecord, are they displayed as expected?
Joel L
Actually – you have to call the "$('#tblRecords .clsBtnDelete').click(function() {..." part after you build the table HTML and add it to the DOM. (Currently the button does not exist when you are adding the event handler.) Should have caught that earlier.
Joel L
A: 

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!

Ryan