删除后表格显示不刷新

时间:2015-09-29 14:12:41

标签: php jquery ajax

大家好只想在我的桌面显示上询问你的帮助,按下表格行上的删除图标后,我按下要删除的行仍在那里虽然在数据库上它已被删除。页面没有刷新。

这是我的表格身份

<div id="display" align="left"></div>

这是ajax脚本

<script type="text/javascript">

function deletedata(str){

var med_id = str;

$.ajax({
   type: "GET",
   url: "deletedata.php?med_id="+med_id,
}).done(function( data ) {


});
}


</script>

这是我的demo_insert.php

<?php

$dbHost = 'localhost'; // usually localhost
$dbUsername = 'root';
$dbPassword = 'thartpc';
$dbDatabase = 'hospital';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");


$sql_check = mysql_query("SELECT * FROM messages order by med_id desc");


if(isSet($_POST['content2']))

{
$content2=$_POST['content2'];
$content3=$_POST['content3'];
$content4=$_POST['content4'];

mysql_query("insert into messages(medname, quantity, patientid) values  ('$content2','$content3','$content4')");

$sql_in= mysql_query("SELECT * FROM messages order by med_id desc");
$r=mysql_fetch_array($sql_in);

}

?>


<?php

require_once 'config.php';
$query = mysql_query("SELECT * FROM messages where patientid = '$content4'order by med_id desc") or die ("could not search");
$count = mysql_num_rows($query);    

 ?>

    <div class="panel panel-info">
        <div class="panel-heading"><class="panel-title"><h7>Transaction</h7></div>
            <div class="panel-body" style="padding-top:30px">

                <?php
                    echo "<table class='table table-hover';>
                    <tr>
                    <th style='border:1px solid; color:gray' align='center'> ID</th>
                    <th style='border:1px solid; color:gray' align='center'>Patient ID</th>
                    <th style='border:1px solid; color:gray' align='center'>Item(s)</th>
                    <th style='border:1px solid; color:gray' align='center'>Price</th>
                    <th style='border:1px solid; color:gray' align='center'>Quantity</th>
                    <th style='border:1px solid; color:gray' align='center'>Amount</th>




                    </tr>";

                    while($row = mysql_fetch_array($query)) 

                    {
                    echo "
                    <tr>
                    <td style='border:1px solid; color:gray' align='center'>".$row['med_id']."</td>
                    <td style='border:1px solid; color:gray' align='center'>".$row['patientid']."</td>
                    <td style='border:1px solid; color:gray' align='center'>".$row['medname']."</td>
                    <td style='border:1px solid; color:gray' align='center'>".$row['quantity']."</td>
                    <td style='border:1px solid; color:gray' align='center'>".$row['quantity']."</td>
                    <td style='border:1px solid; color:gray' align='center'>".$row['quantity']."</td>
                "
                ?>  
                    <td style='border:1px solid; color:gray' align='center'><a class="btn btn-danger btn-sm"  onclick="deletedata('<?php echo $row['med_id']; ?>')"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a></td>
                    </tr> 
                <?php

                    }
                    echo "</table>";    

                ?>  
            </div>
    </div>

这是我的表删除查询

<?php
include "getconnect.php";
if(isset($_GET['med_id'])){
$stmt = $conn->prepare("delete from messages where med_id=?");
$stmt->bind_param('s', $med_id);

$med_id = $_GET['med_id'];
$stmt->execute();

4 个答案:

答案 0 :(得分:0)

如果您的页面没有重新加载,那么您可以手动删除它。

例如,您认为您的行ID(或其他内容)是“row123”。

您需要更改代码,如下所示

<script type="text/javascript">

function deletedata(str){

var med_id = str;

$.ajax({
   type: "GET",
   url: "deletedata.php?med_id="+med_id,
}).done(function( data ) {
  //add this code
  $("#row123").remove();
});
}


</script>

答案 1 :(得分:0)

为该行添加Id属性与$ row [&#39; med_id&#39;]相同。我已经向行添加了数据属性(数据删除),以便我们知道要删除哪个ID。 您需要从我已经说明的代码中添加一个类到按钮 你需要做什么。

<?php
while ($row = mysql_fetch_array($query)) {
    echo "
<tr>
    <td id='" . $row['med_id'] . "' style='border:1px solid; color:gray' align='center'>" . $row['med_id'] . "</td>
    <td style='border:1px solid; color:gray' align='center'>" . $row['patientid'] . "</td>
    <td style='border:1px solid; color:gray' align='center'>" . $row['medname'] . "</td>
    <td style='border:1px solid; color:gray' align='center'>" . $row['quantity'] . "</td>
    <td style='border:1px solid; color:gray' align='center'>" . $row['quantity'] . "</td>
    <td style='border:1px solid; color:gray' align='center'>" . $row['quantity'] . "</td>
    "
    ?>
    <td style='border:1px solid; color:gray' align='center'>
        <a class="delete-button btn btn-danger btn-sm"  data-delete="<?php echo $row['med_id']; ?>">
            <span class="glyphicon  glyphicon-trash" aria-hidden="true"></span>
        </a>
    </td>
    </tr>
<?php } ?>

在您的脚本上执行以下操作

<script type="text/javascript">
//listen to a click even for the button
    $(document).ready(function () {
        $('.delete-button').click(function () {
            //this will be the id for the data to be deleted on the database
            var med_id = $(this).data('delete');
            $.ajax({
                type: "GET",
                cache: false,
                dataType: "json",
                url: "deletedata.php?med_id=" + med_id,
                success: function (deletedID) {
                    $("tr#" + deletedID).remove();
                }, error: function (xhr, ajaxOptions, thrownError) {
                    alert("an error occured. delete was not successful :( ");
                }
            });
        });
    });

</script>

将此添加到您的删除查询中以返回json有效数据,该数据将是已删除行的ID。

<?php
include "getconnect.php";
if (isset($_GET['med_id'])) {
    $med_id = $_GET['med_id'];
    $stmt = $conn->prepare("delete from messages where med_id=?");
    $stmt->bind_param('s', $med_id);
    $stmt->execute();
    echo json_encode($med_id);
    die();
}
?>

答案 2 :(得分:0)

config.serve_static_assets = true
config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect'
config.assets.compile = true
config.static_cache_control = 'public, max-age=31536000'
config.assets.compress = true
config.assets.digest = true

答案 3 :(得分:-1)

完成处理后,只需添加即可。尝试将其放入已完成的功能

location.reload();