Sweet alert JS cannot get input variable

Question

I'm using Sweet alert JS to prompt windows for obtaining some input variables. I'm trying to use those variables out of the function and they are set as NULL, but when I use them inside the function they are set correctly. I read some about callback functions but I'm not understanding them.

This is the code:

function change_meeting(event_id) {
    $('#event_change_data > p:nth-child(1)').empty();
    $('#event_change_data > p:nth-child(2)').empty();
    swal({
        title: "Change meeting date!",
        confirm: true,
        dangerMode: true,
    })
        .then(function(value) {
            swal({
                content: "input",
                title: "Insert date",
                text: "Day / Month / Year (dd/mm/yyyy)",
                confirm: true,
                dangerMode: true,
            })
                .then(function(value) {
                    $('#event_change_data > p:nth-child(1)').text(value);
                    //NOT NULL DATA
                    swal({
                        content: "input",
                        title: "Insert hour",
                        text: "Hour : Minutes (hh:mm)",
                        confirm: true,
                        dangerMode: true,
                    })
                        .then(function(value) {
                            $('#event_change_data > p:nth-child(2)').text(value);
                            //NOT NULL DATA
                        });
                });
        });
    var date = $('#event_change_data > p:nth-child(1)').text();
    var hour = $('#event_change_data > p:nth-child(2)').text();
    //NULL DATA
}

When the data is setted it's asigned correctly in the HTML tags, but when I'm trying to get them they are as NULL. Anyone can explain me why I'm not getting correctly those variables? It is possible with an example. Thanks for reading!

Answer 1

Welcome to the world of Promises.

Swal function that you have implemented is using something called Promise.

Its context is similar to our English language's promise.

So when you are calling the Swal function Javascript it promising you to return with either good news or bad news. (You can learn about Promises here: https://codeburst.io/javascript-promises-explained-with-simple-real-life-analogies-dd6908092138 )

So .then is something that will execute when Javascript has Good news for you ie. Success case. .cath will execute when you have Bad news ie. Failure case.

Now when Swal is called your actual execution hasn't stopped. That is still working. Hence immediately after Swal the next lines

var date = $('#event_change_data > p:nth-child(1)').text();
var hour = $('#event_change_data > p:nth-child(2)').text();

are executed while still waiting for the news to arrive. Ie. there is no content assigned to the elements hence you get Null.

Think of it like you are a manager and you want to see a report of today's attendance. You ask your assistant to get it from a developer. When your assistant is on another floor trying to connect with the developers will you be able to see the reports in the file? No. But you will get the response from the assistant after he returns either with or without reports.

Answer 2

That is because you read the text from the p element before it was set.

function change_meeting(event_id) {
$('#event_change_data > p:nth-child(1)').empty();
$('#event_change_data > p:nth-child(2)').empty();
swal({
    title: "Change meeting date!",
    confirm: true,
    dangerMode: true,
})
    .then(function(value) {
        swal({
            content: "input",
            title: "Insert date",
            text: "Day / Month / Year (dd/mm/yyyy)",
            confirm: true,
            dangerMode: true,
        })
            .then(function(value) {
                $('#event_change_data > p:nth-child(1)').text(value);
                swal({
                    content: "input",
                    title: "Insert hour",
                    text: "Hour : Minutes (hh:mm)",
                    confirm: true,
                    dangerMode: true,
                })
                    .then(function(value) {
                        $('#event_change_data > p:nth-child(2)').text(value);
                        //NOT NULL DATA
                    })
              .then(() => {
                // THIS SHOULD BE NOT NULL
                var date = $('#event_change_data > p:nth-child(1)').text();
                var hour = $('#event_change_data > p:nth-child(2)').text();
                // DO THE STUFF YOU WANT TO DO WITH DATE AND HOUR
              });
            });
    }); 

}