從jQuery對話框中刪除SQL記錄

Question

我有一個從php while循環顯示記錄的文件，名爲userlist.php。使用data-id，每個表現在都有與其關聯的SQL記錄標識。

以我container.php文件，我有加載userlist.php成在1秒的時間間隔一個div我的初始jQuery代碼。現在，當單擊每個單獨的表格時，我隱藏了userlist.php並在一個名爲userdetails.php的div中顯示另一個文件，其中包含有關每個用戶的更多信息。

現在，我試圖使用jQuery對話框窗口來顯示刪除記錄之前的確認消息。在userdetails.php你可以看到一個基於一些建議我已修改的ajax代碼片段。問題在於，將此插入到文件中可防止單擊每個表以顯示詳細信息。如果我刪除它，可以訪問詳細信息。

這裏是沒有AJAX片斷我的代碼，其中包括不允許訪問的細節： Click Here

container.php

<div id="userlist"></div> 

<div id="userdetails"></div> 

<script> 
setInterval(function(){ 
    $("#userlist").load("userlist.php"); 
}, 1000); 
$('#userdetails').hide(); 
$(document).on("click",".user", function() { 
    var id = $(this).attr("data-id"); 
     $.get("userdetails.php", {id: id}).done(function(data) { 
     $('#userdetails').html(data); 
     $('#userdetails').show(); 
     $('#userlist').hide(); 
    }); 
}) 
$(document).on("click","#back", function() { 
    $('#userlist').show(); 
    $('#userdetails').hide(); 
}); 
</script> 

userlist.php

<?php 

include 'dbh.php'; 

$result = $conn->query("SELECT * FROM users"); 

if ($result->num_rows > 0) { 

    while ($row = $result->fetch_assoc()) { 

    $color = array("ADMIN"=>"#ebc45b", "MOD"=>"#8fce61", "USER"=>"#9b9ed2"); 

?> 

     <table data-id="<?php echo $row['id']; ?>" class="user" title="User ID: <?php echo $row['id']; ?>"> 
     <tr> 
      <td align="left">User ID:</td> 
      <td align="right"><?php echo $row['id']; ?></td> 
     </tr> 
     <tr> 
      <td align="left"><?php echo $row['address']; ?></td> 
      <td align="right"><?php echo $row['zip']; ?></td> 
     </tr> 
     <tr> 
      <td align="left"><?php echo $row['city']; ?></td> 
      <td align="right"><?php echo $row['state']; ?></td> 
     </tr> 
     <tr> 
      <td align="left"><span style="color: <?php echo $color[$row['user_level']]; ?>"><?php echo $row['user_level']; ?></span></td> 
      <td align="right">"member since..."</td> 
     </tr> 
     </table> 

<?php 
    } 
} 
?> 

userdetails.php

<?php 

include 'dbh.php'; 

$result = $conn->query("SELECT * FROM users WHERE id=" . $_GET["id"]); 

if ($result->num_rows > 0) { 

    while ($row = $result->fetch_assoc()) { 

?> 
<div class="menu"> 
<span id="back">BACK</span> 
<span id="delete" data-id="<?php echo $row['id']; ?>">DELETE</span> 
<span id="new">NEW</span> 
<span id="edit">EDIT</span> 
</div> 
<table class="userdetails"> 
<tr> 
    <td align="left">First Name:</td> 
    <td align="right"><?php echo $row['first_name']; ?></td> 
</tr> 
<tr> 
    <td align="left">Last Name:</td> 
    <td align="right"><?php echo $row['last_name']; ?></td> 
</tr> 
<tr> 
    <td align="left">Age:</td> 
    <td align="right"><?php echo $row['age']; ?></td> 
<tr> 
</tr> 
    <td align="left">Sex:</td> 
    <td align="right"><?php echo $row['sex']; ?></td> 
</tr> 
</table> 

<script> 

//JQ Delete 
$(document).on("click","#delete", function() { 
    var id = $(this).attr('data-id'); 
    $("#dialog-confirm").data('del-id', id).dialog('open').html('Delete user ' + id + '?'); 
}); 

$("#dialog-confirm").dialog({ 
    resizable: false, 
    title: 'Confirm Delete', 
    height:150, 
    modal: true, 
    autoOpen:false, 
    buttons: { 
    'Yes': function() { 
     var id = $(this).data('del-id'); 

     $.ajax({ 
     type:'POST', 
     url:'deleteuser.php', 
     data:{id: id}, 
     }), 


    $('#append').append('Deleted User: ' + id + '<br>'); 
     $(this).dialog('close'); 
    }, 
    'No': function() { 
     $(this).dialog('close'); 
    } 
    } 
}); 

</script> 

<div id="dialog-confirm" style="display:none;"></div> 

<span id="append"></span> 

<?php 
} 
} 
?> 

deleteuser.php

<?php 
include 'dbh.php'; 
$sql = "DELETE FROM users WHERE id=" . $_POST["id"]; 

if ($conn->query($sql) === TRUE) { 
    echo "User has been deleted!!!"; 
} else { 
    echo "Error deleting user: " . $conn->error; 
} 
$conn->close(); 

只是尋找一個小的幫助，謝謝！

Answer 1

我認爲這是你想要什麼：

$.ajax({ 
    url: "deleteuser.php", 
    type: "post", 
    data: 'deleteuser.php?id=' + id, 
    cache: false, 
    success: function(data) { 
     // Close your dialogue on success 
    } 
    }); 

希望這有助於！

Answer 2

終於拿到這個工作：

$.ajax({ 
    type:'POST', 
    url:'deleteuser.php', 
    data:{id: id}, 
    }),