Question

I’m trying to implement an archive functionality into a webpage that will submit something to a web page and then hide the div after it has been submitted. Basically, I’m creating a dynamic ID on a div and and an a tag. Here is my code:

<div class="section" id="milestone_<?php echo $milestone['id']; ?>">
  Stuff goes here
    <a href="javascript:void(archiveMilestone(<?php echo $milestone['id']; ?>))" id="archive_milestone_<?php echo $milestone['id']; ?>">(Archive)</a>
</div>

<script>
function archiveMilestone(id)
{
  var dataString = 'remove_milestone='+ id;
    $.post("<?php echo $_SERVER['REQUEST_URI']; ?>",dataString);
    $(document).ready(function(){
      $('a#archive_milestone_' + id).click(function(){
      $('#milestone_' + id).hide('slow');
      })
    });
}
</script>

It seems like it should be straightforward, and the code is getting successfully posted, but the line won’t disappear. Any help would be greatly appreciated, thanks!

Answer 1

HTML

<div class="section" id="milestone_<?php echo $milestone['id']; ?>">
  Stuff goes here
   <a href="#" class="btnArchive">Archive</a>
</div>

Script

$(function(){

 $(".btnArchive").click(function(){
   var item=$(this);
   var itemId=item.parent().attr("id").split('_')[1] 
   $.post("yourserverpage.php",{ remove_milestone : itemId } ,function(){
     item.parent().fadeOut("slow"); 
   });       
 });    
});

Here is the jsFiddle http://jsfiddle.net/hQkVZ/10/