sweetalert blocking like normal prompt

Question

I am using swal (http://t4t5.github.io/sweetalert) to get some data from the user when they click on something. I want to then return that from the function I am calling swal in. In other words, for the example below, I want to set the text of the items in labels to the input value. The problem is it seems to return before swal has been closed/data has been entered:

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

A normal prompt alert is blocking so this can be done, can swal do this?

Thanks

Answer 1

While you can't have Sweet Alerts block, what you can do is use its callback functionality to fire any code that needs the alert to be dismissed first. The examples have a few instances of this. For example, assuming you have a yes/no style alert, there's the file deletion example.

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

Or the AJAX example:

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

In both of these, the callback isn't fired until the alert is interacted with, and the result of the call is passed in as an argument to the callback.

So say you need to wait until someone clicks okay.

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

Note: The closeOnConfirm/closeOnCancel only needs to be false if you're displaying a subsequent alert in the callback. If it's set to true, it will close the second alert before it's displayed to the user. However, if you're doing something non-swal related, and you don't have it close, it will remain open indefinitely.

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

If you want the alert to stay open while you're doing something non-swal related, you should call swal.close() at the end of your code.

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