簡體   English   中英

如何從彈出模式中的按鈕執行php代碼?

[英]How to execute a php code from a button in a pop-up modal?

我試圖接受申請表格顯示在第二個模式中,在第一個1之后彈出,每個帳戶顯示一個接受按鈕。 當第一個模態顯示時,塗抹器的列表將以模態顯示,然后當您按下“信息”按鈕(正在工作)時,會彈出另一個模式,其中會顯示塗抹器的信息。 然后在第二個模態中有一個接受按鈕,它不起作用。

我試過調用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>

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

您需要將所有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>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM