Jquery ajax post - how to return data?

Question

I have a profile page containing a series of images. I want to use jQuery to allow the user to delete an image from the server and refresh the page without reloading the entire page. When it succeeds, it will remove the image containing the div from the page. My delete function is PHP; pretty simple:

delete.php

<?php if (isset($_POST['id'])) { if (unlink($_POST['id'])) { echo "success"; } else { echo "failure"; } } ?> 

(User authentication already exists to get them on the page that calls delete.php.)

Here is the html of one displayed image - there can be up to five such blocks one after another:

 <div class="box"> <img src="uploads/t_10DOT_22C_1111_1300370702_3.jpg" /> <h5><a rel="external" href="uploads/10DOT_22C_1111_1300370702_3.jpg">See full version</a></h5> <a href="#" id="10DOT_22C_1111_1300370702_3.jpg" class="delete" onclick="return ConfirmDelete();" >x</a> <div class="clear"></div> </div> 

My jQuery so far looks something like this:

 $(document).ready(function() { $('#load').hide(); }); $(function() { $(".delete").click(function() { $('#load').fadeIn(); var commentContainer = $(this).parent(); var id = $(this).attr("id"); var string = 'id='+ id ; $.ajax({ type: "POST", url: "delete.php", data: string, cache: false, success: function(data){ commentContainer.slideUp('slow', function() {$(this).remove();}); $('#load').fadeOut(); } }); return false; }); }); 

The part I'm connected to is the ajax post. How does part of success really work? What do I need to do in my php file so that ajax knows if success was successful or unsuccessful?

Answer 1

As soon as the ajax send request has completed the execution of the file to which you sent the request, if there was no error, the code that you add in the "Success" section is executed in this case

 success: function(data){ /*The code you need*/ }); 

The previous part, if the code is executed, the "data" variable contains everything that you return from your php file, it can be data, it can just be "true" or "false", you choose what to send so your jQuery knows if he was successful.

Hope this helps a bit.

Change note:

 function(applyData){ if ( applyData.toString() == 'invalid' ){ $('#pollError').html('Global styles cannot be modified.'); $('#pollNotice').html(''); } else{ $('#pollNotice').html('The changes to the style have been applied.'); } }); 

The previous example is a living example of what you can do inside a function in the success event. There I process the “invalid” status, otherwise I succeed, after that I update the pair of DIVs if invalid or update one DIVs if successful.

This is php that does:

 if ( !$db->isGlobal($id_css)){ $data['id_poll'] = $id_poll; $data['id_css'] = $id_css; $data['css'] = $css; $db->applyCssChanges($data); } else{ echo 'invalid'; } 

Answer 2

You have two obvious options that I can think of:

• Your returned text should appear in the data parameter provided by your success callback function, but you probably also need to make sure that it is in a format compatible with the MIME Content-Type returned by your PHP or jQuery may complain that it cannot disassemble, or:

• Send a 5xx Failure message from your PHP using the header() function if the deletion does not work. Then this should call the AJAX error callback that you will need to provide.

Answer 3

From delete.php, return whether the deletion succeeded or not. In success, even check this data and process it accordingly.

NTN.