Question

I’m building a simple web-based text editor and am trying to implement something like a “Save changes?” dialog when the user tries to open a file and the current file has unsaved changes.

The code is something like this:

function openFile() {
    if (hasChanges === true) {
       $("#save-changes-dialog).dialog("open");
    }

    // file opening stuff goes here
}

This obviously doesn’t work, since what happens is the dialog gets opened, and then the file opening code just runs right after opening the dialog rather than waiting for the results of that dialog.

What’s the best approach to solve this problem? I have tried dynamically changing what the buttons do in the “Save Changes” dialog so that the file opening code is called by the dialog buttons themselves, but it seemed like a bit of a mess and I was also running into timing issues because of some AJAX calls.

This seems like something that would come up fairly often, but I can’t seem to find a clear cut answer on how to approach the problem. Thanks for any help!

Answer 1

File opening stuff does not go “here”. It goes into the dialog’s button handler.

When you defined the dialog:

$("#save-changes-dialog").dialog({
        resizable: false,
        modal: true,
        buttons: {
            Save: function() {
                // file opening stuff goes HERE instead!
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });