How to pass arguments in callback function in JavaScript?

edx

506 Points

24 Posts

I have following custom code for confirmation dialog as:

$.extend({
    confirm: function (title, message, yesText, yesCallback) {
        $("<div></div>").dialog({
            buttons: [{
                text: yesText,
                click: function () {
                    yesCallback();
                    $(this).remove();
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).remove();
                }
            }
            ],
            close: function (event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message).parent().addClass("alert");
    }
});

I'm trying to use it to delete a record/post as:

function DeletePost(txt, id) {
    $.confirm(
        "Confirmation!", //title
        "Are you sure want to delete this post?", //message
        "Ok", //button text
        DeletePostConfirm(id), //"yes" callback
    );
}

function DeletePostConfirm(id) {
    $.ajax({
        type: "POST",
        url: "/post/delete",
        dataType: "json",
        data: { postId: id },
        success: Delete_success
    });
}

But it's erroring showing no such function. It's working fine without id argument as:

function DeletePost(id) {
    $.confirm(
        "Confirmation!", //title
        "Are you sure want to delete this post?", //message
        "Ok", //button text
        DeletePostConfirm, //"yes" callback
    );
}

But as per requirement DeletePost method requires id to be passed so that post can be deleted from backend. How to arguments in callback function?

Views: 1949
Total Answered: 1
Total Marked As Answer: 1
Posted On: 25-Sep-2021 04:25

Share:

Answers

Rahul M...

4916 Points

27 Posts

Use either .call and .apply if you want to send a comma separated list of arguments or send in an array respectively.

I think, in your case, we can create an object of two prop and .call can be used as following:

$.extend({
    confirm: function (title, message, yesText, yesCallback, argObj) {
        $("<div></div>").dialog({
            buttons: [{
                text: yesText,
                click: function () {
                    yesCallback.call(this, argObj);
                    $(this).remove();
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).remove();
                }
            }
            ],
            close: function (event, ui) { $(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message).parent().addClass("alert");
    }
});

And use it as:

function DeletePost(txt, id) {
   var argObj = {
        "txt": txt,
        "id": id
    };
    $.confirm(
        "Confirmation!", //title
        "Are you sure want to delete this post?", //message
        "Ok", //button text
        DeletePostConfirm, //"yes" callback
        argObj
    );
}

function DeletePostConfirm(argObj) {
    $.ajax({
        type: "POST",
        url: "/post/delete",
        dataType: "json",
        data: { postId: argObj.id },
        success: Delete_success
    });
}

Posted On: 25-Sep-2021 22:33

Thank u so much.

- edx 16-Nov-2021 04:11