CODEWITHSUNDEEP
javascriptphpjqueryajaxjson
Butterfly
Butterfly

Reputation: 3

How can I define new ajax function on a button element inside of Table

I'm filling a table using a loop in ajax function which takes in parameter a "php file returns a Json encode data"; in each table row beside the data ; I have a cell containing 3 buttons to delete, edit and save operations specific to the row data.

The problem is when I try to add an ajax function for the buttons it doesn't work!

Here is my ajax function

                $.ajax({    
                          type: "GET", 
                          url: "php/db_selectPatients.php", 
                          data : "",
                          dataType: "json",
                          success: function(resp){
                               if (resp.success == 1 ){
                                  //alert("Update successful");
                                  var tab = eval(resp);
                                  var k, i = 0 ;
                                  var page_patients = "";
                                  //$("#patientsList").html("");
                                  for (k in tab.Patients ){

                                      //$.each( tab.Patients[i].patient_firstN,function( key, value ) {
                                          //alert( key + ": " + value );
                                           page_patients += 
   '<tbody id="patientsTable">'+
       '<tr>'+
            '<td class="center" id="chekBx">'+
                '<label class="position-relative">'+
                    '<input type="checkbox" class="ace" />'+
                    '<span class="lbl"></span>'+
                '</label>'+
            '</td>'+

            '<td id="mail">'+
                '<a href="#">'+tab.Patients[k].patient_email+'</a>'+
            '</td>'+
            '<td id="name">'+tab.Patients[k].patient_lastN+" "+tab.Patients[k].patient_firstN+'</td>'+
            '<td class="hidden-480" id="gender">'+tab.Patients[k].patient_gender+'</td>'+
            '<td id="phone">'+tab.Patients[k].patient_phone+'</td>'+

            '<td class="hidden-480" id="edress">'+
                '<span class="label label-sm label-warning">'+tab.Patients[k].patient_adress+'</span>'+
            '</td>'+

            '<td  id="actions">'+
                '<div class="hidden-sm hidden-xs btn-group">'+
                    '<button class="btn btn-xs btn-success" id="save">'+
                        '<i class="ace-icon fa fa-check bigger-120"></i>'+
                    '</button>'+

                    '<button class="btn btn-xs btn-info" id ="edit">'+
                        '<i class="ace-icon fa fa-pencil bigger-120"></i>'+
                    '</button>'+

                    '<button class="btn btn-xs btn-danger" id="delete">'+
                       '<i class="ace-icon fa fa-trash-o bigger-120"></i>'+
                    '</button>'+
                '</div>'+               
            '</td>'+
        '</tr>'+
    '</tbody>';
                                        //});
                                        //i++;
                                        $("button#save").click(function() {
                                                alert("Save clicked");
                                        }); 
                                    }

                                    $("table#sample-table-1").append(page_patients);

                              }else{
                                  alert("there is No Patient Susbcribed to You Doctor .. But you can Always Add Some !!");
                                  return true ;
                              } 
                          },
                          error: function(resp){
                            //alert("Unexpected error, Please try again");
                            window.location.assign("error-404.html");//to redirect to an error page :D
                          }
                });

Upvotes: 0

Views: 1851

Answers (1)

mbeintema
mbeintema

Reputation: 318

Because you are adding to the DOM after load, you have to use the jQuery .on() function, something like this:

$('body').on('click', '#save', function(){
    alert('hello world');
});

Also, please note, that if you are adding multiple versions, you should only have one DOM element with a specific ID. if you have multiple ones, append a number to seperate them, and then use a selector similar to this:

$('body').on('click', 'button[id^="save"]', function(){
    var buttonID = $(this).attr('id').replace('save', '');
    alert('hello from button ' + buttonID);
});

You can read more about the .on() command here Jquery .on() And you can read more about selectors here Jquery Selectors

EDIT:

I'm just going to update my response: I agree with CJ in that you should probably identify them with a class, and differentiate with a data-id attribute, something like this:

<button name="save" class="saveBtn" data-id="ROWIDGOESHERE" />

and then your .on function:

$('body').on('click', '.saveBtn', function(){
    var rowID = $(this).data('id');
    alert('hello from row ' + rowID;
});

Upvotes: 2

Related Questions