JQuery Delete Records without Page Refresh | Lessoncup Programming Blog

Wednesday, 2 October 2013

JQuery Delete Records without Page Refresh

Few days back i developed facebook style simple comment system. Jquery Ajax Comment System now i have just added a delete feature to delete the records.



Step 1

Add the bellow code in index.php inside the <HEAD> tag and i am adding one more function to delete the posts and requesting the page delete.php via ajax request.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
$('.addComment').click(function(){
  
    
  var element = $(this);
  var id = element.attr("id");
  
  $('#commentBox'+id).slideToggle(200);
  $('#comment'+id).focus();
  $('#comment'+id).val('');
  $('#comment'+id).attr("placeholder", "Comment");
  
  
  
 });
 
 
 
 $('.comBtn').click(function(){
  
  var element = $(this);
  var cid = element.attr("id");
  
  var comment=$('#comment'+cid).val();
  var datasend = 'com='+ comment + '&pid=' + cid;
  
  if(comment==""){
   
   $('#comment'+cid).focus();
   $('#comment'+cid).attr("placeholder", "Enter the comment..");
   
  }else{
  
  $.ajax({
   
   type:"POST",
   url:"comment.php",
   data:datasend,
   cache:false,
   success:function(){
    $('#comment'+cid).val('');
   }
   
   
  });
   
  }
  
  return false;
     
  });
  
  
  $('.delete').click(function(){
  
  var element=$(this);
  var did=element.attr('id');
  var datadel='delete='+did;
  
  if(confirm("Are you sure you want delete this POST!")){

  $.ajax({
   
   type:"POST",
   url:"delete.php",
   data:datadel,
   cache:false,
   success:function(){
    
    $('#post'+did).hide();
    
   }
   
  });
  
  }
  
  return false;
  
 });
     
});

</script>

Step 2

i am adding the DIV to put the delete icon and assign the ID with the php variable.
<div style="float:right; margin-top:-28px; cursor:pointer;" class="delete" id="<?php echo $full['pid'];?>">
<img src="delete.png" align="absmiddle" style="width:18px;" title="Delete" />
</div>

<a class="addComment" id="<?php echo $full['pid']?>">Comment</a>

<div id="commentBox<?php echo $full['pid']?>" class="combox">

<form action="" method="post" name="<?php echo $full['pid']?>">

<textarea name="comment" class="comment" type="text" id="comment<?php echo $full['pid']?>" style="float:left;" placeholder="Comment">
</textarea>

<input name="comBtn" class="comBtn" id="<?php echo $full['pid']?>" type="submit" value="Comment" />

</form>

</div>

Step 3

Create the database
--
-- Table structure for table `posts`
--

CREATE TABLE IF NOT EXISTS `posts` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `post` varchar(255) NOT NULL,
  PRIMARY KEY (`pid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

--
-- Table structure for table `comments`
--

CREATE TABLE IF NOT EXISTS `comments` (
  `cmid` int(11) NOT NULL AUTO_INCREMENT,
  `pid` int(11) NOT NULL,
  `comment` varchar(255) NOT NULL,
  `date` date NOT NULL,
  PRIMARY KEY (`cmid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;

--


Live Demo   Download Script

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons