ajax jquery message show after the function completed

Question

I think it is simple question. I've tried to search but still not found an answer yet.

 deleteComment: function (commentJson, success, error) {
            $.ajax({
                type: "POST",
                async: false,
                url: deleteCommentConfig.url,
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ commentId: commentJson.CommentId }),
                dataType: "json",
                success: function (result) {
                    if (result.d) {
                        success();
                    }
                    messageBox(result.d);
                },
                error: error
            });
        },

var messageBox = function (hasDeleted) {
    if (hasDeleted) {
        alert("Deleted successfully");
    } else {
        alert("Error");
    }
}

I want to show message after success() performed.

That means the comment left already then show message. Thanks anyway!

P/s: I read a topic about jQuery Callback Functions at https://www.w3schools.com/jquery/jquery_callback.asp . Can we use it in here? If we can, how to use?

Answer 1

You can try like this

deleteComment: function (commentJson, success, error) {
        $.ajax({
            type: "POST",
            async: false,
            url: deleteCommentConfig.url,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ commentId: commentJson.CommentId }),
            dataType: "json",
            success: function (result) {
                if (result.d) {
                    success();
                }
               $.when(this).then(setTimeout(function(){ messageBox(result.d)}, 200));
              // if you dont want use set timeout then use
              // $.when(this).then(messageBox(result.d), 200));
            },
            error: error
        });
    },

var messageBox = function (hasDeleted) {
if (hasDeleted) {
    alert("Deleted successfully");
} else {
    alert("Error");
}
 }

Provides a way to execute callback functions based on zero or more Thenable objects, usually Deferred objects that represent asynchronous events.

Answer 2

Considering your implementation of var success = function() you may try with following approach:

Modify the success() to accept callback function as follows:

var success = function(callback) { 
    self.removeComment(commentId); 
    if(parentId) 
        self.reRenderCommentActionBar(parentId); 

    if(typeof callback == "function")
        callback();
};

var messageBox = function (hasDeleted) {
    if (hasDeleted) {
        alert("Deleted successfully");
    } else {
        alert("Error");
    }
}

deleteComment: function (commentJson, success, error) {
            $.ajax({
                type: "POST",
                async: false,
                url: deleteCommentConfig.url,
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ commentId: commentJson.CommentId }),
                dataType: "json",
                success: function (result) {
                    if (result.d) {
                        //passing the callback function to success function
                        success(function(){
                            messageBox(result.d);
                        });
                    }

                },
                error: error
            });
        },