Cancel an Ajax Request in ExtJS

Recently, I have been using ExtJS 6.0 and implementing an Ajax Request to fetch data from the application server. In my current setup, when the OK button is clicked in a view, it triggers an Ajax call with certain payload parameters while also displaying a screen overlay with a cancel button. Sometimes, if the service takes longer to respond, users may want to cancel their search and start over by clicking the cancel button. Although I have implemented functionality to unmask the screen upon cancel click, the Ajax request does not get aborted and ends up loading old data once the service eventually responds. Is there any way to effectively stop or abort the old Ajax request to prevent this scenario?

Answer №1

Give this a shot

let requestID = Ext.Ajax.request({...});

Ext.Ajax.abort(requestID);

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

Generate checkboxes by utilizing the JSON data

Here is a snippet of my JSON data: [ { "type": "quant", "name": "horizontalError", "prop": [ 0.12, 12.9 ] }, { "type": "categor", "name": "magType", "prop": [ ...

Breaking down objects and setting default values

In need of assistance with resolving an issue related to default parameters and object destructuring. The 'product' object that I am working with has the following structure: { name: "Slip Dress", priceInCents: 8800, availableSizes ...

Integrating a spinner into a React component

I am currently working on implementing a loader for my react component. The idea is that when the background image is loading, it should display 'loading', and once it has finished loading, it should display 'loaded' To test the loader ...

Utilizing the body in GET requests for enhanced client-server communication

What makes url query strings better than request body values? There are distinct advantages to using url parameters, such as visibility in the address bar and the ability to save requests in the browser history. However, is there more to it? Could reques ...

Export all entries without taking into account pagination limits

My current setup involves using Datatables with pagination. I recently integrated the Datatable.buttons library to enable an Export to Excel feature. However, I encountered a limitation where only the first 10 rows on the current page are exported due to p ...

Looking to retrieve the name of an article by its ID using asynchronous methods in Symfony 2.8. How can this be accomplished?

Hello everyone, I'm currently seeking a solution to retrieve the name of a product when a user enters the product ID into an input field. Here's what I have tried with JavaScript: function showHint(str) { if (str.length == 13) { $.ajax({ ...

Creating a state in React may lead to an endless loop

Currently, I am working on retrieving data from a Firebase real-time database and storing it in an array named 'users'. The goal is to use this array to set the "post" state. However, there seems to be an issue with the line "setPost(users);" as ...

Troubleshooting: Inconsistencies with AngularJS' ngmaxlength and ng-required

Input Type <div class="form-group" ng-class="{ 'has-error': loginForm.password.$dirty && loginForm.password.$error.required }"> <label for="password">{{ 'PASSWORD' | translate }} <span class="required-field"& ...

Start by creating a set of vertices and triangles to be utilized by the vertex shader

After experimenting with vertexshaderart.com, I'm eager to apply what I've learned on a different website. While I have experience using shaders in the past, some effects achieved on the site require access to vertices, lines, and triangles. Pass ...

Getting a list of connected users on a PeerJS server using Express is simple and straightforward. Follow these steps to

Trying to incorporate PeerJS, a webRTC library, into a game and utilizing their server for user discovery has proven challenging. The goal is to manage a list of connected users, but grappling with the PeerJS server has been difficult. The documentation s ...

What might be causing the attribute of this Backbone model to be undefined when attempting to access it?

I have a straightforward REST API that provides information about an item at /api/items/:id, which includes the ID and name. I am using a Router to organize my Backbone views. The edit route creates a FormEditItem view, passing the ID from the URL. To ret ...

Using C# and Ajax to update panels is a great way to enhance user experience in .NET masterpages

Upon clicking the href link, I encountered this error message: Microsoft JScript runtime error: The value of the property 'walkRedCarpet' is null or undefined, not a Function object. From my understanding, it seems that the OnClientClick event i ...

What is the best way to darken the background when an alert is displayed and disable the dimming effect when the alert is closed?

Here's the JavaScript snippet I'm using: reset.addEventListener("click", function(){ document.querySelector("#body").classList.add("darkenPage"); myReset(); alert("Reset Successful!!"); document.querySelector("#body").classList.re ...

Are there any methods available to adjust the size of a View component in react-native?

My react-native application includes a View that contains several components. The layout displays perfectly on iPhone 6 and 5 models, but on an iPhone 4s, the bottom of one component is being clipped slightly. I'm aware of scaling base64 icons, but I ...

Is there a way for me to manage the rendering of a three.js scene?

I've noticed that most examples use a loop structure to render the scene, like so: renderer.render(scene, camera); function render(){ renderer.render(scene, camera); //code for rendering requestAnimationFrame(render); } render(); Howev ...

Does client-side JS/Angular have an HTTP Connection Timeout feature?

I'm currently using Angular's HttpClient to send HTTP requests and I want to set a specific timeout for them. Although I am aware that I can utilize HTTPInterceptors and include a timeout in RxJS operators, these settings apply to the entire req ...

Adjust the Vue.js required property to allow null values but not undefined

I need my component to accept both objects and null values, as Vue.js considers null as an object. However, I want the validation to fail if the value is undefined. Here's what I've attempted using vue-property-decorator: @Prop({ required: true ...

Resolving issues with JavaScript caused by Polymer updates

I am a novice when it comes to working with Polymer. From what I have gathered, there seems to be compatibility issues with Mozilla and Safari. After researching on StackOverflow, I found that adding addEventListener('WebComponentsReady', funct ...

Having trouble getting your jQuery image slideshow to function properly?

I am currently working on creating an image slider that fetches images from placekitten. My goal is to make it versatile enough to accommodate different image sizes. The slider should display a small description of the image at the bottom, the name of the ...

Ways to showcase a JavaScript popup on an Android WebView

Can a JavaScript popup window be opened on an Android web viewer that is coded similarly to this example from Google? If so, how can this be accomplished without closing the original background page and ensuring it resembles a popup as shown in the picture ...