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);
}