jquery will not submit ajax post requests

Question

hi all,

Im having a a few javascript gremlins, for some reason my jquery ajax post request is not going out at all. All of my code 'looks' ok, but javascript is not my strong point, can anybody see where im going wrong?

$(".deleteWeek").click(function(e){
                var answer = confirm("This will delete the selected week. Are you sure?");
                if(answer){
                    $.ajax({
                        type: 'POST',
                        url: 'http://localhost/todo/index.php/home/ajax_delete',
                        data: { page_id : $(this).attr('id') },
                        success: tableRedraw(data),
                        dataType: 'html'
                    })
                }
                e.preventDefault();
              })

and if it helps, my tableRedraw function:

function tableRedraw(data){
                $('.week').remove(),
                $('thead').after(data) 
            }

my click event is definitely being registered, i can put alerts in handler and they come up alright, but as far as firebug is concerned, there is nothing happening on the ajax side. Any help would be hugely appreciated.

Answer 1

Your success handler needs to be an anonymous function or a reference to a function.

So you should do something like this:

$.ajax({
    type: 'POST',
    url: 'http://localhost/todo/index.php/home/ajax_delete',
    data: { page_id : $(this).attr('id') },
    success: tableRedraw,
    dataType: 'html'
});

or

$.ajax({
    type: 'POST',
    url: 'http://localhost/todo/index.php/home/ajax_delete',
    data: { page_id : $(this).attr('id') },
    success: function(data) {
        $('.week').remove(),
        $('thead').after(data) 
    },
    dataType: 'html'
});

This is because the success attribute represents a callback. The way you have it right now, the tableRedraw function gets immediately executed, and the result is assigned to success. This is not what you want. What you need is a reference to a function (it can be a named function or an anonymous function). That way, when the AJAX request completes successfully, the function is called (hence, callback).

You can think of the success attribute as holding a pointer to a function. Meaning, the entire function itself is being passed around like an object (and basically it is an object because functions in Javascript are first-class).

You need to use a callback in situations where the operation is asynchronous. That is, you don't know when the operation will complete. So basically you tell the operation "Here, take this function and execute it when you are done. Until then I'll go do something else". This approach is typical when dealing with events (which are asynchronous).

Answer 2

Are you sure it isn't hitting the server or just the callback isn't executing?...

Your success callback should be success: tableRedraw,, jQuery will call the function with the return data as the param upon a successful callback. As it is written now, the tableRedraw function is being executed along with the $.ajax() call and the callback is not valid.

IE:

$(".deleteWeek").click(function(e){
    var answer = confirm("This will delete the selected week. Are you sure?");
    if(answer){
        $.ajax({
            type: 'POST',
            url: 'http://localhost/todo/index.php/home/ajax_delete',
            data: { page_id : $(this).attr('id') },
            success: tableRedraw,
            dataType: 'html'
        })
    }
    e.preventDefault();
})

Answer 3

try

success: tableRedraw,

or

success: function(data) {
  $('.week').remove();
  $('thead').after(data);
},

good luck!