Как дождаться ответа пользователя на отправку Meteor AutoForm?

Я использую Meteor и Aldeed Autoform. Я хочу убедиться, что пользователь уверен, прежде чем произойдет отправка. Я пробовал много вещей, но когда я нажимаю кнопку, форма все равно отправляется. Вот то, что у меня есть сейчас, которое красиво создает модальное окно (с SweetAlert), даже несмотря на то, что отправка все равно происходит в фоновом режиме:

AutoForm.hooks({
    createEventForm: {
        before: function() {
            this.event.preventDefault();
        },
        beginSubmit: function() {
            this.event.preventDefault();
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this imaginary file!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true },
                function(){
                swal("Deleted!", "Your imaginary file has been deleted.", "success"); });
        },

Как я могу заставить форму ждать, пока пользователь подтвердит или отменит операцию?

Спасибо!


javascript meteor sweetalert meteor-autoform
person KindOfGuy    schedule 30.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

beginSubmit вызывается в начале отправки формы. Как указано в документации, его можно использовать для отключения/включения кнопок или отображения сообщения об ожидании. при отправке более длинных запросов. Если вы хотите отобразить подтверждающее сообщение и отправить форму в зависимости от решения пользователя, вам нужно использовать хук before.

Например:

AutoForm.hooks({
  createEventForm: hooksObject
});

var hooksObject = {
  before: {
    insert: function(doc) {
      var self = this;
      swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: true
      }, function(isConfirm) {
        if (isConfirm) {
          /* Submit form: */
          self.result(doc);
          swal("Deleted!", "Your imaginary file has been deleted.", "success");
        } else {
          /* Async cancel form submission: */
          self.result(false);
        }
      });
    }
  }
}
person Matthias A. Eckhart    schedule 30.03.2016
comment
Это работает без this.result(false);. Что вы ожидаете от этого? - person KindOfGuy; 30.03.2016
comment
@KindOfGuy Это отменит отправку формы. Прочитав документацию, я заметил, что вы можете реагировать на ответы пользователей. Пожалуйста, проверьте код в моем обновленном ответе. - person Matthias A. Eckhart; 30.03.2016
comment
Это отменяет отправку формы и делает форму непригодной для использования, если пользователь нажимает кнопку «Отмена» (кнопка не отображается), например. если они хотят отредактировать свою запись. Пользователь должен обновить, чтобы использовать на этом этапе. Любые идеи? - person KindOfGuy; 30.03.2016
comment
@KindOfGuy Странно. Вы можете попробовать позвонить AutoForm.resetForm(formId); при отмене отправки формы. Если вы предоставите репозиторий, я посмотрю. - person Matthias A. Eckhart; 30.03.2016
comment
Это тоже не работает, и this.resetForm();. Ни на клиенте, ни на сервере ошибок нет. У меня нет репо, которым я могу поделиться в данный момент :( Есть другие идеи? - person KindOfGuy; 30.03.2016
comment
кстати, откуда isConfirm? - person KindOfGuy; 30.03.2016
comment
@KindOfGuy Без репозитория мне будет сложно воспроизвести проблему. Однако я обновил свой ответ. Не могли бы вы протестировать код? - person Matthias A. Eckhart; 30.03.2016
comment
@KindOfGuy Согласно документации SweetAlert, вы можете передать параметр и проверить, как пользователь отреагировал на подтверждение. . - person Matthias A. Eckhart; 30.03.2016
comment
Благодарю вас! Это было немного сложно или это только у меня?! В чем хитрость с использованием var self = this;? - person KindOfGuy; 31.03.2016
comment
Давайте продолжим это обсуждение в чате. - person KindOfGuy; 31.03.2016
comment
@KindOfGuy Добро пожаловать! Ну, если честно, я думаю, что мое первое предложение сработало. Вероятно, вы не заметили, что я использовал стрелочные функции ES6, чтобы лексически связать значение this. Вот почему я позже изменился на var self = this;. - person Matthias A. Eckhart; 31.03.2016