Some days back I had posted "Delete a Record with animation fade-out effect using jQuery and Ajax". In this post I want to explain delete records with random animation(slideup and fadeout) effect using jQuery framework. Very simple code just 10 lines. Take a look at live demo.
Download Script 
Live DemoDatabase Table Code
A simple database table two columns msg_id and message.
CREATE TABLE updates(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT);
delete_random.php
Contains PHP code displaying records from database. Take a look at class="delete_button"
<ol class="update">
<?php
include("dbconfig.php");$sql="select * from updates order by msg_id desc";
$result = mysql_query($sql);
while($row=mysql_fetch_array($result))
{
$message=stripslashes($row["message"]);
$msg_id=$row["msg_id"];
?>
<li>
<?php echo $message; ?> <a href="#" id="<?php echo $msg_id; ?>" class="delete_button">X</a>
</li>
<?php
}
?>
</ol>
jQuery code
Contains javascipt code. $(".delete_button").click(function(){}- delete_button is the class name of anchor tag (X). Using element.attr("id") calling delete button value. If id value is even number if(id(even) % 2) = If(0) false
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
success: function()
{
if(id % 2)
});
return false;
});
});
</script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();
$.ajax({
type: "POST",
url: "deleteajax.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;
});
});
</script>
deleteajax.php
Contains PHP code. Delete record from the database.
<?php
include("dbconfig.php");
if($_POST['id'])
$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>
include("dbconfig.php");
if($_POST['id'])
{
$id=$_POST['id'];$id = mysql_escape_String($id);
$sql = "delete from updates where msg_id='$id'";
mysql_query( $sql);
}
?>
CSS Code
*{margin:0;padding:0;}
list-style:none;font-size:1.2em;
}
height:50px; border-bottom:#dedede dashed 1px;
}
border-top:#dedede dashed 1px; height:50px;
}
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
margin-left:10px;
font-weight:bold;
float:right;
}
ol.update
{list-style:none;font-size:1.2em;
}
ol.update li
{ height:50px; border-bottom:#dedede dashed 1px;
}
ol.update li:first-child
{ border-top:#dedede dashed 1px; height:50px;
}
#main
{width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{margin-left:10px;
font-weight:bold;
float:right;
}
Great thank for ur support!
ReplyDeleteon "deleteajax.php" the variable "$id" id equal to "id=2" for instance. I think it will trigger a sintax error. Am I right?
ReplyDelete@Eduardo de Matos
ReplyDeleteNo.........
Eg : $id = 1 -> 1 % 2 = 1 ---> if(1) means true...
Eg : $id = 2 -> 2 % 2 = 0 ---> if(0) means false..
Eg : $id = 3 -> 3 % 2 = 1 ---> if(1) means true.....
.
.
.
.
@Srinivas
ReplyDeleteI mean the variable "$id" on the SQL query
Doesn't seem random to me.... I can predict exactly which animation will play!
ReplyDeleteHello Srinivas.
ReplyDeleteNice article!
I was just trying to download this but it seems the downloaded index file and the code you have given here is pretty different.
Neither i find delete_random.php file nor the jquery code you have given here.
Do you think is this the same zip file or code for this article? Or can you give me the link where i can find the zip file for this module?
Regards!
Hello again!
ReplyDeleteI am sorry. i should have checked it properly into my index page.:( everything is there.
And yeah its working.
great script!
Well it's a good script, but can i recover a deleted record ?
ReplyDeleteIn my opinion the script need an alert, to verify the action...
@Manuel
ReplyDeleteif(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax
({.......................... });
}
More information
Delete a Record with animation fade-out effect using jQuery and Ajax.
Mysql row won't delete. Very strange installed the tables right. Included config file but the deletion won't work. The database ids are exactly the same as in the url. How to fix this?
ReplyDeletemySQL could not delete the attribute..why?
ReplyDeletewhy deletion doesn't work?
ReplyDeleteLive Demo in free PHP hosting : No database connetion.
ReplyDeletenice, from tunisia ;)
ReplyDeleteFor some reason this example does not reach the deleteajax.php file for me. I have inserted logging to debug the issue, but the logging I placed outside of the call works while the logging within the call to the deleteajax is never written.
ReplyDeleteHi there...
ReplyDeleteUr code help me al ot..
but i've 1 prob...
i use paginaton for this delete code...
Let say if in 1 page there is 10 records, when I delete 1 record, the page display 9 records.
What should I add in the code to make the list refresh and list 10 records.
great work here my friend..........
ReplyDeleteur tutorials seems easy to learn and is making me a jquery fan...........
thank you for this wonderful work.........
awesome stuff, how would you code this so it only displays 5 rows and as you delete a row it will autofill if there are more than 5 rows?
ReplyDeleteThank you very much, this is working great!
ReplyDeleteI subscribe to some of the problems already mentioned. But the main comment i have to make is that if these ARE tutorials (as asserted) then there is an amazing lack of comment & explanation!!!!
ReplyDeleteIt's really nice...
ReplyDeleteworking great!
ReplyDeleteI just, mix Pagination and Delete Records together but it not working any idea how to do this
ReplyDeleteIn order to use pagination and delete records, once the data has been deleted you must refresh page so it shows the LIMIT again, lets say 10.
ReplyDeletesimple javascript will do.
history.go(0)
Srinivas done great job explainning this tutorial, hope you all get it.
There are lots of ajax[delete] code exist on web, but doesn't work properly. Thanks for this helpful article. Really Nice.
ReplyDeleteBest Regards From TURKEY.
Boy... kudos to you! you posts are very useful!!
ReplyDeleteHi,
ReplyDeletescript works, it reaches the AJAX script and deletes the item. BUT the item is still present in the list until I refresh the site...
How would you pass more variables than user_id to the delete.php page?
ReplyDelete@Above Comment:
ReplyDeleteYou can use below code to pass more variables
var dataString = 'id='+ id + '&name=' + name + '&add=' +add; // So on...
Awesome tutorial. I've successfully added it to my project.
ReplyDeleteThanks!
Tim
nice ! i have more simple code for delete data with AJAX and JQuery .. :) I hope you see..
ReplyDeletehttp://simplycdesign.blogspot.com/2011/06/delete-data-dengan-ajax-dan-jquery.html
how to used two var
ReplyDeleteI have code
ReplyDelete[tr][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]blabla[/td][td]< a c lass = "delete_button" i d="id; ?>" href="#">[/td][/tr]
How is remode < tr >
(sorry, I now little english )
its urgent please I did every thing ok but my delete_random.php doesn't pass me to deleteajax.php.
ReplyDeletewhats going wrong?
para poder excluir no mysql é simples só add no deleteajax.php
ReplyDeleteinclude("config.php");
e no where ms_id='$id' esta faltando g no msg_id='$id'
It was delete in my demo.but when i refresh page again comes back .same thing with UR demo page.how to delete permanent
ReplyDeleteVery Nice Tutorial Man...it really helped and more importantly in a simpler and understandable way...but as a learner i needed to ask a question that :
ReplyDeleteCan we become a developer like you by learning things from websites like yours??In short i need to ask whether one should learn development in the way i am doing write now.i.e.learning or copying after understanding the code from the internet as and when needed.??Am i going right??
It was delete in my demo.but when i refresh page again comes back .same thing with UR demo page.how to delete permanent
ReplyDelete