ajaxComplete not firing

Question

I have this problem where not all of my ajaxComplete calls are getting fired.

My Code

$(document)
.ajaxStart(function () {
    $.blockUI();
 })
.ajaxComplete(function () {
    $.unblockUI();
 });

Here's the code where ajaxComplete didn't fire :

$('body').on('click', '.actTimeSheetApprove', function () {
    var node = $(this).parents('tr');

    $.ajax({
        url: '/TimeSheet/Approve/',
        type: 'POST',
        context: this,
        data: {
            __RequestVerificationToken: fnGetToken(),
            id: $(this).data('id')
        },
        success: function (data) {
            if (data == 'success') {
                var table = $('#tblTimeSheetApprove').DataTable();
                table.row(node).remove().draw();
                console.log('SUCCESS'); //I already made sure this is called
            }
        }
    })
})

Note that I already make sure SUCCESS log is called.

Any idea why?

UPDATE :

Here's my controller

[HttpPost]
[ValidateAntiForgeryToken]
[ClaimAuthorize("Role", "Manager")]
public ActionResult Approve(int id)
{
    _uow.TimeSheet.Approve(id, User.Identity.Name);
    _uow.Save();
    return Content("success");
}

And here's my console log :

Any js error in console: `var node = $(this).parents('tr');` i feel this should have some issue. — Jai, Oct 05 '15 at 07:05
Check in your Dev Tools (F12) Console Tab, if there's any JS error (or) in your Network Tab if your POST call actually succeeded. — Arkantos, Oct 05 '15 at 07:08
no, there is no error. Everything is working fine like I said 'SUCCESS' log is showing in my console. — tickwave, Oct 05 '15 at 07:13
Oops ! Looks like I misunderstood your question :) Your issue is that `ajaxComplete` is not invoked even though you registered on document. One quick question, are you registering this `ajaxComplete` before your `.actTimeSheetApprove`'s click handler in code ? — Arkantos, Oct 05 '15 at 07:19
does your `$.blockUI();` is getting invoked on start of your Ajax call? — vijayP, Oct 05 '15 at 07:21
@vijayP: Yes, `$.blockUI();` is called but `$.unblockUI()` isn't — tickwave, Oct 05 '15 at 07:22
could you please add some `console.log` inside `ajaxComplete` before ` $.unblockUI();` — vijayP, Oct 05 '15 at 07:26
okay so I found the problem, it is working if I remove `table.row(node).remove().draw();`. So it probably have something to do with `datatables` plugin. — tickwave, Oct 05 '15 at 07:36

davesnx · Answer 1 · 2015-10-05T07:10:02.487

-1

I guess that you have incorrect the "syntax" in the $.ajax call, you miss the complete...

success !== complete

https://api.jquery.com/Ajax_Events/

With ajaxStart you can use load or ajaxSetup for make the request and define the behaviour of the success/error methods;

Also for debug, try to ajaxStop() and see if everything works well.

edited Oct 05 '15 at 07:10

answered Oct 05 '15 at 07:08

davesnx

374
3
16

yes, It's a way of doing it. Probably it's old? @Jai – davesnx Oct 05 '15 at 07:11
Its use is not recommended. – Jai Oct 05 '15 at 07:12
1

sorry but I don't get it, what do you mean by `success !== complete`? The success function works fine, it's just that my ajaxComplete is not firing. – tickwave Oct 05 '15 at 07:14
I mean, if you change the success for the complete: ```$.ajax({ url: '/TimeSheet/Approve/', type: 'POST', context: this, data: { __RequestVerificationToken: fnGetToken(), id: $(this).data('id') }, success: function (data) { if (data == 'success') { var table = $('#tblTimeSheetApprove').DataTable(); table.row(node).remove().draw(); console.log('SUCCESS'); //I already made sure this is called } } })``` – davesnx Oct 05 '15 at 08:51

score -1 · Answer 2 · edited May 23 '17 at 11:58

Check the done, fail and always callbacks below.

  $.ajax({
    url: 'Your Url',
    data: JSON.stringify(Parameter list),
    type: 'POST',
    contentType: 'application/json, charset=utf-8',
    dataType: 'json',
    beforeSend: function (xhr, opts) {
    }
}).done(function (data) {
    debugger;
}).fail(function (data) {
    debugger;
}).always(function(data) { 
    alert("complete"); 
});

.ajax().always(function(a, textStatus, b){});

Replaces method .complete() which was deprecated in jQuery 1.8. In response to successful transaction, arguments are same as .done() (ie. a = data, b = jqXHR) and for failed transactions the arguments are same as .fail() (ie. a = jqXHR, b = errorThrown). This is an alternative construct for the complete callback function above. Refer to deferred.always() for implementation details.

please check this link : firing in Ajax call

ajaxComplete not firing

2 Answers2