Dynamic jQuery UI dialog callback function problems

Question

I am having issues using the jQuery UI dialog modal, and trying to pass in a dynamic name/value to be used as the callback function to execute (as well as arguments)

I have a function that calls the UI dialog.... as accepts a list of arguments, one of them being the callback function name.. and any arguments to accompany it.

I can NOT get jQuery to recognize the dynamic name/parms to be seen as a function.

function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, argList){
var btn1css;
var btn2css;

//hide buttons if not in use
if(btn1text == ''){
    btn1css = "hidecss";
}else{
    btn1css = "showcss";
}

if(btn2text == ''){
    btn2css = "hidecss";
}else{
    btn2css = "showcss";
}

//main message/content
$("#lblMessage").html(content);


//params
$("#dialog").dialog({
    resizable: false,
    title: title,
    modal: true,
    width: '400px',
    height: 'auto',
    bgiframe: false,
    //hide: {effect: 'scale', duration: 100},
    
    buttons: [
        {
            text: btn1text,
            "class": btn1css,
            click: function () {
                //alert("button 1 pressed");
                
                //new dialog when cup is in position
                console.log('Call Back Check: ' + callbackFunction);
                console.log("Arg List: " + argList);
                eval(callbackFunction + '()'); // executes, but cant get any params?
                eval(callbackFunction + '(' +argList +')'); //doesnt work
                //callbackFunction(argList); // doesnt work


                //functionTest = window[callbackFunction];
                //functionTest(argList);
                
                //Goal: call new ShowDialogBox with different callback function name
                //ShowDialogBox('', 'Press start when the cup is in the holder.', 'Start', '', 'submitFunction',null);
                
                $("#dialog").dialog('close');
                
            }
        },
        {
            text: btn2text,
            "class": btn2css,
            click: function () {
                //alert("button 2 pressed");
                $("#dialog").dialog('close');
            }
        }
    ]
});

}

callbackFunction - the name of the callback function to be called (ShowDialogBox) argList - the list of params/arguments to accompany said callback function

Here is how it is being called (with a callback function name of: ShowDialogBox again [but with different callback function this time])

ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', 'ShowDialogBox','mutiple ags go here, as commana string? array?');

My questions:

1.) How can I pass: ShowDialogBox as a callbackFunction argument/value, and have it be seen as an actual function that executes after button #1 is clicked?

2.) How can I also pass in a list of arguments to this 'dynamically' named callback array?

Update: so I can execute the dynamic function (so to speak).. but I cant seems to pass in any params?

Update 2: Now that spread syntax was pointed out to me.. things are working for MY needs.. but I have a question about expanding it I guess?

• trimmed down for posting, no params, no button actions..etc

   function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, ...argList){ //if not empty....execute it as a function. (nice) if(callbackFunction.= ''){ // Execute the callback (spread syntax) callbackFunction(.;.argList); } }

Works: (because my last nested callbackFunction DOES NOT HAVE ANY arguments to pass)

//double verify (dialog prompts)
ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', ShowDialogBox, '', 'Please place drink in holder and press start when ready.', 'Start', '', submitForm, '');

This doesnt work though.. as there is an additional nested callBackFunction name passed.. AND arguments? (but since everything past the fist callBackFunction arguments are now "...argList".. I dont how that is accessed? (if at all possible))

ShowDialogBox('','Are you sure you want to order: <br>' + currentSelection, 'Continue','No', callBackTest, 'Some Title', 'Some Message', 'Button 1 text', 'Button 2 text', someOtherCallBackFunction, 'no', 'args allowed', 'in nested callback function? how is it done (again?)');

Answer 1

For the first problem, just don't quote the callback function name.

ShowDialogBox('', text , 'Continue','No', submitForm);

function submitForm() { /* ... */ }

To pass a dynamic number of parameters to it, use spread syntax , that will create an array containing all remaining parameters passed to the function and back to individual arguments.

function ShowDialogBox(title, content, btn1text, btn2text, callbackFunction, ...argList) {
    // Execute the callback
    callbackFunction(...argList);
}