2013-04-10 2 views
3

Я изучаю j-запрос Ajax events.I вставил и отобразил записи в php, используя j-запрос Ajax, но я не могу удалить запись. Я написал код, но его не работает, и я не делаю «т хотите таблица для загрузки again.Please помочьудалить запись в таблице с помощью jquery ajax

TableName: войти

Колонка: идентификатор, имя пользователя, сообщение

Comment.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> 

process.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"; 

    } 

?> 
+0

Вы проверили, что вы получаете $ _POST ['mid'] на странице delete.php? –

ответ

0

Я думаю, что проблема заключается в имени переменной.

В вашей функции AJAX вы использовали имя переменной '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'] 
0

Использование $id = $_POST['id'] в delete.php вместо $_POST['mid'], то он должен работать.

8

на вашей странице удаления.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();}); 
    } 
    } 

вы передаете id в URL и получить mid так изменить ваш delet.php accpording к этому.

<?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"; 

    } 

?> 
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"; 

    } 

?> 
0

Man, вы имеете следующую строку в коды, в то в обработчике удаления:

var id = $(this).attr("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 этой ссылки, в вашем случае - прокрутка страницы вверх.

+0

Спасибо, что указали мою ошибку, но все равно не удалось – chithon

+0

Ну, во всяком случае, ваш вопрос не содержит важной информации: что Firebug или Chrome Developer Tools показывают вам на выходе консоли? Вы пытались использовать 'console.debug' и' print_r' переменные? – hijarian

1

в JavaScript изменение

var dataString = 'id='+ id ; 

в

var dataString = 'mid='+ id ; 
0

Я бы сделать это так, гораздо проще и ровнее:

delete.php

<?php 

include("connection.php"); 
if(!isset($_REQUEST['action'])) die("Invalid request"); 
if(!isset($_REQUEST['id'])) die("Invalid Comment ID"); 
$action = $_REQUEST['action']; 
if($action == 'remove_comment') { 
    $id = (int)$_REQUEST['id']; 
    $delquery = mysql_query("DELETE FROM `login` WHERE mid=$id") or die(mysql_error()); 
    echo 1; 
} 
?> 

сценария расслоение плотной :

function RemoveComment(comment_id) { 
    var row = $("table#comments tr#commentid-"+comment_id); 
    if(row.length < 1) return false; //if element doesnt exist on our page 
    $.post("http://yourhost/delete.php", { action: "remove_comment", id: comment_id }, 
    function(response) { 
     if(response == 1) row.fadeOut(); 
     else alert(response); 
    }); 
} 

EDIT:

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

моя "вар строка" является "вар родитель" в вашем коде, я использовал различные имена элементов и идентификаторы. Вы должны использовать свои.

Вместо Приветствия!

+0

спасибо за решение, которое я пробовал, но всякий раз, когда я нажимаю ссылку на удаление, он дает мне неверный запрос. – chithon

+0

Попробуйте заменить $ _REQUEST на $ _POST. Очень странно и редко, что _REQUEST не работает на сервере (случилось со мной один раз за все эти годы разработки веб-приложений) –

+0

может у вас объяснить var row = $ ("table # comments tr # commentid -" + comment_id); вашего кода в соответствии с моим кодом? – chithon

0

Я вижу две проблемы здесь

  1. переменной на стороне сервера называется mid, где вы отправляете id
  2. parent нужно указывать на tr в вашем случае это указывает на td

    $ (". Delete_button"). Click (function() { var id = $ (this) .attr ("mid"); var dataString = 'mid =' + id; var parent = $ (this) .closest ('tr');

    $.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(); 
              }); 
           } 
          } 
    
         }); 
    
    return false; 
    

    });

2

enter image description here

Вот сердце всей логики закодированной с 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 внутри нее, которая имеет гиперссылку с удалением класса при нажатии, запускает код, указанный в этой функции. Поэтому, когда нажата гиперссылка с классом named delete внутри TD в таблице с id delTable, тогда будет указан указанный код.

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, то $ (это) всегда относится к целевому элементу, который в нашем случае гиперссылка с классом удаления. attr используется для получения или установки атрибутов тегов. Таким образом, переменная id ссылается на родителя этой гиперссылки, которая является TD, а затем родителем этого TD, который является TR. Итак, здесь мы получаем атрибут id этого TR. В HTML-коде мы будем назначать поля первичного ключа каждой строки этим TR для идентификации и удаления записей. Переменная данных позволяет отправлять данные как часть запроса ajax, выполненного с использованием JQuery. Родительская переменная относится к каждому TR, содержащему целевой элемент, который является гиперссылкой с удалением класса.

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

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

Функция $ .ajax используется для отправки ajax-запросов. Среди его аргументов тип ссылается на метод запроса, будь то POST или GET, url ссылается на скрипт, который получит данные запроса ajax и возвращает некоторый ответ, данные относятся к данным, которые будут отправляться как часть запроса ajax, аналогичного строке запроса форма, кеш контролирует, будет ли кеш включен или выключен для запроса, потому что в запросах IE кэшируется и функция успеха, которая также является атрибутом функции $ .ajax, запускает код внутри нее, если запрос прошел успешно.

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

Как объяснялось до того, как родитель ссылается на TRs в нашем случае. Функция fadeOut нуждается в двух аргументах; скорости и функции анимации. Итак, что делает эта строка, так это то, что он удаляет родительский элемент, вытесняя его, а затем целевую ссылку, используя метод remove(). Таким образом, целая строка исчезла и с помощью ajax-запроса также удаляется запись из базы данных. Здесь мы использовали функцию анимации fadeOut JQuery, но есть больше анимаций.

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

Эта линия означает, что применить стиль фона к каждому нечетному TR таблицы с id delTable. Теперь, поскольку наш код выполняется, когда страница готова, поэтому наша таблица будет иметь альтернативные цвета для каждой нечетной строки.

Вы можете скачать его here.

Смежные вопросы