JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<p>I need the dialog to appear and the callback to run when the save button is clicked,  its currently running before the dialog is loaded</p>
<div id="jqDialog"></div>

JavaScript

showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer);

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