Why MVC Sweet Alert will Auto Close?

Question

Below are my coding. Please advise why the sweet alert only pop up not up to 1 second then auto Redirect to another page.

From HTML:

$.ajax({
  url: "/ABC/AddST/",
  data: {
    "username": $("#username").val(),
    "fullname": $("#fullname").val()
  },
  type: "POST"
}).success(function(data) {
  swal({
    title: "Done!",
    text: "Sales Team was successfully added!",
    type: "success"
  }, function() {
    window.location.href = '/ABC/STList';
  });
}).error(function(data) {
  swal("Oops", "We couldn't connect to the server!", "error");
});

From Controller:

[HttpPost]
public ActionResult AddSalesTeam(string username, string fullname)
{
    var st = new Sales();

    if (ModelState.IsValid)
    {
        st.Username = username;
        st.FullName = fullname;
        db.User.Add(st);
        db.SaveChanges();
        return RedirectToAction("SalesTeamList");
    }
    return View();
}

score 1 · Answer 1 · answered Jul 08 '16 at 16:54

1

You need to give it a timer.

swal({
  title: "Done!",
  text: "Sales Team was successfully added!",
  type: "success",
  timer: 1000, // Wait 1 second
  showConfirmButton: false // No reason to show the button
}, function() {
  window.location.href = '/ABC/STList';
});

answered Jul 08 '16 at 16:54

Mike Cluck

31,869
13
80
91

Why showConfirmButton should be false? I tried to put in timer but no showConfirmButton, it return the same result for me. But if i put in both, it can work – Tss Jul 08 '16 at 17:01
@Yuan [It works either way.](https://jsfiddle.net/r6ucewha/) It just doesn't make much sense to have a confirmation button when the page is being redirected. – Mike Cluck Jul 08 '16 at 17:08
How about I need the confirm button? – Tss Jul 08 '16 at 17:12
@Yuan If you need it, then don't set `showConfirmButton` to `false` just like I show in the code I linked to. It's that easy. – Mike Cluck Jul 08 '16 at 17:13
@Yuan Is this code not working for you? Because I guarantee it does what you've asked. – Mike Cluck Jul 08 '16 at 17:16
I set timer: 5000, it appeared only up to 2 seconds – Tss Jul 08 '16 at 17:56
@Yuan Then you're closing it somewhere else. – Mike Cluck Jul 08 '16 at 18:56

sebaferreras · Answer 2 · 2016-07-08T17:26:25.837

1

As far as I understand from the question, you want to show the alert, and then when the user click in the confirm button, then redirect to the /ABC/STList page, (instead of redirecting the user automatically), right? If so. have you tried with this?:

swal({
  title: "Done!",
  text: "Sales Team was successfully added!",
  type: "success",
  showCancelButton: false,
  confirmButtonText: "Ok",   
  closeOnConfirm: false
}, function() {
  window.location.href = '/ABC/STList';
});

========================

EDIT: If you want, you can remove the closeOnConfirm: false line and the popup will be closed after clicking the ok button (but you will be still redirected). Is just because is better for the End User to see that the popup is closed after clicking the button.

edited Jul 08 '16 at 17:26

answered Jul 08 '16 at 17:08

sebaferreras

44,206
11
116
134

ya, you get what I mean. but I tried your code, the result still the same – Tss Jul 08 '16 at 17:15
Please try it [here](https://jsfiddle.net/r6ucewha/2/). It will redirect you just if you click in the _ok_ button. – sebaferreras Jul 08 '16 at 17:17

score 0 · Answer 3 · answered Jul 09 '16 at 11:52

Adding e.preventDefault() before and after $ajax function will do.

e.preventDefault();  
$.ajax({
  url: "/ABC/AddST/",
  data: {
    "username": $("#username").val(),
    "fullname": $("#fullname").val()
  },
  type: "POST"
}).success(function(data) {
  swal({
    title: "Done!",
    text: "Sales Team was successfully added!",
    type: "success"
  }, function() {
    window.location.href = '/ABC/STList';
  });
}).error(function(data) {
  swal("Oops", "We couldn't connect to the server!", "error");
});
e.preventDefault();

Why MVC Sweet Alert will Auto Close?

3 Answers3