3

jクエリAjaxイベントを学習しています。jクエリAjaxを使用してphpにレコードを挿入して表示しましたが、コードを記述したレコードを削除できませんが、機能せず、テーブルを再度ロードしたくありません。助けてください

テーブル名 : ログイン

列: ID、ユーザー名、メッセージ

コメント.php

    <script type="text/javascript">
$(document).ready(function(e) {
 function showComment(){
     $.ajax({
     type:"post",
      url:"process2.php",
      data:"action=showcomment",
      success:function(data){
       $("#flash").html(data);
      }
    });
   }
showComment(); 

//Insert records 
$("#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:"process2.php",
                   data:"name="+name+"&message="+message+"&action=addcomment",                            
                  success:function(data){
                  showComment();                                  
                 } 
                }); 
            }

  });

$('.delete').click(function(e){
    e.stopPropagation();
            var deleteID = $(this).attr('name');
            var row = deleteID;
            $.ajax({
                type: "POST",
                url: "delete.php?deleteID=" + deleteID,
                data: "deleteID="+ deleteID,
                success: function(result){
                    $('#row'+row).fadeOut('fast');
                }
            });

        });     
});



</script>
    </head>

    <body>
    <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 id="flash"></div>

            </form>
    </body>

プロセス.php

  <?php
  mysql_connect("localhost","root","dot1235");
  mysql_select_db("chitra");


  $action=$_POST["action"];

  if($action=="showcomment"){
     $show=mysql_query("Select * from login order by id ASC");
 echo "<table border=1 id=t1>";

   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($show)){
        //echo "<li><b>$row[name]</b> : $row[message]</li>";
        echo "<tr>";
    echo"<td>".$i."</td>";
    echo "<td>" .$row['username'] ."</td>"; 
    echo "<td>" .$row['message'] ."</td>";
    echo "<td><a href='javascript:void(0)'><img src=delete.png class=delete name=".$row[id]."</a></td>" ;
    echo "</tr>";
    $i++;
     }
     echo"</table>";
  }
  else if($action=="addcomment"){
    $name=$_POST["name"];
    $message=$_POST["message"];

     $query=mysql_query("insert into login(username,message) values('$name','$message') ");

     if($query){
        echo "Your comment has been sent";
     }
     else{
        echo "Error in sending your comment";
     }
  }


?>

delete.php

<?php
include("connection.php");
 if(isset($_POST['id']))
  {
   $id = $_POST['id'];
   $id = mysql_escape_String($id);
   $delquery=mysql_query("delete from login where id=$id") or die(mysql_error());
   //echo "Record deleted";

  }

?>
4

9 に答える 9

9

あなたの delete.php ページには小さなバグがあります。

    $(".delete_button").click(function() {
var id = $(this).attr("mid");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
   type: "POST",
   url: "delete.php",
   data: dataString,
   cache: false,

   success: function()
   {
    if(id % 2)
    {
    parent.fadeOut('slow', function() {$(this).remove();});
    }
    else
    {
    parent.slideUp('slow', function() {$(this).remove();});
    }
  }

idURLを渡して取得mid するので、これに応じて変更delet.phpしてください。

<?php
include("connection.php");
 if(isset($_POST['id']))  //mid to id
  {
   $id = $_POST['id']; //mid to id
   $id = mysql_escape_String($id);
   $delquery=mysql_query("delete from login where mid=$id") or die(mysql_error());
   //echo "Record deleted";

  }

?>
于 2013-04-10T05:48:56.317 に答える
2

ここに画像の説明を入力

以下は、JQuery でコーディングされたロジック全体の核心部分です。

$(document).ready(function()
{
    $('table#delTable td a.delete').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var id = $(this).parent().parent().attr('id');
            var data = 'id=' + id ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete_row.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                    parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });
        }
    });

    // style the table with alternate colors
    // sets specified color for every odd row
    $('table#delTable tr:odd').css('background',' #FFFFFF');
});

ここで何が起こっているかを、分割と規則の方法論を使用して調べてみましょう。

$(document).ready(function()

これは、ドキュメントの準備が整うとすぐに実行される JQuery の関数です。これは onload イベントに似ていますが、JQuery の関数はそれよりもはるかに高速です。そのため、ページの準備ができたときにこのコードを実行できるようにしたいと考えています。

$('table#delTable td a.delete').click(function()

CSS セレクターに取り組んだことがあるなら、上記の行はそれほど謎ではないはずです。JQuery を使用して、同じ構文を使用して要素をターゲットにすることができます。基本的に、id delTable とその中に TD を持つテーブルがあり、クリックするとクラス delete を持つハイパーリンクがあり、この関数内で指定されたコードが実行されると言います。そのため、id delTable を持つテーブル内の TD 内の delete という名前のクラスを持つハイパーリンクがクリックされると、指定されたコードが実行されます。

if (confirm("Are you sure you want to delete this row?"))

ユーザーが本当に行を削除したいかどうかを確認できるようにしたいと考えています。

var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();

JQuery では、$(this) は常にターゲット要素を参照することに注意してください。この場合は、クラス delete を持つハイパーリンクです。attr は、タグの属性を取得または設定するために使用されます。したがって、id 変数は、このハイパーリンクの親である TD を参照し、次にこの TD の親である TR を参照します。ここで、この TR の id 属性を取得します。HTML コードでは、各行の主キー フィールドをこれらの TR に割り当てて、レコードを識別して削除します。data 変数は、JQuery を使用して作成された ajax リクエストの一部として送信されるデータを作成します。親変数は、delete クラスのハイパーリンクであるターゲット要素を含む各 TR を参照します。

$.ajax(
{
       type: "POST",
       url: "delete_row.php",
       data: data,
       cache: false,

       success: function()
       {
        parent.fadeOut('slow', function() {$(this).remove();});
       }
 });

$.ajax 関数は、ajax リクエストを送信するために使用されます。引数の中で、type は POST か GET かに関係なくリクエストのメソッドを指し、url は ajax リクエスト データを取得して何らかの応答を返すスクリプトを指し、data はクエリ文字列と同様に ajax リクエストの一部として送信されるデータを指します。 IE ではリクエストがキャッシュされ、 $.ajax 関数の属性でもある success 関数が、リクエストが成功した場合にその中のコードを実行するためです。

parent.fadeOut('slow', function() {$(this).remove();});

前に説明したように、この場合、parent は TR を参照します。fadeOut 関数には 2 つの引数が必要です。実行するアニメーションの速度と関数。したがって、この行が行うことは、フェードアウトして親を削除し、次に remove() メソッドを使用してターゲット リンクを削除することです。このようにして行全体がなくなり、ajax リクエストの助けを借りて、データベースからのレコードも削除されます。ここでは JQuery の fadeOut アニメーション機能を使用しましたが、他にも利用可能なアニメーションがあります。

$('table#delTable tr:odd').css('background',' #FFFFFF');

この行は、id が delTable のテーブルの奇数 TR ごとに背景スタイルを適用することを意味します。ページの準備ができたときにコードが実行されるため、テーブルの奇数行ごとに別の色が表示されます。

ここからダウンロードできます。

于 2013-04-10T06:08:33.267 に答える
0

の代わり$id = $_POST['id']delete.phpで使用すると、機能$_POST['mid']するはずです。

于 2013-04-10T05:48:38.920 に答える
0

POST values異なっています。このように変化delete.php POST valuesします。

<?php
include("connection.php");
 if(isset($_POST['id']))   // changed into 'id'
  {
   $id = $_POST['mid'];
   $id = mysql_escape_String($id);
   $delquery=mysql_query("delete from login where mid=$id") or die(mysql_error());
   //echo "Record deleted";

  }

?>
于 2013-04-10T05:49:05.657 に答える
0

男、JavaScript コードの削除ハンドラに次の行があります。

var id = $(this).attr("mid");

したがって、削除リンクから存在しない「mid」属性を取得します。

あなたのprocess.php

<td><a href="#" id="<?php echo $mid; ?>" class="delete_button">Delete</a></td>

.attr('id')id変数に割り当てる必要があります。

また、他のコメンターが指摘したように、スクリプトはパラメーターをdelete.php期待していますが、それに送信します。$_POST['mid']id

なぜ奇妙なネーミングなのですか?この「中間」のものをドロップして、どこでも「id」を使用してください。

ところで、カスタム クリック ハンドラーを HTML リンクに割り当てる場合は、event.preventDefault()ハンドラーで最初に呼び出すことをお勧めします。そうしないと、ブラウザーがこのリンクの属性に従おうとするためhrefです。この場合、ページを一番上までスクロールします。 .

于 2013-04-10T05:49:06.863 に答える
0

問題は変数名にあると思います。

AJAX 関数で、変数 name を使用し'id'ました。

$(".delete_button").click(function() {
  var id = $(this).attr("mid");
  var dataString = 'id='+ id ; // Here
  var parent = $(this).parent();

しかし、削除プロセスでは、あなたはそれを取得しています$_POST['mid']

if(isset($_POST['mid'])) // Change this to $_POST['id']
  {
    $id = $_POST['mid']; // Change this to $_POST['id']
于 2013-04-10T05:46:41.247 に答える