2017-08-27 1 views
1

私は次のコードを持っています: 私のコードは機能していますが、Ajaxの成功関数が機能しません、ページを更新することなく。 私はここで私の答えをStackOverflowでチェックしていますが、私の問題は解決していませんので、助けてください。成功の関数ajaxでレコードを1つ削除した後にテーブルコンテンツをリロードする方法

<html> 
<body> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 

</head> 
<table border="1"> 
    <?php 
    mysql_connect('localhost','root',''); 
mysql_select_db('test'); 

$sql ="SELECT * FROM test"; 
$result = mysql_query($sql) or die(mysql_error()); 

while($row = mysql_fetch_object($result)){ 

    echo '<tr><td>'.$row->fname.'</td><td>'.$row->lname.'</td>'.' 

    <a href="#" id="'.$row->id.'" class="trash" > 
    de 
    </a> 

    '.'</td></tr>'; 
    } 

?> 
    </table> 

</body> 
<script type="text/javascript"> $(function(){ 
    $(document).on('click','.trash',function(){ 
     var del_id= $(this).attr('id'); 
     var $ele = $(this).parent().parent(); 
     $.ajax({ 
      type:'POST', 
      url:'del.php', 
      data:{'del_id':del_id}, 
      success: function(data){ 
       if(data=="YES"){ 
        $ele.fadeOut().remove(); 
       }else{ 
         alert("can't delete the row") 
       } 
       } 
      } 

      }); 
     }); 
});</script> 
</html> 

del.phpファイルがある:

<?php 
mysql_connect('localhost','root',''); 
mysql_select_db('test'); 
$music_number = $_POST['del_id']; 
//echo $music_number; 
$qry = "DELETE FROM test WHERE id ='$music_number'"; 
$result=mysql_query($qry); 
if(isset($result)) { 
    echo "YES"; 
} else { 
    echo "NO"; 
} 
?> 
+0

エラーとは何ですか? –

+0

更新されたレコードが表示されません。 – Jazba

+0

'alert'ステートメントの後に、あなたのコードに' '' '' '' '' '' '' '' ''を複数コピーペーストエラーですか?または、あなたのコードにもこのエラーがありますか? Sidenote:もうmysql_関数を使うべきではありません。PHP7では廃止され削除されました。 Sidenote 2:あなたのコードは、あなたの 'DELETE'ステートメントでSQLインジェクション攻撃に脆弱です。 –

答えて

1

は、これを試してください

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.trash').click(function(){ 
     var tr = $(this).closest('tr'); // **add this 
     var del_id = $(this).attr('id'); 
     $.ajax({ 
       type: 'POST', 
       url: 'del.php', 
       data: { 
        'del_id': del_id 
       }, 
       success: function(data) { 
        if (data == "YES") { 
         tr.fadeOut(1000, function(){ // **add this 
          $(this).remove(); 
         }); 
        } else { 
         alert("can't delete the row") 
        } 
       } 
      } 

     }); 
    }); 
}); 
</script> 

closest方法は、選択された要素の最初の祖先を返します。 https://api.jquery.com/closest/

関連する問題