Issue with SweetAlert2 cancel button being unresponsive while an ajax request is in progress

I have a custom function triggered when a dropdown item is selected, which triggers a sweetalert2 popup. Here's the function:

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 script includes a sleep(10) command and then returns true:

sleep(10);

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

The Ajax call made to this wait.php file has a timeout of 5 seconds even though the script execution takes 10 seconds. During this time, the sweetalert popup shows a loading animation and a non-clickable cancel button. I'm looking to implement an abort function on this cancel button so that the Ajax request can be cancelled if it exceeds the defined time limit.

Is this behavior considered a bug?

Thank you

Answer №1

In the upcoming major release of SweetAlert2, there will be changes to this behavior. Keep up with the progress by following this link: https://github.com/sweetalert2/sweetalert2/issues/1501

As a temporary solution, you can use

Swal.getCancelButton().removeAttribute('disabled')
.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging deep linking to launch the email application in react native

I am currently exploring the deeplink URL for the mail app on iOS. A scenario I have set up involves displaying an alert that, when the user clicks 'ok', redirects them to the default mail app. const openEmailApp = () => { if (Platform.OS ...

What is the best method for extracting html-string from html-string across different browsers?

Works perfectly in Chrome and FF, but encountering issues with Safari. var content = '<div><span><p>Can you catch me?</p></span></div>'; content = $.parseXML(content); var span = $(content).find('span&apo ...

Utilizing jQuery to seamlessly animate decimal values

Currently facing a challenge while trying to animate a number from 0 to 36.6. The issue is that the end value gets rounded up to 37 instead of displaying as 36.6, which you can observe in this fiddle: http://jsfiddle.net/neal_fletcher/0f3hxej8/ Required ...

Utilizing CSS-in-JS to eliminate arrow buttons from a TextField

I'm currently developing a webpage using React and Material-UI. One of the components I have is a TextField element, and I need to remove the arrow buttons that typically appear on number input fields. If I were utilizing CSS, I could easily achieve t ...

Unable to attach eventName and callback to addEventListener due to the error message stating 'No overload matches this call'

I am attempting to attach an event listener to the input element stored within a class method. This method takes a props object containing eventName and callback. public setTextFieldInputListener({ eventName, callback }: TextFieldListenerProps): void { ...

Adjust the range directly in ng-repeat from the directive

I am working with HTML code that looks like this: <div dir-paginate="x in comments | itemsPerPage: commentsPerPage"> HERE IS DIRECTIVE FROM BLEOW </div> My goal is to update the commentsPerPage scope within the directive... Below is a direct ...

Tips for highlighting HTML syntax within JavaScript strings in Sublime Text

Is there a Sublime package available for syntax highlighting HTML within JavaScript strings specifically? (Please note that the inquiry pertains to highlighting HTML within JS strings only, not general syntax highlighting.) Currently, I am developing Ang ...

HTML TABS: Make the first TAB automatically selected

I've been experimenting with tabbing in HTML using a tutorial I found on W3SCHOOLS. While the source code provided works fine, I'm encountering an issue with automatically selecting the first tab by default. The tutorial doesn't cover this, ...

Utilizing jQuery to seize events and handle AJAX callbacks

I am attempting to accomplish a simple task: capture any click event and send the URL to a PHP script. When using alert(a); the ajax.php is called every time. However, if I remove it, only once in every 20 clicks will work. I am wondering if this is due t ...

Tips for integrating execute_script and WebDriverWait in Selenium automation

Is there a way to combine execute_script() and WebdriverWait? In my current code: network_list = driver.find_element_by_xpath('//*[@id="folder_box"]/div[1]/div/div[2]/div[1]') wait = WebDriverWait(driver, 4) try: wait_network_list = wait.unt ...

Can Highchart dynamically adjust color choices based on the quantity of data points available?

I am trying to figure out how to import a specific color palette into my column graph. I want to use different color palettes based on the number of data points in my graph - for 3 or fewer points, I want to use the top row colors, for 4 points I want to u ...

What is the best way to add content in JavaScript?

Just diving into the world of JavaScript, HTML, and web development tools here. var labels = {{ labels|tojson|safe }}; After using console.log to check the content of labels with console.log(JSON.stringify(labels));, I got this output: [ {"id":"1", ...

moment.js incorrectly interprets the month as the day instead of the actual day

I am currently using moment.js (moment-with-locales.js - v.2.14.1) in my project. My goal is to extract only the date from a datetime string and remove the time. However, when I use the .format() method of moment.js, I receive an incorrect date. The datet ...

Is there a way to integrate jQuery and Javascript into a Firefox add-on?

Having trouble creating a new element on the page? After checking both the page and domain during onload, it seems that everything is in order. But how can you successfully create a new element in the correct window page? window.addEventListener("load", f ...

An easy way to insert a horizontal line between your text

Currently, I have two text responses from my backend and I'm considering how to format them as shown in the design below. Is it possible to automatically add a horizontal line to separate the texts if there are two or more broadcasts instead of displa ...

Utilizing Squelize's junction table for forming new connections: a comprehensive guide

I am currently working with three basic tables: A, B, and C. The relationship between A and B is many-to-many, so I am using a junction table called A_B. Table C has a one-to-many relationship with the junction table A_B. In sequelize, this is how they are ...

Saving multiple JQuery Sortable lists within a single table

Utilizing multiple Ul elements, I have the ability to drag and drop li elements between them: <div class="outer-box"> <div class="header text-center"> <h4 class="title">Curriculum</h4> <p class="category"> ...

Tips for dynamically displaying images in both horizontal and vertical orientations

I would like to showcase images in the imageList. Here is what I want: AB CD How can this be achieved? It's not a matter of being even or odd Perhaps the list could look something like this: ABCDE FG I simply want a new row or display:block when ...

Is there a way in vee-validate to validate specific sections of a form?

I'm struggling with my English skills. When I utilize 'this.$validator.validate()', I am seeking a way to only validate specific inputs on the page. Is there a method to achieve this? ...

When casting a ray from the inside, the raycast does not collide with the mesh

In my latest project, I've created a unique scene that involves placing my camera inside a sphere geometry. var mat = new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('0.jpg') , overdraw:true, color: 0xffffff, wireframe: fal ...