Ajax update with PHP and MySQL

hi guys i need help regarding of this matter i have no error but when i click the edit button the modal isn't show. here is the tbl_list column i hope you guys can help me thank u very much........................................

columns:

  • Attendee_id
  • RFID_number
  • Attendee_name
  • ColumnOrDepartment
  • Status
  • image

    this code below is a index.php

    <?php  
     $connect = mysqli_connect("localhost", "root", "", 
       "db");  
      $query = "SELECT * FROM tbl_list";  
     $result = mysqli_query($connect, $query);  
     ?>
    <tbody>
    <?php
       while($row = mysqli_fetch_array($result))  
          {  
         ?>  
         <tr>  
    
         <td><?php echo $row["Names"]; ?></td>
         <td><?php echo $row["gender"]; ?> 
         </td>
         <td><?php echo $row["Status"]; ?></td>
         <td><img 
         src="data:image/jpg;base64,<?=base64_encode($row['image']); ?>"
         height="50" width="50" ></td>                                  
         <td>
        <input type="button" name="edit" value="Edit" id="<?php echo 
        $row["Attendee_id"]; ?>" class="btn btn-info btn-xs edit_data" />
        </td>
        </tr>  
        <?php  
       }  
     ?> 
      </tbody>
    

<-----this is the fetch.php----->

   $connect = mysqli_connect("localhost", "root", "", "db");  
   if(isset($_POST["employee_id"]))  
   {  
   $query = "SELECT * FROM tbl_list WHERE Attendee_id= 
   '".$_POST["employee_id"]."'";  
   $result = mysqli_query($connect, $query);  
   $row = mysqli_fetch_array($result);  
   echo json_encode($row);  
  }  
  ?>

    <--------------this is for modal----------->       
    <div id="dataModal" class="modal fade">  
     <div class="modal-dialog">  
       <div class="modal-content">  
         <div class="modal-header">  
        <button type="button" class="close" data-dismiss="modal">&times; 
        </button>  
        <h4 class="modal-title">Employee Details</h4>  
         </div>  
         <div class="modal-body" id="employee_detail">  
         </div>  
            <div class="modal-footer">  
                 <button type="button" class="btn btn-default" data- 
             dismiss="modal">Close</button>  
            </div>  
        </div>  
    </div>  
   </div>  
  <div id="add_data_Modal" class="modal fade">  
  <div class="modal-dialog">  
       <div class="modal-content">  
            <div class="modal-header">  
                 <button type="button" class="close" data- 
                 dismiss="modal">&times;</button>  
                 <h4 class="modal-title">Bootstrap Modal</h4>  
            </div>  
            <div class="modal-body">  
                <form method="post" id="insert_form">  
                  <label>Enter Employee Name</label>  
                  <input type="text" name="Attendee_Name" 
                  id="Attendee_Name" class="form-control" />  
                  <br />  
                   <label>Enter Employee Address</label>  
                  <textarea name="CourseOrDepartment" 
                  id="CourseOrDepartment" class="form-control"></textarea>  
                  <br />  
                   <label>Select Gender</label>
                  <select name="Status" id="Status" class="form-control">  
                  <option value="Male">Male</option>  
                  <option value="Female">Female</option>  
                 </select>  
                 <br />  
                 <input type="hidden" name="employee_id" 
                 id="employee_id" />  
                 <input type="submit" name="insert" id="insert" 
                 value="Insert" class="btn btn-success" />  
                 </form>  
                 </div>  
                 <div class="modal-footer">  
                 <button type="button" class="btn btn-default" 
                 data-dismiss="modal">Close</button>  
             </div>  
        </div>  
     </div>  
  </div>
 <------------and this is the ajax -------------->
     <script>  
    $(document).ready(function(){  
   $('#add').click(function(){  
       $('#insert').val("Insert");  
       $('#insert_form')[0].reset();  
    });  
    $(document).on('click', '.edit_data', function(){  
       var employee_id = $(this).attr("Attendee_id");  
       $.ajax({  
            url:"fetch.php",  
            method:"POST",  
            data:{employee_id:employee_id},  
            dataType:"json",  
            success:function(data){                 
                 $('#Attendee_Name').val(data.Attendee_Name);  
                 $('#CourseOrDepartment').val(data.CourseOrDepartment);  
                 $('#Status').val(data.Status);                  
                 $('#insert').val("Update");  
                 $('#add_data_Modal').modal('show');  
            }  
       });  
     });
    $(document).on('click', '.view_data', function(){  
       var employee_id = $(this).attr("Attendee_id");  
       if(employee_id != '')  
       {  
            $.ajax({  
                 url:"select.php",  
                 method:"POST",  
                 data:{employee_id:employee_id},  
                 success:function(data){  
                      $('#employee_detail').html(data);  
                      $('#dataModal').modal('show');  
                 }  
            });  
       }            
    });  
  });  
   </script>    

1 answer

  • answered 2018-07-11 02:27 Miggy

    That is because you forgot to put data-toggle="modal" data-target="#modalID" in your button

    Please look in bootstrap modal documentation Bootstrap Modal

    In your AJAX function, there is not attribute Attendee_id

    instead of using

    var employee_id = $(this).attr("Attendee_id");
    

    use

    var employee_id = this.id;