Question

I’d like to mimic html form behaviour using jquery. When clicking on a button, I want to delete a comment using:

$(".delete_comment").live('click', function() {
    var btn = $(this);
    var param_delete_comment = btn.attr("href");
    $.ajax({
        url: '/you/ajax_delete_comment/'+param_delete_comment,
        type: 'POST',
        async: false

    })
    return false;
});

The server side processing seems to work (it deletes the comments and return the comment bit of the html), but the comment bit is not reloaded.

The only difference I can see compared to a html form is that the latter has

Content-Type application/x-www-form-urlencoded; charset=UTF-8

in the request headers.

Anybody can help?

Thank you

Jul

Answer 1

You say that the AJAX call correctly returns the HTML you need, but you don’t do anythign with it. Use the success callback:

$(".delete_comment").live('click', function() {
    var btn = $(this);
    var param_delete_comment = btn.attr("href");
    $.ajax({
        url: '/you/ajax_delete_comment/'+param_delete_comment,
        type: 'POST',
        async: false, // NB: this is usually a bad idea.
        success: function(data) {
            // data is the HTML returned by ajax_delete_comment; use it, e.g.:
            $('#comment').replaceWith(data);
        }
    })
    return false;
});