Giorgos Giorgos - 3 months ago 85
Ajax Question

JQuery DataTables mRender button - how do I get button click

I have the following ajax call:

$('#stlmtddel').click(function(event) {
var customerid = "<%=customerid%>";
var appointofcaid = "<%=appointofcaid%>";
var kindcontrolid = "<%=kindcontrolid%>";
var auditorid = "<%=auditorid%>";
var instype = "view";

$.ajax({
type: 'GET',
url: 'crudsettlement.jsp',
data: {
Wcustomerid: customerid,
Wappointofcaid: appointofcaid,
Wkindcontrolid: kindcontrolid,
Wauditorid: auditorid,
Winstype: instype
},
async: false,
dataType: 'json',
success: function(json) {

$('#settlementsd').DataTable({
destroy: true,
"stateSave": true,
"displayLength": 10,
"lengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "όλα"]
],
"pagingType": "full_numbers",
"language": {
"emptyTable": "Δεν βρέθηκαν δεδομένα",
"thousands": ".",
"lengthMenu": "Εμφάνιση _MENU_ εγγραφών ανά σελίδα",
"zeroRecords": "Δεν βρέθηκαν εγγραφές - ",
"info": "Εμφανίζονται οι εγγραφές _START_ έως _END_ από σύνολο _TOTAL_",
"infoEmpty": "Εμφανίζονται οι εγγραφές 0 έως 0 από σύνολο 0",
"infoFiltered": "(Εφαρμόστηκε φίλτρο σε σύνολο _MAX_ εγγραφών)",
"search": "Αναζήτηση:",
"paginate": {
"first": "Αρχή",
"previous": "Προηγούμενη",
"next": "Επόμενη",
"last": "Τέλος"
}
},
"aaData": json,
"aoColumns": [{
"mData": "auditoridid"
}, {
"mData": "auditoridname"
}, {
"mData": "sdpaymentnet"
}, {
"mData": "sdpaymenttax"
}, {
"mData": "sdpayment"
}, {
"bSortable": false,
"mRender": function(data, type, row) {
return '<input type="hidden" name="Wauditordid" class="Cauditordid" value="'+row.auditoridid+'" disabled><button type="submit" id="stlmtddel" class="btn btn-danger" formnovalidate><span class="glyphicon glyphicon-minus"></span>';
}
}, ]
});
alert(json.msg);
}

});
});


In mRender I create a button wiht id="stlmtddel" and I want to get the click event. I tryied the following:
$('#stlmtddel').click(function(event) {
}


but not working for all rows.
for example if the table have 3 rows and I tried to click to delete one of that rows this working fine.
After that the table have 2 rows and when I tried to click to delete one of that rows then the click event not working.

Any idea?

Answer

According to HTML specification ID must be unique. As there are three buttons with same id, so, $("#stlmtddel") will only match first occurrence thus click event only works for first button.

Use class stlmtddel instead of id stlmtddel, As id must be unique within webpage.

 $('#settlementsd').DataTable({
     ...
     "aoColumns": [
         ...
         {
             "bSortable": false,
             "mRender": function(data, type, row) {
                   return '<input type="hidden" name="Wauditordid" class="Cauditordid" value="'+row.auditoridid+'" disabled><button type="submit" class="stlmtddel btn btn-danger" formnovalidate><span class="glyphicon glyphicon-minus"></span>';
              }
          }
     ]
 });

After that you can listen to button click by listening to click event on #settlementsd

$('#settlementsd').on('click', '.stlmtddel', function() {
    // Button click logic goes here
});