jQueryUI dialog wth dynamic buttons using callbacks

Question

I am using this question as the basis for a multipurpose jQueryUI dialog function that I can reuse in my site Question 17013222 I want to be able to reuse the code to display different buttons with callbacks defined in the function call

However, I don’t get the result I need when extending this answer to use a callback function. The callback function is running as I build the dynamic buttons instead of when the Dialog Save button is pressed.

I have a jsFiddle here that shows my incompetence jsFiddle

What do I need to do to get the callback to run as the Save button is clicked?

Below is the simplified code snippet

function showDialog(inToDisplay, inTitle, buttonSetup, inSaveCallback) {
'use strict';
var dialog_buttons = {};

$('#jqDialog').load(inToDisplay + '.asp', function () {
    $(this).attr('title', inTitle);
    /*Build our button choices*/
    if (buttonSetup === 'closeonly') {
        dialog_buttons['Close'] = function () {
            $(this).dialog("close");
            $(this).dialog("destroy");
        }
    } else if (buttonSetup === 'savecancel') {
        dialog_buttons['Save'] = function () {
            if (inSaveCallback && typeof (inSaveCallback) === "function") {
                inSaveCallback;
            };
            $(this).dialog("close");
            $(this).dialog("destroy");
        }
        dialog_buttons['Close'] = function () {
            $(this).dialog("close");
            $(this).dialog("destroy");
        }
    }

    $(this).dialog({
        autoOpen: false,
        modal: true,
        open: function (event, ui) {
        },
        buttons: dialog_buttons
    });
    $('#jqDialog').dialog('open');

});
}

function saveAnswer() {
    alert('ToDo: Save data here');
}

$(document).ready(function () {
    showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer());
});

score 1 · Accepted Answer · answered Jul 25 '13 at 08:42

here... http://jsfiddle.net/reigel/zpyNM/

change this

$(document).ready(function () {
    showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer); // remove () on saveAnswer...
});

and this

    dialog_buttons['Save'] = function () {
        if (inSaveCallback && typeof (inSaveCallback) === "function") {
            inSaveCallback(); // add -->> ()
        };
        $(this).dialog("close");
        $(this).dialog("destroy");
    }

jQueryUI dialog wth dynamic buttons using callbacks

1 Answers1