asked on

Jquery/Ajax Success or Failure

Hi. The page below includes Jquery which detects if a delete link is clicked and if so, it triggers the ajax to delete an image. I want to add a "hidden" class to the the parent DIV if the Ajax is successful but I don't know how to keep hold of the ID of the closest DIV after the Ajax success.

Can some help me add hidden class to parent DIV if successful and alert an error if not succesful?

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js?ver=3.1.2'></script></head>
<body>
<div class="pic_container">
  <div class="pic_item" id="1">
    <p><a href="#" class="delete" title="img1.jpg">Delete</a></p>
  </div>
</div>
<div class="pic_container">
  <div class="pic_item" id="2"><a href="#" class="delete" title="img2.jpg">Delete</a>
    </p>
  </div>
</div>
<script type="text/javascript">
	$('.delete').click(function(){
		var id = $(this).closest("div").attr("id");
		alert(id);
		var form_data = 
		{
			file_orig: 'data1',
			ajax: '1'
		};
		$.ajax({
			url: "ajax_process.php",
			type: 'POST',
			data: form_data,
			success: function(msg) {
				alert(msg);
				//$('#'+$id).addClass("hidden");
		}
	});
	return false;
});
</script>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

nmarun

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

benners70

ASKER

Hi nmarun. Thanks for your comment. Could you please explain it a little please? Why is your example showing a GET and XML when my example is POST and an ARRAY. Ignoring that, I can't see how you get the ID for var div after the AJAX return. Thanks.

SOLUTION

deeps6ix

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nmarun

You might want to read about AJAX here:
http://en.wikipedia.org/wiki/Ajax_%28programming%29

And see the ajax documentation below:
http://api.jquery.com/jQuery.ajax/

Arun