Popup waiting for user action in Django

Question

In my project I have to add functionality for deleting friends from users list. When clicking on 'Delete friend' link, the following view is loaded (with the friends.id sent) :

def delete_friend(request, id):
    friend = get_object_or_404(Friend, id=id)
    friend.delete()   
    return HttpResponseRedirect(reverse('user_profile',))

Now I'd like to add a popup (that appears when user clicks the deletion link) asking if user is sure to perform the operation. Where should I start and how ? I'm guessing, that using jquery I should create a popup after clicking on the link. Then probably some Ajax magic should happen. But how to handle that ? I have intermediate knowledge of jQ but I've never used ajax before, and I haven't found any useful tutorials concerning django-ajax.

UPDATE : I'm sure there are errors here, but that's what I was thinking about :
- after clicking 'Delete friend' jq opens a popup
- if on the poup 'OK' button is clicked we run a script (I think need somehow to transfer my friend's.id to this function) :

$(".friend_remove_ok").click(
    function(){ 
        // let's say id is my friend.id
        $.ajax({
            type: "GET",
        url: "/user/delete_friend/"+id+"/",
        dataType: "json",
        success: function(data){
            $("#friend_"+id).fadeOut(300, function() { $("#friend_"+_id).remove() });                       
                }
             });
        }
    );

- then it runs our delete_friend view

Is this any good, or am I completely wrong with my thinking ?

Answer 1

The main idea is that a click on the delete button triggers a javascript method opening a confirmation dialog. Once the user confirmed you can do several things:

• you can redirect the browser to the delete url (your view)
• you can use XMLHttpRequest ($.ajax in jQuery) to call the delete url then refresh the browser
• you can use XMLHttpRequest to call the delete url then use the DOM API to remove the element from the list

It is also recommended that actions modifying the model should not be done on a GET request, meaning that you should call your delete url using POST or DELETE