CODEWITHSUNDEEP
javascriptajaxsweetalert2
mjpramos
mjpramos

Reputation: 543

SweetAlert2 cancel button not clickable during ajax call

I have a function called when a dropdown item is selected, that fires a sweetalert2 popup, as:

function SwalPopup(ip, method) {
                var methodmsg = method.charAt(0).toUpperCase() + method.slice(1);
                swal.fire({
                    text: 'Are you sure you want to '+methodmsg+' ?',
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#3085d6",
                    confirmButtonText: 'Yes, '+methodmsg+'!',
                    cancelButtonColor: '#d33',
                    showCloseButton: true,
                    showLoaderOnConfirm: true,
                    preConfirm: function () {
                        return new Promise(function (resolve, reject) {
                            var ajaxCall = $.ajax({
                                    url: 'wait.php',
                                    type: 'GET',
                                    dataType: 'json',
                                    timeout: 5000
                            })

                            ajaxCall.done(function( response ){
                                resolve(response);
                                swal.fire({
                                    type: 'success',
                                    html: 'Component with IP: <?php echo $action_ip; ?>'+ip+' was '+methodmsg+' sucessfully!',
                                    showCancelButton: false,
                                    confirmButtonColor: '#3085d6',
                                    confirmButtonText: 'Ok',
                                    allowOutsideClick: false
                                });
                            });

                            ajaxCall.fail(function( jqXhr, textStatus, errorThrown ){
                                reject(errorThrown);
                                Swal.fire('Error! It was not possible to '+methodmsg+' component with IP: <?php echo $action_ip; ?>'+ip, 'Status: '+textStatus+' Error: '+errorThrown);
                            });
                        });
                    },
                    allowOutsideClick: false
                });
            }

My wait.php file is executing sleep(10) and returning true:

sleep(10);

echo json_encode(array(
    'success' => true,
));

So, the this wait.php file called via Ajax takes 10 seconds but I force a timeout of 5 seconds on the ajax request. Before the timeout is completed, the sweetalert popup shows a loading animation and the cancel button. But this cancel button is not clickable. I would like to assign an abort function to it so the ajax request can be canceled if it takes to long.

Is this a bug?

Thanks

Upvotes: 2

Views: 847

Answers (1)

Limon Monte
Limon Monte

Reputation: 54379

That's the behavior which will be changed in the next major release of SweetAlert2, you can track the progress here: https://github.com/sweetalert2/sweetalert2/issues/1501

For now, use Swal.getCancelButton().removeAttribute('disabled') as a workaround.

Upvotes: 1

Related Questions