![](/img/trans.png)
[英]PHP - Submit button and Modal Pop-up AJAX on 2 browsers 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.