How do I wait for an action to finish before showing the next alert using sweetalert2

Question

So I have an ASP.NET MVC Core project and when I click a button I want to display an alert using sweetalert2.

The button looks like this

<a class="btn btn-primary" onclick="doFunction(@(JsonConvert.SerializeObject(number))); ">Click</a>

And the JavaScript looks like this

function doFunction(model) {
        Swal.queue([{
            title: 'TestData',
            confirmButtonText: 'OK',
            text: 'TestData',
            showLoaderOnConfirm: true,
            preConfirm: () => {
                $.ajax({
                        type: "POST",
                        url: '@Url.Action("Tester", "Home")',
                        contentType: "application/json; charset=utf-8",
                        data: { data: "yourdata" },
                        dataType: "json",
                        //success: function(recData) { alert('Success'); },
                        //error: function() { alert('A error'); }
                }).then(Swal.insertQueueStep("Woo", "Woo"))
                    .catch(() => {
                        Swal.insertQueueStep({
                            icon: 'error',
                            title: 'Something went wrong'
                        })
                    });
            }
        }])
    }

And here is the Action

public IActionResult Tester()
        {

            using (var context = new DbContext(_context))
            {
                var user = context.Users.FirstOrDefault(x => x.UserName == "TheUser");
                return new JsonResult(user.UserName);
            }
        }

And right now it displays an alert, and when I click "OK" it shows the next alert but no loading window inbetween.

How do I properly call an action that's inside a controller and display a loading alert while it waits for the action to finish, followed by a finished alert.

Does this answer your question? [Wait until all jQuery Ajax requests are done?](https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done) — Transformer, Jan 10 '21 at 21:10

Transformer · Answer 1 · 2021-01-10T21:08:18.483

There is a DONE, Fail option in ajax, move it under there..

$.ajax({
   url: "test.html",
   context: document.body
 }).done(function() {
  $( this ).addClass( "done" );
 });

   $.ajax({  
        type: "POST",
         url: '@Url.Action("Tester", "Home")',
         contentType: "application/json; charset=utf-8",
         data: { data: "yourdata" },
         // dataType: "json", // comment this out

    // blah blah... and then the done option... below
    
    done: function(data){ 
        if (doSomeValidcheck(data)){
                Swal.insertQueueStep("Woo", "Woo"))
                // blah blah ...
            return true;
        } else {
            return false;
        }
    }
});

Looks like we need to remove the datatype json

Update:

Move the done to the end of the Ajax call like so...

$.ajax({
    type: "POST", 
    url : postUrl,
    data: data
}).done(function()  {
    alert("Success.");
})

Hm, it seems as if the done function never fires – Riley Varga Jan 10 '21 at 20:02 — Riley Varga, Jan 10 '21 at 20:02

How do I wait for an action to finish before showing the next alert using sweetalert2

1 Answers1