World changes day by day!

Sunday, May 24, 2015

Ajax jquery delete data without refresh with animation effect

3 comments
With the help of jquery effects we can easily delete data without going to another page. In this jquery tutorial we are going to how to delete data without refresh i.e. delete the data from database as well as from webpage without page refresh. In this tutorial we are going to take advantage of Ajax to do this task. We also going to add some animation effect to it.
Like we have in facebook or twitter, where comments or tweets are deleted without refresh we are going to do the same. It's similar to like deleting comment without taking user to other page. Deleting the data in same page.
ajax jquery delete data without refresh with animation effect


First we are going to create a database. Add a table to the database as given below-

[highlight] CREATE TABLE IF NOT EXISTS `ajax_jquery_add_delete_record` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`content` text NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; [/highlight]
Next to delete data without refresh with animation effect we have to create a simple form and then add javascript to them. A ajax call file also be created to make the changes occur without any refresh.
First create the form in html as like this -
[highlight]
<div class="form_style">
<textarea name="content_txt" id="contentText" cols="45" rows="5" placeholder="Write what you are upto"></textarea>
<img src="images/loading.gif" id="LoadingImage" style="display:none" />
<button id="FormSubmit">Update Your Status</button>
</div>
[/highlight]

With this form we are going to get the text and update the status in the database. To make the ajax call we have to write jquery function. The jquery function to delete data without refresh is given as -


[highlight]

<script type="text/javascript">
$(document).ready(function() {

//##### send add record Ajax request to response.php #########
$("#FormSubmit").click(function (e) {
e.preventDefault();
if($("#contentText").val()==='')
{
alert("Please enter some text!");
return false;
}

$("#FormSubmit").hide(); //hide submit button
$("#LoadingImage").show(); //show loading image

var myData = 'content_txt='+ $("#contentText").val(); //build a post data structure
jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
$("#responds").append(response);
$("#contentText").val(''); //empty text field on successful
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image

},
error:function (xhr, ajaxOptions, thrownError){
$("#FormSubmit").show(); //show submit button
$("#LoadingImage").hide(); //hide loading image
alert(thrownError);
}
});
});

//##### Send delete Ajax request to response.php #########
$("body").on("click", "#responds .del_button", function(e) {
e.preventDefault();
var clickedID = this.id.split('-'); //Split ID string (Split works as PHP explode)
var DbNumberID = clickedID[1]; //and get number from array
var myData = 'recordToDelete='+ DbNumberID; //build a post data structure

$('#item_'+DbNumberID).addClass( "sel" ); //change background of this element by adding class
$(this).hide(); //hide currently clicked delete button

jQuery.ajax({
type: "POST", // HTTP method POST or GET
url: "response.php", //Where to make Ajax calls
dataType:"text", // Data type, HTML, json etc.
data:myData, //Form variables
success:function(response){
//on success, hide element user wants to delete.
$('#item_'+DbNumberID).fadeOut();
},
error:function (xhr, ajaxOptions, thrownError){
//On error, we alert user
alert(thrownError);
}
});
});

});
</script>

[/highlight]

Download Script View Live 

3 comments :

  1. Superb. I really enjoyed very much with this article here. Really it is an amazing article I had ever read. I hope it will help a lot for all. Thank you so much for this amazing posts and please keep update like this excellent article.thank you for sharing such a great blog with us. expecting for your.
    Digital Marketing Company in India
    seo Company in India

    ReplyDelete
  2. Well, your blog is very informative, thank you for posting such useful blog as it is very accurate. But i have another website with much better detail than this you must visitwww.helpadya.com Post Free Ads.

    ReplyDelete
  3. Awesome work.Just wanted to drop a comment and say I am new to your blog and really like what I am reading.Thanks for the share

    ReplyDelete

Leave Your comments