Which pattern should be employed to monitor the performance of a model while it is making an ajax request

In my Item model, I have async methods such as delete, rename, etc. Whenever one of these methods is being executed, I display a spinner on the views to indicate loading. Since there are multiple async methods in the Item model, I find myself repetitively including code like this in my controller:

function delete() {
    isRequesting = true;
    item.delete().then(function() {
        isRequesting = false;
    }
}

function rename() {
    isRequesting = true;
    item.rename().then(function() {
        isRequesting = false;
    }
}

These instances of isRequesting= clutter up my code and can also be easily forgotten. On the other hand, I have a singleton called fileNavigator with many async methods, for which I use events to manage requesting status:

fileNavigator.on(FileNavigatorEvents.REQUESTING, function (event, requesting) {
    isRequesting = requesting;
});

This approach eliminates the need to manually handle isRequesting when working with the async methods of fileNavigator. My question is if there is a similar pattern that could be applied to non-singleton instances of Item?

Answer №1

Have you considered using Restangular instead of $resource? With Restangular, you can easily implement Request and Response Interceptors to trigger broadcasts automatically for displaying and hiding your Spinner.

You may find this helpful: restangular: is it possible to have a progress bar ?

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

Separate a string using commas but disregard any commas inside quotation marks

Similar Question: JavaScript code for parsing CSV data There is a string that looks like this: "display, Name" <<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d49584e497d49584e49135e5250">[email protected]</a> ...

Split vue.js templates into individual files

Is there a way to modify this code in Vue.js to achieve the following: <template type="login" /> <template type="subscribe" /> <template id="login"> <label>Username</label> <input placeholder="Enter your username" ke ...

Using react-hook-form to easily update form data

While working on my project with react-hook-form for updating and creating details, I encountered a problem specifically in the update form. The values were not updating properly as expected. The issue seems to be within the file countryupdate.tsx. import ...

Error: The Vue prop being passed to the component is not recognized

After analyzing the code snippet provided, an error message of "ReferenceError: myvar is not defined" has been observed. Is there a logical issue present in this code? Interestingly, when running it without a jQuery wrapper, the error disappears but the ex ...

MVC3: Easily browse through tables by accessing details directly from the details view, eliminating the need to click on

I am currently working on an Index view where a table displays a list of items, each with a link to show its details in another partialview loaded through Ajax. Users have expressed interest in being able to easily navigate between "Next Item" and "Previo ...

The selected element does not support the addition of setSelectionRange

I have encountered an error while trying to add the "setSelectionRange" method to an input element that I selected using "getElementById". The error message states that "property 'setselectionrange' does not exist on type 'htmlelement'" ...

Exploring a variety of data points extracted from a text string in JSON format

I am new to using JSON and Javascript. I am currently trying to understand how to print all of these items instead of just one? <p id="demo"></p> <script> var text = '{"employees":[' + '{"firstName":"John","lastName":"Doe ...

Develop a specialized WordPress widget featuring several unique text areas for enhanced customization

class ad_widget extends WP_Widget { function __construct() { $widget_ops = array( 'classname' => 'ad-widget-container', 'description' => __( ' Ad WIDGET' ) ); parent::__construct( 'ad-widget', ...

Utilizing analytics.js independently of the react-ga library

Is there a way to integrate Google Analytics into my React app without using the react-ga package? I specifically want to access the ga function in a separate JavaScript file as well as within a React component. How can I achieve this by importing the anal ...

"Troubleshooting a stalled Angular $http post request to Express server

Has anyone encountered this issue before? When I don't include a data argument in my Angular controller's $http post request, the Express route on the server side is properly detected and executed. However, when I add a data element, it hangs an ...

What steps can be taken to have Eslint/Prettier report errors and warnings within a CI environment?

Recently, I encountered an issue with my Vue app where I am using Eslint with Prettier. Even though I have set up a Github action to check the code style, running npm run lint -- --no-fix only logs the warnings and does not cause the workflow to fail. I r ...

The PHP file fails to load JavaScript because it requires another JavaScript file to be loaded beforehand

I created a chat widget using PHP (chat.php) and now I want to embed it into another PHP page (blank.php). To make this work, chat.php requires some scripts that are located in external JavaScript files. So, in blank.php, I added the necessary JS files th ...

Display the div once the radio button has been selected

I have a similar issue to an existing question. The challenge I'm facing is displaying 40 divs without writing repetitive code for each one... Does anyone have any advice or suggestions on how to tackle this? Thank you in advance. :) ...

What steps are needed to programmatically set the default page for Chrome and Firefox browsers?

Is there a way to use a native client (written in C++) to programmatically set the home page for both Chrome and Firefox browsers on a machine? I am trying to set the home page for all installed browsers to a specific URL. ...

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...

Interact with visible elements by automating mouse clicks with puppeteer

When attempting to click on various elements within a page, my goal is to do so only if they are visible. While achieving this in selenium with the is_displayed method was simple, I have struggled to find a similar approach in puppeteer. I attempted to imp ...

What is the most efficient method to import multiple MaterialUI components using a shared namespace without requiring the entire library to be imported

In order to prevent name mixing with other libraries, I want my MaterialUI components to be under the same namespace. For example, ensuring that <Box> references <MaterialUI.Box> and not <SomeOtherLibrary.Box>. Although it seems like a si ...

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

Unable to retrieve file paths for assets using Node.js Server and Three.js

I am facing challenges when it comes to loading 3D models from a folder on my computer using a localhost node.js test server with the three.js library. Below is my app.js file that I execute via command line in the project directory using the 'node a ...

jQuery performs a synchronous call and executes the code

The code snippet above demonstrates a situation where the API execute_wc is invoked, triggering a recursive function call to poll_results. The function only returns when the status is not equal to 1. However, due to the asynchronous nature of the poll_resu ...