如何从弹出模式中的按钮执行php代码？

Question

我正在尝试接受第二个模式中显示的申请表格，该模式在第一个模式之后弹出，并为每个显示的帐户显示一个接受按钮。发生的情况是，当第一个模态显示时，涂药器列表将以模态显示，然后当您按下“信息”按钮（正在运行）时，另一个模态将弹出，其中包含涂药器的信息。然后，第二个模式中有一个接受按钮，该按钮不起作用。

我尝试调用ajax函数，但是它似乎不起作用。该功能似乎无法从模态中识别出按下的按钮。

我有这个php作为我的模态

 <?php  
@session_start();
 if(isset($_POST["post_id"]))  
 {  
      $output = '';  
      $connect = mysqli_connect("localhost", "root", "", "adappdb");  
////////////////////////////////////////////////
      /*STATUS CHANGE START*/
      $query = "SELECT * FROM adoption_application WHERE application_id = '".$_POST["post_id"]."'";  
      $result = mysqli_query($connect, $query);  
      $row = mysqli_fetch_array($result);

      if ($row['appli_status']==0){
        $newAStatus = 1;
      }else if ($row['appli_status']==1){
        $newAStatus = 2;
      }else if ($row['appli_status']==2){
        $newAStatus = 3;
      }else if ($row['appli_status']==3){
        $newAStatus = 4;
      }else if ($row['appli_status']==4){
        $newAStatus = 5;
      }

      $query = "UPDATE adoption_application SET appli_status='$newAStatus' WHERE application_id = '".$_POST["post_id"]."'";
      mysqli_query($connect, $query);

      if ($row['appli_status']==0){
        $newAS = "On Process";
      }else if ($row['appli_status']==1){
        $newAS = "Waiting for Initial Interview";
      }else if ($row['appli_status']==2){
        $newAS = "Occular";
      }else if ($row['appli_status']==3){
        $newAS = "Waiting for Approval";
      }else if ($row['appli_status']==4){
        $newAS = "Adopted";
      }

      /*STATUS CHANGE END*/
       $query = "SELECT * FROM adoption_application WHERE application_id = '".$_POST["post_id"]."'";  
      $result = mysqli_query($connect, $query);
////////////////////////////////////////////////
      $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered"> 
           '; 
      while($row = mysqli_fetch_array($result))  
      {  
           $output .= '  
                <tr>  
                     <td width="30%"><label>First Name</label></td>  
                     <td width="50%">'.$row["appli_fname"].'</td> 
                </tr>
                <tr>
                     <td width="30%"><label>Last Name</label></td>
                     <td width="50%">'.$row["appli_lname"].'</td>  
                </tr>  
                <tr>
                     <td width="30%"><label>Status</label></td>
                     <td width="50%">'.$newAS.'</td>  
                </tr>  

           ';  
      }  

      $output .= '  
           </table>  
           <button type="button" name="proceeding_process" data-toggle="modal" href="#application_dataModal3"  class="btn btn-primary bt-xs accept" id="'.$row["application_id"].'">Next Stage</button>
      </div>  
      ';  
      echo $output;  
 }  
 ?>

我尝试从网站的php中添加的是javascript

$(document).on('click', '.accept', function(){  
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_proceedingprocess.php",  
                     method:"POST",  
                     data:{post_id:post_id},  
                     success:function(data){  
                          $('#proceeding_process').html(data);  
                          $('#application_dataModal3').modal('show');  
                     }  
                });  
           }            
      });

即使它在ajax中不起作用。我的主要目标是在按下“接受”或“下一阶段”按钮时执行此代码。用于更新数据库中涂药器的状态。

      $query = "SELECT * FROM adoption_application WHERE application_id = '".$_POST["post_id"]."'";  
      $result = mysqli_query($connect, $query);  
      $row = mysqli_fetch_array($result);

      if ($row['appli_status']==0){
        $newAStatus = 1;
      }else if ($row['appli_status']==1){
        $newAStatus = 2;
      }else if ($row['appli_status']==2){
        $newAStatus = 3;
      }else if ($row['appli_status']==3){
        $newAStatus = 4;
      }else if ($row['appli_status']==4){
        $newAStatus = 5;
      }

      $query = "UPDATE adoption_application SET appli_status='$newAStatus' WHERE application_id = '".$_POST["post_id"]."'";
      mysqli_query($connect, $query);

      if ($row['appli_status']==0){
        $newAS = "On Process";
      }else if ($row['appli_status']==1){
        $newAS = "Waiting for Initial Interview";
      }else if ($row['appli_status']==2){
        $newAS = "Occular";
      }else if ($row['appli_status']==3){
        $newAS = "Waiting for Approval";
      }else if ($row['appli_status']==4){
        $newAS = "Adopted";
      }

      /*STATUS CHANGE END*/

``````````````````````````````````````````````````````````````````````````

/*Here is my whole javascript code:*/

``````````````````````````````````````````````````````````````````````````

<script type="text/javascript">
  $(document).ready(function() {
        // all of your JavaScript/jQuery code
        // for example, the function in question:
        /*$(document).on('click', '.accept', function(){
            ...
        });*/
function confirmation()
{
  var x = confirm("Are you sure you want to Logout?")
  if(x==true)
  {
    return true;
  }
  else
  {
    return false;
  }
}

    });

</script>

<script>  
   $(document).ready(function() {
    fetch_data();

        // all of your JavaScript/jQuery code
        // for example, the function in question:
        /*$(document).on('click', '.accept', function(){
            ...
        });*/
///////////////////////////////////////

        function fetch_data()
 {
  var oid = "<?php echo $copy; ?>";
  var action = "fetch";
  $.ajax({
   url:"organization_post_action.php",
   method:"POST",
   data:{oid:oid,
        action:action},
   success:function(data)
   {
    $('#image_data').html(data);
    $('#pet_name').val(data.pet_name);
    $('#pet_type').val(data.pet_type);
    $('#pet_breed').val(data.pet_breed);
    $('#pet_color').val(data.pet_color);
    $('#pet_bdate').val(data.pet_bdate);
    $('#post_notes').val(data.post_notes);

   }
  })
 }

/////////////////////////////////////////

$('#add').click(function(){
  var elem = document.getElementById('valUD');
   elem.style.display='none';
      $('#imageModal').modal('show');
      $('#image_form')[0].reset();
      $('.modal-title').text("Add post");
      $('#image_id').val('');


      $('#action').val('insert');
      $('#insert').val("Insert");
 });

///////////////////////////////////////

$('#image_form').submit(function(event){
  event.preventDefault();
  var image_name = $('#image').val();

  if(pet_name == ''){
     alert("Please input pet name");
   return false;
  }
  else if(pet_type == ''){
     alert("Please input pet type");
   return false;
  }
  else if(pet_breed == ''){
     alert("Please input pet breed");
   return false;
  }
  else if(pet_color == ''){
     alert("Please input pet color");
   return false;
  }
  else if(pet_bdate == ''){
     alert("Please input pet birthdate");
   return false;
  }
  else if(post_notes == ''){
     alert("Please input post notes");
   return false;
  }
  else
  {
    if(image_name != '')
  {

   var extension = $('#image').val().split('.').pop().toLowerCase();
   if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
   {
    alert("Invalid Image File");
    $('#image').val('');
    return false;
   }
   else
   {
    $.ajax({
     url:"organization_post_action.php",
     method:"POST",
     data:new FormData(this),
     contentType:false,
     processData:false,
     success:function(data)
     {
      alert(data);
      fetch_data();
      $('#image_form')[0].reset();
      $('#imageModal').modal('hide');
     }
    });
   }
   }else{
     $.ajax({
        url:"organization_post_action.php",
        method:"POST",
        data:new FormData(this),
        contentType:false,
        processData:false,

        success:function(data){
            alert(data);
            fetch_data();
            $('#image_form')[0].reset();
            $('#imageModal').modal('hide');
        }
    });
   }
  }
 });

 //////////////////////

 $(document).on('click', '.view_data', function(){  
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_fetch.php",  
                     method:"POST",  
                     data:{post_id:post_id}, 
                     dataType:"json",   
                     success:function(data){
                          $('#pet_name1').val(data.pet_name);
                          $('#pet_type1').val(data.pet_type);  
                          $('#pet_breed1').val(data.pet_breed);  
                          $('#pet_color1').val(data.pet_color);  
                          $('#pet_bdate1').val(data.pet_bdate);
                          $('#post_notes1').val(data.post_notes);
                          $('#posted_by').val(data.posted_by);
                          $('#date_created').val(data.date_created);

                          $('#image_id').val($(this).attr("id"));
                          $('#action').val("update");
                          $('.modal-title').text("Pet Information");
                          $('#pet_detail').html(data);  
                          $('#dataModal').modal('show');  
                     }  
                });  
           }            
  }); 

 ////////////////////

 $(document).on('click', '.update', function(){
   var elem = document.getElementById('valUD');
   elem.style.display='block';

    var post_id = $(this).attr("id"); 
    $.ajax({  
                url:"organization_createpost_fetch.php",  
                method:"POST",  
                data:{post_id:post_id},  
                dataType:"json",  
                success:function(data){  
                     $('#pet_name').val(data.pet_name);  
                     $('#pet_type').val(data.pet_type);  
                     $('#pet_breed').val(data.pet_breed);  
                     $('#pet_color').val(data.pet_color);
                     $('#post_notes').val(data.post_notes);
                    $('#image_id').val(data.post_id);

                      $('#action').val("update");
                      $('.modal-title').text("Update Pet Information"); 
                     $('#insert').val("Update");  
                    $('#imageModal').modal('show');
                }  
           });



 });

 ////////////////

 $(document).on('click', '.adoption', function(){  
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_adoption.php",  
                     method:"POST",  
                     data:{post_id:post_id},  
                     success:function(data){  
                          $('#action').val("update");
                          $('#list_application').html(data);  
                          $('#application_dataModal').modal('show');  
                     }  
                });  
           }            
  });

 //////////////////

$(document).on('click', '.information', function(){ 
console.log('clicked information'); 
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_information.php",  
                     method:"POST",  
                     data:{post_id:post_id},  
                     success:function(data){  
                          $('#information_application').html(data);  
                          $('#application_dataModal2').modal('show');  
                     }  
                });  
           }            
});

///////////////////

$(document).on('click', '.accept', function(){  
          console.log('clicked accept');
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_proceedingprocess.php",  
                     method:"POST",  
                     data:{post_id:post_id},  
                     success:function(data){  
                          $('#proceeding_process').html(data);  
                          $('#application_dataModal3').modal('show');  
                     }  
                });  
           }            
});

/////////////////////

$(document).on('click', '.proceeding_process', function(){  
           var post_id = $(this).attr("id");  
           if(post_id != '')  
           {  
                $.ajax({  
                     url:"organization_createpost_proceedingprocess.php",  
                     method:"POST",  
                     data:{post_id:post_id},  
                     success:function(data){  
                          $('#proceeding_process').html(data);  
                          $('#application_dataModal3').modal('show');  
                     }  
                });  
           }            
});

///////////

});

</script>

```````````````````````````````````````````

Answer 1

您需要将所有jQuery（甚至VanillaJS）函数包装为一个就绪函数：

<script type="text/javascript">
    $(document).ready(function() {
        // all of your JavaScript/jQuery code
        // for example, the function in question:
        $(document).on('click', '.accept', function(){
            ...
        });
    });
</script>

我们在这里讨论的一个函数.accept函数完全没有用现成函数包装，因此失败了。

如果您愿意，有速记版本：

<script type="text/javascript">
    $(function(){
        // all of your JavaScript/jQuery code here
    });
</script>