0

from my php page searching employee retrieve by ajax success function and displayed as button ! when i click on fetched button it works like post request 200 ok! but modal dont show up and not even updated with my new ajax request result !! I want to display searched employees information via modal! i have tried many approach! click function, on click function, delegate function does not work!

click function, on click function, delegate function does not work! even clcik event on parent element

button fetched by this request

 $("#searchEmployeeForm").on('submit',(function(e) {
  e.preventDefault();
        if ( $("#selectCompany").val()!="" || $("#selectDepartment").val()!="" || $("#selectDesignation").val()!="" || $("#searchByName").val()!="" || $("#searchByID").val()!=""){
            $.ajax({
          url: "controller/employee/find_Employee.php", 
          type: "POST",  
                 // Type of request to be send, called as method
          data: new FormData(this), 
          contentType: false,  
            dataType: 'json',     
          cache: false,             
          processData:false,       
          success: function(data)   
          {

               $('#listOfEmployee').empty();
             $.each(data, function (i, empdetail) {
                        console.log(empdetail);



          $('#listOfEmployee').append("<button class='list-group-item  d-flex justify-content-between align-items-center viewEmployeeData' id= "+ empdetail.emp_id +">"+ empdetail.first_name + empdetail.last_name + "</button>" );

 });

          console.log("data:" + data);

          }
          });

               }
               else{
                  alert("Field Can not be Empty ");

               }       

     }));

button on click event 

$(document).on('click', '.viewEmployeeData', function (e){
          e.preventDefault();
          console.log('limon ');


   var employee_id = $(this).attr("id");  
     alert(employee_id);

           if(employee_id)  
           {  
                $.ajax({  
                     url:"controller/employee/employee_info.php",  
                     method:"POST",  
                    dataType: 'json',
                     data:{employee_id:employee_id},  
                     success:function(data){  

                          $('.modal-title').html(data.firs_name);
                            $('#view_employee_data_modal').modal("show");  
                          alert(data);

                     }  
                });  
           }      
});

i expected button click event will display modal with my ajax request data! NB: click event works but only its console.log and alert modal dont show up after ajax success function.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Drimik 4u
  • 1

1 Answers1

0

when ajax success return data and add in dom and that dom event can not bind directly so you bind event in main dom it mean return data fill in "listOfEmployee" dom here event bint so work perfectly.

$('#listOfEmployee').on('click','.viewEmployeeData',function(e){
              e.preventDefault();
              console.log('limon ');


       var employee_id = $(this).attr("id");  
         alert(employee_id);

               if(employee_id)  
               {  
                    $.ajax({  
                         url:"controller/employee/employee_info.php",  
                         method:"POST",  
                        dataType: 'json',
                         data:{employee_id:employee_id},  
                         success:function(data){  

                              $('.modal-title').html(data.firs_name);
                                $('#view_employee_data_modal').modal("show");  
                              alert(data);

                         }  
                    });  
               }      
    });
Jimit H.
  • 185
  • 1
  • 11