jQuery ajax success function inside success function?

Question

I am trying to call an ajax function inside the success function of a function. This is my code:

success: function () {
    jQuery.ajax({
        type: "POST",
        url: "script.php?subtype=3",
        data: "page=1",
        beforeSend: function () {
            jQuery(".data").animate({opacity: 0.2}, 150);
            jQuery(".outer-data").css({'background': 'url("ajax-loader.gif") no-repeat scroll 50% 50%'});
        },
        success: function (msg) {
            jQuery("#container_cat").ajaxComplete(function (event, request, settings) {
                jQuery(".outer-data").css({'background': 'none'});
                jQuery("#container_cat").html(msg);
            });
        }
        // ...
    });
}

Even though I get the response in Firebug console from

jQuery("#container_cat").html(msg);

I don't get any output in the document.

What am I missing here?

Answer 1

success: function () {
    jQuery.ajax({
        type: "POST",
        url: "script.php?subtype=3",
        data: "page=1",
        beforeSend: function () {
            jQuery(".data").animate({opacity: 0.2}, 150);
            jQuery(".outer-data").css({'background': 'url("ajax-loader.gif") no-repeat scroll 50% 50%'});
        },
        success: function (msg) {
            jQuery(".outer-data").css({'background': 'none'});
            jQuery("#container_cat").html(msg);
        }
        // ...
    });
}

Answer 2

Seems like the problem is that you are calling the ajaxComplete() function inside the success function. You dont need to use ajaxComplete inside success function as success function will only be executed when the ajax request is completed and succeeded. So theres no sense of using ajaxComplete inside it. For reference : ajaxComplete docs You can use ajaxComplete before success function.