1

jQuery と Ajax を使用してレコードを削除しています。私が書いたコードはレコードを削除しますが、HTML テーブルは再度読み込まれます。これは、回避したいページの更新を意味します。

これが私のコードです：

コメント.php

<script type="text/javascript">
$(document).ready(function(){
    function loadList(){
        $.ajax({
            url: "load_list.php",
            cache: false,
            success : function(html){
                $(".name_list").html(html);
            }
        });
    }
    loadList();

    $("#Submit").click(function() {
        if($(":text").val().length==0)
            {
               // $(this).next().html("Field needs filling");
               $(":text").after('<span class="errorkeyup">Field cannot be empty</span>');
                //return false;
                success = false;
            }
            else
            {
                var name=$("#name").val();
                var message=$("#message").val();
                $.ajax({
                  type:"post",
                   url:"save_list.php",
                   data:"name="+name+"&message="+message,                             
                  success:function(data){
                 loadList();                                
                 } 
                }); 
                return false;
            }
    });
    $(".delete_button").on("click", function(){
        //this deletes the row clicked on with an alert and then reloads the list
        var id = $(this).attr("id");
        /*var x=window.confirm("Are you sure you want to delete this item?")
        if (x==true){*/
            $.ajax({
                type: "POST",
                url: "delete.php",
                data: "id="+ id,
                success: function(){
                    loadList();
                }
            });
       // }
        return false;
    });

});
</script>
</head>

<body>
<div id="form">

<form method="post" name="form" action="">
<div id="content">
 Name :    <input type="text" name="name" id="name" />
               </br>
               Message : <input type="text" name="message" id="message" />
               </br>
               </div>
<input type="button" value="Submit" id="Submit">

</form>
</div>
<div class="name_list"></div>

</body>

loadlist.php

<?php
include('connection.php');
$sqlnew = 'Select * from login order by id ASC';
    $res = mysql_query($sqlnew);
    echo'<table border="1">';
    echo'<tr>';
    echo'<td>SrNo.</td>';
    echo '<td>Name:</td>';
    echo '<td>Message:</td>';
    echo '<td>Delete</td>';
    echo'</tr>';
    $i=1;
    while($row = mysql_fetch_array($res))
    {
        echo '<tr>';
        echo'<td>'.$i.'</td>';
        echo'<td>'.$row['username'].'</td>';
        echo '<td>'.$row['message'].'</td>';
        echo"<td>
          <a id='".$row['id']."' href=delete.php?id=".$row['id']."&type=Delete class=delete_button>Delete</a></td>";
        echo"<td>
          <a id='".$row['id']."' href=comment.php?id=".$row['id']."&type=edit class=edit_button>Edit</a></td>";         
        echo '</tr>';
        $i++;

    }
    echo'</table>';

?>

delete.php

<?php
include('connection.php');

  if(isset($_REQUEST["id"]))
  {
  $cmd=mysql_query("delete from login where id=" .$_REQUEST["id"] .";");
   header("location: comment.php");
  }

?>
4

2 に答える 2

0

$.ajax()の呼び出しを行うときは、そこで関数$('.delete_button')を呼び出すべきではありません。これloadList()は、テーブルをリロードするものであるためです。代わりに、テーブルから削除された 1 つのエントリを削除する必要があります。

おそらく、削除ボタンの成功のコールバック内に配置された、これに似たもので削除できます。

$.ajax({
    type: "POST",
    url: "delete.php",
    data: "id="+ id,
    success: function()
    {
        $(this).parent().parent().remove();
    }
});
于 2013-04-13T02:11:43.817 に答える