блокировка Sweetalert как обычное приглашение

Я использую swal (http://t4t5.github.io/sweetalert), чтобы получить некоторые данные из пользователя, когда они на что-то нажимают. Затем я хочу вернуть это из функции, в которой я вызываю swal. Другими словами, для приведенного ниже примера я хочу установить текст элементов в labels на входное значение. Проблема в том, что он возвращается до того, как swal был закрыт/данные были введены:

.on('dblclick', function(l) {
  labels.text(function (e) {  
     return swal({   
      title: "Edit label"
    },
      function(inputValue){  
      if(inputValue) {
        return inputValue
      }
    });
   })
});

Обычный prompt alert блокирует, так что это можно сделать, может ли swal сделать это?

Спасибо


javascript svg sweetalert blocking
person amlwwalker    schedule 06.10.2015    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Хотя у вас не может быть блока Sweet Alerts, вы можете использовать его функцию обратного вызова для запуска любого кода, который требует, чтобы предупреждение было отклонено в первую очередь. Примеры имеют несколько случаев этого. Например, если у вас есть предупреждение в стиле да/нет, есть пример удаления файла.

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!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  //The callback will only fire on cancel if the callback function accepts an
  //argument. So, if the first line were 'function () {' with no argument, clicking
  //cancel would not fire the callback.
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

Или пример AJAX:

swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("Ajax request finished!");
  }, 2000);
});

В обоих из них обратный вызов не запускается до тех пор, пока не будет выполнено взаимодействие с предупреждением, а результат вызова передается в качестве аргумента обратного вызова.

Итак, скажите, что вам нужно подождать, пока кто-нибудь не нажмет «ОК».

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  swal("Deleted account", "We'll miss you!", "success");
});

Примечание. closeOnConfirm/closeOnCancel должно быть только false, если вы отображаете последующее предупреждение в обратном вызове. Если установлено значение true, второе предупреждение будет закрыто до того, как оно будет показано пользователю. Однако, если вы делаете что-то, не связанное с swal, и оно не закрыто, оно останется открытым на неопределенный срок.

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue"
}, function () {
  console.log("This still shows!")
});

Если вы хотите, чтобы оповещение оставалось открытым, пока вы делаете что-то, не связанное с swal, вы должны вызвать swal.close() в конце своего кода.

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  console.log("This still shows!");
  setTimeout(function () {
    // This will close the alert 500ms after the callback fires.
    swal.close();
  }, 500);
});
person Brandon Anzaldi    schedule 06.10.2015
comment
Поместите все внутри обратного вызова. Я не знал, что только нативные функции могут блокироваться. Интересный. +1 за подробный ответ, хотя и скопированный из документации - person amlwwalker; 12.10.2015
comment
@amlwwalker Да. Я попытался включить в свой ответ соответствующие части документации, а также несколько пользовательских примеров ближе к концу. :) Также есть библиотека под названием wait.for, хотя я с ней не знаком, так что могу не говорите о его эффективности в вашем случае использования. - person Brandon Anzaldi; 13.10.2015

arrow_upward
1
arrow_downward

Нет, нельзя, невозможно создать блокирующий код, ожидающий ввода пользователя. Только способы — это то, что уже предоставляет JS: приглашение, предупреждение и т. д. Просто запустите нужный код из обратного вызова.

person Juan Mendes    schedule 06.10.2015