Utilize $.ajax to gracefully wait for completion without causing the UI to freeze

Consider a scenario where there is a JavaScript function that returns a boolean value:

function UpdateUserInSession(target, user) {
    var data = { "jsonUser": JSON.stringify(user) };

    $.ajax({
        type: "POST",
        url: target,
        data: JSON.stringify(data),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            return true;
        },
        error: function (xhr, status, error) {
            return false;
        }
    });
}

The server being called might take approximately 15 seconds to respond. How can we ensure that the function does not exit before the server call completes? How do we guarantee that the caller receives a proper response (true/false) instead of undefined?

PLEASE NOTE: Using async: false may cause the UI to become unresponsive, so it's not preferred.

Answer №1

Check out this resource http://api.jquery.com/jQuery.ajax/. Make sure to include the `async: true` parameter in your AJAX request. Also, remember to adjust your code so that any actions following a successful request are placed within the `success` block.

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

Is it feasible for a form button to perform multiple actions simultaneously?

I am interested in exploring the possibility of having a submit form button perform multiple actions. Currently, I have a custom form that is sent to a Google Spreadsheet using AJAX and I am also utilizing the Blueimp Jquery File Upload plugin. My goal is ...

The caret operator in NPM does not automatically install the latest minor version of a package

Within my package.json file, one of the dependencies listed is labeled as... "@packageXXX": "^0.7.0", Upon running the "npm outdated" command, I observed that... @packageXXX current: 0.7.0 wanted: 0.7.0 latest: 0.8.0 Despite executing "npm ...

Display the Express response in an HTML element by utilizing the fetch API

I am currently developing a small node/express project that showcases the bcyrpt hashed value of user input. While I have been successful in displaying the hashed value in the server's console.log, I am facing difficulties in injecting this value into ...

Verify the front-end application and authenticate the backend REST API

My project involves developing a REST API and application logic on the client-side, keeping them separate and independent of each other. Now I am looking to implement an authentication system that will automatically authenticate users both on the client-si ...

Using AJAX and jQuery to refresh a specific div when a specific button is clicked

I have a function that uses AJAX to update votes when clicked. Here is the code: $(function() { $(".vote").click(function() { var id = $(this).attr("id"); var name = $(this).attr("name"); var dat ...

Performing the task of removing a complete script using D3 or JavaScript

Here is the current setup I have in my code: The index.html file contains <div id="div1"></div> and I dynamically load a file into it (when a socket arrives) using this script: <script> var socket = io.connect('http://127.0. ...

Having Difficulty Converting JavaScript Objects/JSON into PHP Arrays

This particular inquiry has no relation to the previously mentioned identical answer/question... In JavaScript, I am dealing with a substantial list of over 1,000 items displayed in this format... var plugins = [ { name: "Roundabout - Interac ...

Using Node.js setTimeout method

I'm struggling with understanding how to utilize the setTimeOut function in NodeJS. Let's say I need: function A() to be executed every 10 seconds. If function A returns 'true' from its callback, it should trigger a call to a specific ...

Build error occurred due to the presence of the following error: Module parse failed with an unexpected character ''' (1:0)

I am facing an issue regarding an unexpected character in a node module file. Below is the content of my next.config.js file: /** * @type {import('next').NextConfig} */ const UglifyJsPlugin = require("uglifyjs-webpack-p ...

Retrieving a compilation of items found within text selected by the user on a website

Imagine a scenario in which a webpage contains the following structure: <p> <span class="1">Here's some text</span> <span class="2">that the user</span> <span class="3">could select.</span> </p> I ...

Why does the map function in JavaScript not allow for a function argument?

I encountered an issue while calling a function and passing an array of objects as the first argument, with the second argument being an object property of the first argument. Strangely, the map function was not accepting the second argument property. He ...

Achieving a reset for a form is essential for ensuring its

After creating a contact form, I encountered an issue where if a field is left empty or an invalid email address is entered, the form stops sending. Even after attempting to resend the information, the form remains unresponsive. Any suggestions on how to r ...

Troubleshooting the issue with generateStaticParams() in NextJs/TypeScript

My NextJs app has a products page that should render dynamic routes statically using generateStaticParams(). However, this functionality does not work as expected. When I run "npm run build," it only generates 3 static pages instead of the expected number. ...

Using ng-disabled on input elements within an ng-repeat directive

Showing different inputs based on an array looks like this <div data-ng-repeat="n in langInput.values"> <input type="text" id="auction_name_{{n.selected}}" class="form-control" name="auction_name_{{$index}}" ...

Apache causes HTML download tag to malfunction

I have an HTML file that includes the following code: <a href="/Library/WebServer/Documents/file.zip" download="file.zip"> Download here </a> When I test this HTML page on Chrome, it successfully allows me to download the file. However, when ...

Problem with overlapping numbers in the Vis network

I am currently working on a project using Angular 8 and Visnetwork. Everything is going well, but I am facing an issue with overlapping numbers on lines. Is there a way to adjust the position of the numbers on one line without separating the lines? Can s ...

Top solution for efficiently capturing and storing user input in a React JS application: Event Handler

I've recently designed an input field for inputting details of items. In order to effectively capture and save the entered information, which of the following event handlers would be most suitable? onClick onChange onLoad onKeyPress ...

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

Problem with using Twitter Bootstrap in IE11 when Browser Profile Enterprise is enabled

I am facing an issue with a Bootstrap 3 web page. Some machines have IE configured to load intranet pages in Enterprise profile mode, while others have the default Desktop profile set in IE11. This configuration has caused the layout to break completely. ...

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...