Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Ajax is a killer. Can anyone help me delete a php record using Ajax?

Started by man5, Aug 18 2014 08:54 PM

php ajax sample record js

Please log in to reply

7 replies to this topic

#1 man5

Advanced Member

Members
142 posts

Posted 18 August 2014 - 08:54 PM

Right now I redirect to index page after I delete a record. However I am looking to make it so that I can delete a record without redirecting the page. I know this can be accomplised using Ajax. I have spent countless hours before trying to make it work, but it did not work.

So here is a basic setup I created. Can you please update it with ajax code so that I can see how it's done properly?

<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<meta charset="UTF-8">
		<title>Home Page</title>
	</head>
	<body>
	
	<div class="record" >
		<a href="record.php?id=<?php echo $record_id ?>"><?php echo $record_name; ?></a>
		<div class="delete-record">
			<a href="delete.php">Delete Record</a>
		</div>
	</div>	
	
	</body>
</html>

Edited by man5, 18 August 2014 - 08:55 PM.

Back to top

#2 trq

Advanced Member

Administrators
31,036 posts

LocationSydney, Australia.

Posted 18 August 2014 - 09:56 PM

We are not here to write code for people. Post what you have tried, and a description of your problem.

http://thorpesystems.com | http://proemframework.org | http://github.com/trq

SmtpCatcher - A very simple mock sendmail useful for testing PHP mail scripts.
OPM - My Linux package manager.

Back to top

#3 man5

Advanced Member

Members
142 posts

Posted 18 August 2014 - 10:57 PM

We are not here to write code for people. Post what you have tried, and a description of your problem.

Sure. Here is the updated code.

<!DOCTYPE HTML>
<html lang="en"> 
	<head>
		<meta charset="UTF-8">
		<title>Home Page</title>
		
		<script src="jquery.js"></script>
		   <script type="text/javascript">
			$(function() {
			$(".delete").click(function(){
			var element = $(this);
			var del_id = element.attr("id");
			var info = 'id=' + del_id;
			if(confirm("Are you sure you want to delete this?"))
			{
			 $.ajax({
			   type: "POST",
			   url: "delete.php?id=<?php echo $id?>&user=<?php echo $user; ?>",
			   data: info,
			   success: function(){
			 }
			});
			  $(this).parents(".show").animate({ backgroundColor: "#003" }, "slow")
			  .animate({ opacity: "hide" }, "slow");
			 }
			return false;
			});
			});
		</script>
	</head>
	<body>
	
	<div class="record" >
		<a href="record.php?id=<?php echo $record_id ?>"><?php echo $record_name; ?></a>
		<div class="delete-record">
			<a href="#" id="<?php echo $id; ?>" class="delete" >Delete Record</a>
		</div>
	</div>	
	
	</body>
</html>

Edited by man5, 18 August 2014 - 10:57 PM.

Back to top

#4 trq

Advanced Member

Administrators
31,036 posts

LocationSydney, Australia.

Posted 19 August 2014 - 12:34 AM

I think you missed a large portion of my reply.

http://thorpesystems.com | http://proemframework.org | http://github.com/trq

SmtpCatcher - A very simple mock sendmail useful for testing PHP mail scripts.
OPM - My Linux package manager.

Back to top

#5 man5

Advanced Member

Members
142 posts

Posted 19 August 2014 - 11:25 AM

Well the problem is that I can't get the record to delete using ajax. Above is the setup I have. I need someone to look at it and tell what's wrong with it.

Here is the delete.php code. This query works.

$user_id	= intval(Input::get('user'));
$record_id	= intval(Input::get('id'));
				
$sql = 'DELETE FROM records WHERE id = ? AND user = ?';

$stmt = DB::getInstance()->query($sql, array($record_id, $user_id));

Edited by man5, 19 August 2014 - 11:26 AM.

Back to top

#6 CroNiX

Advanced Member

Gurus
1,290 posts

LocationPortland, OR

Posted 19 August 2014 - 12:34 PM

You are sending the ajax data as POST, but trying to get them via GET in php.

Back to top

#7 Strider64

Advanced Member

Members
181 posts

LocationA burb of Detroit, MI

Posted 24 August 2014 - 10:57 AM

I didn't do the onclick warning, but I figure you can figure that out. That's just making the page spiffy anyways. This is how I would do it, though it could be modified to fit your needs, specially if you're pulling in the $user variable from someplace else.

<?php 
$id=64; // Temporay id variable:
$user = 'Clint Eastwood'; // Temporary user name variable:
?>
<!DOCTYPE HTML>
<html lang="en"> 
<head>
	<meta charset="UTF-8">
	<title>Home Page</title>
</head>
<body>
	
	<div class="record" >
		<div class="delete-record">
			<a class="delete" data-user="<?php echo $user; ?>" data-id="<?php echo $id; ?>" href="delete.php">Delete Record</a> 
		</div>
    <span id="result"></span>
	</div>	
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
		$(function() {
			var $delBtn = $('a.delete'),
			    $myURL  = $('a.delete').attr('href'),
			    $user   = $('a.delete').data('user'),
			    $id     = $('a.delete').data('id');
			
			console.log($myURL, $user, $id);
			$delBtn.on('click', function(event) {
				event.preventDefault();
				var params = { id: $id, user: $user }; // Set parameters
				var myData = jQuery.param( params ); // Set parameters to corret AJAX format				
				$.ajax({
					type:"post",
					url:$myURL, // Set the URL to from the href attribute in the anchor tag:
					data: myData,
					success:function(info){
						$('#result').html(info); // Display the result back when deleted: 
					}
				});	// End of Ajax function:							
			}); // End of Delete Button

		});	// End of Doc Ready Function:
	</script>
</body>
</html>

Below is the delete.php file that I tested it out with:

<?php
echo $result = $_POST['id'] . ' ' . $_POST['user'];

Edited by Strider64, 24 August 2014 - 11:02 AM.

http://www.pepster.com || "Insanity: doing the same thing over and over again and expecting different results." - Albert Einstein

Back to top

#8 gizmola

Advanced Member

Administrators
4,149 posts

LocationLos Angeles, CA USA

Posted 25 August 2014 - 12:25 AM

man5,

Do you utilize firebug or the chrome developer tools? They are highly useful for debugging ajax code especially in terms of determining whether or not the calls are actually executing.