Man Javascript/Ajax is tricky. Can you help me finish this code?

man5 · April 13, 2014

All I want to do is simply delete a record/row using ajax. For the life of me, I can't get it to work. I have tried many different methods and played around with them. Here is a basic example. Please do tell me what's wrong with it and how I can fix it.

index.php

<html>
<head>
	<title>Home page</title>
	
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script>
		$(document).ready(function() {
		
		$(function() {
		$(".del-action").click(function() {
		var commentContainer = $(this).parent();
		var id = $(this).attr("id");
		var string = 'id='+ id ;
			
		$.ajax({
		   type: "GET",
		   url: "delete.php",
		   data: string,
		   cache: false,
		   
		  });

		});
    </script>
</head>
<body>

<?php

	$get = DB::getInstance()->query("SELECT * FROM records WHERE record_id = 28 ");

	if(!$get->count()) {

		echo 'no record found!';

	} else {

		foreach($get->results() as $row) {
			
			$record_id = $row->record_id;
			
		?>
		
		<div class="record">
			<a href="#" class="del-action" id="<?php echo $record_id; ?>" >Delete</a>
		</div>	
		
		<?php

		}
		
	}

?>

</body>
</html>

delete.php

$record_id = intval($_GET['id']);	

$delete = DB::getInstance()->delete('records', array('record_id', '=', $record_id));

ps. it deletes the records fine without ajax/js. I just need help with the js code so that I can delete the record without redirecting or refreshing the page.

Edited April 13, 2014 by man5

denno020 · April 13, 2014

First step would be to debug whether clicking .del-action does anything. Open up the Network tab in either Chrome DevTools or Firebug (depening on the browser you're using), then click on the delete button. You should see the delete.php page show up in the network tab as soon as you press that button.

The first thing I'm noticing is:

$(function(){
 
});

inside

$(document).ready(function(){
 
});

I'm not sure if that affects anything, or why you would need it.. Try changing your JS to:

$(document).ready(function() {
  $(".del-action").click(function() {
    var commentContainer = $(this).parent();
    var id = $(this).attr("id");
    var string = 'id='+ id ;
            
    $.ajax({
     type: "GET",
     url: "delete.php",
     data: string,
     cache: false,    
    });
  });
});

I think I've got the brackets right there.. :/

Oh and I think you should set up your data parameter in your ajax call like this

data: {id: id} //don't use the string var

But I may be wrong about that, it might work both ways..

Edited April 13, 2014 by denno020

man5 · April 13, 2014

First step would be to debug whether clicking .del-action does anything. Open up the Network tab in either Chrome DevTools or Firebug (depening on the browser you're using), then click on the delete button. You should see the delete.php page show up in the network tab as soon as you press that button.

The first thing I'm noticing is:
$(function(){
 
});
inside
$(document).ready(function(){
 
});
I'm not sure if that affects anything, or why you would need it.. Try changing your JS to:
$(document).ready(function() {
  $(".del-action").click(function() {
    var commentContainer = $(this).parent();
    var id = $(this).attr("id");
    var string = 'id='+ id ;
            
    $.ajax({
     type: "GET",
     url: "delete.php",
     data: string,
     cache: false,    
    });
  });
});
I think I've got the brackets right there.. :/

Oh and I think you should set up your data parameter in your ajax call like this
data: {id: id} //don't use the string var
But I may be wrong about that, it might work both ways..

Perfect. I got it working. And yes both work, var string and data id. I am using data id as you advised.

Thank you!

Sign In

Man Javascript/Ajax is tricky. Can you help me finish this code?

Recommended Posts

man5

Link to comment

Share on other sites

denno020

Link to comment

Share on other sites

man5

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information