Question

I’m looking to create an abstracted jquery dialog function that i pass parameters into to reduce my overall js bloat. My javascript is currently full of examples such as this:

    $(".claim_issue_lb").click(function (e) {

    $(function () {

        $("#dialog-claim").dialog({
            resizable: false,
            height: 240,
            modal: true,
            buttons: {
                "Claim Issue": function () {
                    ProcessDealerAction("claim"); //function to be called upon success
                    $(this).dialog("close");
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });

    });
});

To address this, I created the following:

function LoadDialog(target, height, confirm_button, function_call) {

$(target).dialog({
    resizable: false,
    height: height,
    modal: true,
    buttons: {
        confirm_button: function () {
            function_call;
            $(this).dialog("close");
        },
        Cancel: function () {
            $(this).dialog("close");
        }
    }
});

}

With the hopes of being able to reduce my dialog calls to the following example:

$(".claim_issue_lb").click(function (e) {

    LoadDialog("#dialog-claim", 240, "Claim Issue", ProcessDealerAction("claim"));

});

It seems to be working well, except that the confirm dialog pops up and then runs itself without anyone clicking “Yes do it” or “Cancel”, and then the dialog auto closes.

I’m not certain how to address this, or if my entire approach is flawed from the ground up.

Answer 1

LoadDialog("#dialog-claim", 240, "Claim Issue", ProcessDealerAction("claim"));

Will execute ProcessDealerAction immediately. You’ll need to pass a function here, not its result.

function LoadDialog(target, height, confirm_button, function_call, function_args) {
...
LoadDialog("#dialog-claim", 240, "Claim Issue", ProcessDealerAction, ["claim"]);

or

LoadDialog("#dialog-claim", 240, "Claim Issue", (new function(){ProcessDealerAction("claim"));}))

will get you closer to where you need to be. You’ll also need to call your callback correctly.

 confirm_button: function () {
            function_call();
            $(this).dialog("close");
        },

or if you decide to pass in args separately and not need anonymous functions:

 confirm_button: function () {
            function_call.apply(this, [function_args]);
            $(this).dialog("close");
        },