CODEWITHSUNDEEP
jqueryhide
user882134
user882134

Reputation: 309

Need to hide div when clicked

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!

Upvotes: 1

Views: 129

Answers (3)

Shyju
Shyju

Reputation: 218732

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/

Upvotes: 2

Dustin Graham
Dustin Graham

Reputation: 2086

You also may try archiveMilestone(<?php echo json_encode($milestone['id']); ?>) adding the json_encode() as it may need to be escaped.

Upvotes: 0

cereallarceny
cereallarceny

Reputation: 4983

To start, you shouldn't have $(document).ready(... inside of a function. This should exist in the outermost layer of your Javascript. Secondly you're using PHP, so the items your wanting to select don't exist until PHP parses them. Try instead the following to actively bind an event handler to an element:

$("#archive_milestone" + id).on("click", function() {
    $("#milestone_" + id).hide("slow");
});

Upvotes: 1

Related Questions