带有确认的jQuery UI对话框

Question

I have a jQuery UI dialog that gets a line of text. If this text is not contained in a localStorage dictionary, I insert it into the dictionary. If it is present, I want to give the user the option not to overwrite the existing entry in the "ok" handler.

Because jQuery UI dialogs are stateful and persist across multiple calls unless explicitly removed (AFAICT), I'm not seeing a clear path to presenting the "are you sure you want to nuke your previous entry?" alert without resorting to ... uh ... alert.

The question, succinctly stated: Can you create a confirmation box from inside a jQuery UI Dialog?

Thanks.

Answer 1

我没有使用jQuery UI对话框，但是您始终可以创建自己的html元素，并可以对它们进行任何操作，包括在jQuery对话框的顶部进行分层。

Answer 2

I guess you could have googled something to find these links:

Anyways have it and make fun:

1. JQuery Dialogs
2. Jquery Confirmation

Cheers!!!

Answer 3

Ok, it turned out the best way I found to handle this was using closures. Like this (pseudo-code):

getThingieName: handler(function() {
  var $dialog;
  $dialog = $('<div id="thingie-name-dialog" class="ui-widget"></div>').html("<p>Enter a name for this thingie</p>\n<input type=\"text\" id=\"dlg-thingie-name\" style=\"width: 80%\" />").dialog({
    autoOpen: false
  }, {
    title: 'enter a name',
    modal: true,
    buttons: {
      Add: function() {
        var value = $('#dlg-thingie-name').val();
        $(this).dialog('close');
        $('#thingie-name-dialog').remove();
        return handler(value);                  // <= closure to handle the onAdd
      },
      Cancel: function() {
        $(this).dialog('close');
        return $('#thingie-name-dialog').remove();
      }
    }
  });
  return $dialog.dialog('open');
}),

getConfirmation: function(message, handler) {
  var $dialog;
  $dialog = $('<div id="confirmation-dialog" class="ui-widget"></div>').html("<p>" + message + "</p>").dialog({
    autoOpen: false
  }, {
    title: 'confirm overwrite',
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog('close');
        $('#confirmatio-dialog').remove();
        return handler(true);               // <= closure to handle onOk
      },
      Cancel: function() {
        $(this).dialog('close');
        $('#Thingie-name-dialog').remove();
        return handler(false);              // <= closure to handle onCancel
      }
    }
  });
  return $dialog.dialog('open');
}

// Calling sequence
Snippets.getSnippetName(function(value) {
  if (value == null) return false;
  if (localStorage.getItem(value)) {
    getConfirmation("This thingie, " + value + ", already exists. Overwrite?", function(response) {
      if (response) return localStorage.setItem(value, snippet);
    });
  } else {
    localStorage.setItem(value, snippet);
  }
}

This may not be the optimal code, but it does make the triggering of the dialogs dependent on the button push by embedding them in the handlers.