ansaurus

Question

To build a `Delete` -button efficiently with JavaScript / PHP

Answer 1

+1 A:

It all depends on how your application is built, what happens at Stack Overflow is that the delete link click is caught by JavaScript and an Ajax request is being made to delete the post.

You can use a JavaScript library to easily catch clicks on all elements that match your selector rule(s).

Then you can use Ajax to send a request to the PHP script to do the SQL work.

On a side note, ideally you would not use GET for deleting entries, but rather POST, but that's another story.

code_burgar 2009-08-21 18:10:17

Answer 2

+1 A:

You're quite correct that absent an href="..." attribute, the link would not work without JavaScript.

Generally, what that JavaScript does is use AJAX to contact the server: that's Asynchronous JavaScript and XML. It contacts a server, just as you would by visiting a page directly, but does so in the background, without changing what page the browser is showing.

That server-side page can then do whatever processing you require. In either case, it's PHP doing the work, not JavaScript.

The primary difference when talking about efficiency is that in a traditional model, where you POST a form to a PHP page, after finishing the request you must render an entire page as the "result," complete with the <head>, and with all the visible page content.

However, when you're doing a background request with AJAX, the visitor never sees the result. In fact, it's usually not even a human-readable result. In this model, you only need to transfer the new information that JavaScript can use to change the page.

This is why AJAX is usually seen as being "more efficient" than the traditional model: less data needs to travel back and forth, and the browser (typically) needs to do less work in order to show the data as part of the page. In your "delete" example, the only communication is "delete=777" and then perhaps "success=true" (to simplify only slightly) — a tiny amount of information to communicate for such a big effect!

VoteyDisciple 2009-08-21 18:15:01

Answer 3

+5 A:

Bind a click event on the anchor which start with "delete_post_" and use that to start an Ajax request.

$("a[id^='delete_post_']").click(function(e){
  e.preventDefault(); // to prevent the browser from following the link when clicked
  var id = parseInt($(this).attr("id").replace("delete_post_", ""));

  // this executes delete.php?questionID=5342, when id contains 5342
  $.post("delete.php", { questionID: id },
    function(data){
      alert("Output of the delete.php page: " + data);
    });

});

//UPDATE With the above $.post(), JavaScript code calls a page like delete.php?id=3425 in the background. If delete.php contains any output it will be available to you in the data variable.

This is using jQuery. Read all about it at http://docs.jquery.com/How_jQuery_Works.

Fabian 2009-08-21 18:18:09

**Could you please give an example of your Ajax code.** I am new in this area.

Masi 2009-08-21 20:23:36

Sure, updated my answer.

Fabian 2009-08-21 20:46:50

I found this example http://stackoverflow.com/questions/1141793/jquery-ajax-remove-rows-from-table-and-in-db/1141891#1141891 I am not sure whether it is what you mean.

Masi 2009-08-21 20:50:27

It transfers the data about the question going to be removed in `href of the element *a*`. **Where do you transfer the question_id?**

Masi 2009-08-21 20:54:49

Yes thats it exactly. The only difference is that that one uses the href attribute to store the id instead of the id attribute.PS. added a line of code which i forgot.

Fabian 2009-08-21 20:59:02

Update my answer to make it a bit more clear.

Fabian 2009-08-21 21:04:22

id in this `{ questionID: id },` seems to be pseudo-code

Masi 2009-08-22 03:20:49

It should like be jQuery(this).attr('question_id')

Masi 2009-08-22 03:21:21

`data` seems to be also pseudo-code. **Which kind of data does your function takes in?** -

Masi 2009-08-22 03:23:06

No its not pseudo code, its the name of the post parameter that gets passed to delete.php.Data is the return value of delete.php IF it outputs anything.

Fabian 2009-08-22 09:55:01

Answer 4

+6 A:

Your method is not safe as a user agent could inadvertently crawl the link and delete the post without user intervention. Googlebot might do that, for instance, or the user's browser might pre-fetch pages to speed up response time.

From RFC 2616: Hypertext Transfer Protocol -- HTTP/1.1

9.1.1 Safe Methods

Implementors should be aware that the software represents the user in their interactions over the Internet, and should be careful to allow the user to be aware of any actions they might take which may have an unexpected significance to themselves or others.

In particular, the convention has been established that the GET and HEAD methods SHOULD NOT have the significance of taking an action other than retrieval. These methods ought to be considered "safe". This allows user agents to represent other methods, such as POST, PUT and DELETE, in a special way, so that the user is made aware of the fact that a possibly unsafe action is being requested.

Naturally, it is not possible to ensure that the server does not generate side-effects as a result of performing a GET request; in fact, some dynamic resources consider that a feature. The important distinction here is that the user did not request the side-effects, so therefore cannot be held accountable for them.

The right way to do this is to either submit a form via POST using a button, or use JavaScript to do the deletion. The JavaScript could submit a hidden form, causing the entire page to be reloaded, or it could use Ajax to do the deletion without reloading the page. Either way, the important point is to avoid having bare links in your page that might inadvertantly be triggered by an unaware user agent.

John Kugelman 2009-08-21 18:18:39

Answer 5

+1 A:

The url you are looking for is in the js code. Personally I would have an id that identifies each <a> tag with a specific post, comment... or whatever, and then have a class="delete_something" on each one, this then posts to the correct place using javascript.

Like so:

<a href="#" class="delete_post" id="post_111" title="Delete Post">Delete</a>

<script type="text/javascript">
jQuery('a.delete_post').live('click', function(){

    jQuery.post('delete.php', {id: jQuery(this).attr('id')}, function(data){
        //do something with the data returned
    })
});
</script>

SeanJA 2009-08-21 20:52:54

I like how even though mine has the least points it is the accepted answer. Fun.

SeanJA 2009-08-27 22:59:13

ansaurus

tags:

views:

answers:

To build a `Delete` -button efficiently with JavaScript / PHP

1 My code

2 Stack Overflow's code

9.1.1 Safe Methods

related questions