World changes day by day!

Sunday, May 24, 2015

Ajax jquery delete data without refresh with animation effect

9 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 

9 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. 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
  3. This comment has been removed by the author.

    ReplyDelete
  4. Healrun is a health news blog we provide the latest news about health, Drugs and latest Diseases and conditions. We update our users with health tips and health products reviews. If you want to know any information about health or health product (Side Effects & Benefits) Feel Free To ask HealRun Support Team.

    ReplyDelete
  5. Supplements For Fitness needs during a diet. Let's look at some of the ingredients you should look for in an effective weight loss supplement. Xenadrine RFA-1 is a bodybuilding and weight loss supplement, and is also one of the most

    ReplyDelete
  6. Hey, my relative quotes often, "Don't be a stick within the mud." I suppose you want to get a balance. We have a tendency to'll get in tight. It had been a no brainer. Enable me to elaborate. Fresh Keto Cleanse How do folks smoke out certified Slimmer Body reviews? This might preferably be the world's largest Weight Loss Diet Tips. Weight Loss may become a predicament for a number of clubs.

    https://www.healthvirile.com/fresh-keto-cleanse/

    https://www.healthvirile.com/

    ReplyDelete
  7. Momentary pressure like managing an assault or playing a game doesn't adversely influence the safe framework. Immune Defence The spleen is told to discharge progressively red and white platelets. The red platelets increment oxygen supply to the lungs and heart while the white platelets are coordinated to bits of the body well on the way to be harmed or get tainted, to be specific the skin, bone marrow and lymph hubs.

    https://www.topbodyproducts.com/immune-defence/

    https://twitter.com/body_products/status/1249983234986799106

    https://www.linkedin.com/posts/top-body-products-2171451a4_immunesystem-bacteria-covid-activity-6655753259598344192-isFf/

    http://topbodyproducts.over-blog.com/immunedefence

    https://topbodyproductsreviews.blogspot.com/2020/04/immune-defense-how-it-works-and-its.html

    https://www.reddit.com/user/topbodyproducts/comments/g17ye0/immune_defense_reviews/

    https://sites.google.com/site/topbodyproducts/immune-defence

    ReplyDelete

Leave Your comments