When the button is clicked, Ajax fails to abort

Is there a way to cancel an ajax request when a button is clicked? I've tried some solutions I came across here, but none seem to work for me.

<button type="button" id="toStop">Stop</button>

Despite clicking the stop button, the ajax request does not abort.

function() {
    var myajaxreq = $.ajax({
        url: myurlhere,
        type: 'GET',
        async: true,
        success: function(result) {
                            
        }
        beforeSend: function () {
            if(document.getElementById('toStop').clicked == true) {
                myajaxreq.abort();
            }
        }
    });
}

Answer №1

Ensure you have a dedicated click listener to cancel the ajax request. Placing it within beforeSend may not be effective in all cases.

$('#toStop').click(function(e) {
    e.preventDefault();
    // Add code to abort the request here
    // Make sure that the variable myajaxreq is accessible within this function
    if (myajaxreq) myajaxreq.abort();
}); 

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

How can values be passed to child components in Vue when using component tags for dynamically switching components?

Is there a way to pass values to children components in Vue when using the component tag? It appears that I am unable to pass values to a child component using the component tag without using v-if: <component :is="showNow"></component> ...

The AJAX request is failing to send the most recent data for processing on the server side

Recently, I created a server-side processing script for datatables v1.10.0 that has been giving me some trouble. The server needs the product id to fetch records from the database, which it gets from a select2 plugin based selector selection. However, I ha ...

Is it possible for me to transform this code into a useful helper function?

I am looking to optimize this conditional code by converting it into a helper function using a switch statement instead of multiple if statements. How can I achieve this in a separate file and then import it back into my component seamlessly? import { ...

Troubleshoot: Unable to Change CSS on Click Using Javascript/jQuery

Having trouble creating three different buttons that toggle between various images using the CSS display property? Check out my code on https://jsfiddle.net/agt559e8/. function USradarChange1() { //document.getElementById("usradar1").src="weather/curr ...

Exploring the JSON Structure in NodeJS

My current json array is structured in the following way: [{"id": 1, "meeting": "1/3/2015 12:30:00 PM", "name": "John"}, {"id": 1, "meeting": "1/3/2015 13:30:00 PM"}, "name": "John"}, {"id": 2, "meeting": "1/5/2015 7:00:00 AM"}, "name": "Peter"}, {"id": 2 ...

Transferring Data to EJS Template

I have been facing a challenge in passing a value from a POST route to an EJS file for display. Despite trying various methods like redirecting, sending, and rendering the results, the data won't make its way to the EJS file. Below is the POST route ...

Vue Template ref Error: Unable to access scrollHeight property of null object

I'm currently working on creating a responsive sidebar in Vue, and I encountered an issue after refactoring my project to remove the state.js file. The problem is related to the dropdown/collapse elements, and it's throwing a TypeError: Cannot re ...

What could be causing the state to not update as anticipated?

I am currently in the process of developing a TicTacToe game and have a requirement to maintain the current player in state under the name currentPlayer. The idea is that after one player makes a move, I need to update currentPlayer to represent the opposi ...

When using VueJS to load an SVG file based on a variable within a for loop and utilizing v-html, the result returned is "[

I'm faced with a challenge of loading SVGs saved in separate files based on the content within a loop. Upon page load, what I see is: https://i.sstatic.net/OiwyT.png Hey there, check out my code snippet below: <div v-for="(rec, index) in stats ...

Converting database data into an array of objects using JavaScript

In my App.js file, I have the following code: const getPlayers = async()=>{ const players = await API.getPlayers(); setPlayers(players) } getPlayers() The following code is from my API.js file: const getPlayers = async() => { return getJson( ...

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

Ways to integrate mouse out functionalities using an if condition

I'm currently working on a menu using Javascript where clicking on one option will dim the other options and reveal a sub-menu. I'm looking to include an if statement in the function so that when a user mouses out of both the sub-menu and the cli ...

Error in accessing the value from the JSON response

After uploading a photo to an external cloud CDN, I receive a JSON response containing relevant information about the uploaded photo. One key piece of data is the public_id field, which I need to store in my database. The response structure is as follows: ...

Unexpected error: the process is not recognized

I am currently working with node.js to develop a web application. Upon running the application (either by opening index.html in the browser or executing "npm start" in the terminal), I encounter two errors: Uncaught ReferenceError: process is not defined ...

Issue: `Alert` not triggering after clicking on anchor link in AJAX response

Below is the code I am currently working with: $('.ver').click(function(e) { e.preventDefault(); var id = $(this).next().val(); $.post('cotizar_detalles.php', {'id': id}) .done(function(response) { ...

A method for arranging an array of nested objects based on the objects' names

Recently, I received a complex object from an API: let curr = { "base_currency_code": "EUR", "base_currency_name": "Euro", "amount": "10.0000", "updated_date": "2024 ...

Create a custom chrome browser extension designed specifically for sharing posts on

I'm working on creating a basic chrome extension that features an icon. When the icon is clicked, I want the official Twitter window to pop up (similar to what you see here). One common issue with existing extensions is that the Twitter window remains ...

There appears to be an issue with the function's ability to

I'm currently facing an issue with my script. There's an editable field and a button next to it, and I've created a function that should start working when the button is pressed, reading data from the input field. However, the function doesn ...

Is npm create-react-app giving you trouble?

When attempting to create a React app using the command npm create-react-app appname, the tool would just return me to the same line to input more code. I also gave npx a try, but encountered some errors in the process. See this screenshot for reference: ...

Issue with React useCallback not being triggered upon a change in its dependencies

useCallback seems to be capturing the wrong value of its dependency each time. const [state, setState] = React.useState(0); const callback = React.useCallback(() => { console.log(state); // always prints 0, why? }, [state]); React.useEffec ...