using a synchronous fetch instead of synchronous ajax

Although synchronous calls are not recommended, I am in a situation where I need to make one in ajax. The device I am working with requires user action before I can receive a response from it. My current ajax() code has been functioning well so far. However, I recently received a warning stating that "Synchronous XMLHttpRequest on the main thread is deprecated." The synchronous call returns the response from the device, which I then pass to my second call to generate the output:

<script>
var result = $.ajax({
    url: 'url',
async: false,
type: "GET"
}).responseText;

$(document).ready(function() {   
    $.post("https://example.com/doit.php", {
        response: result,account: <?php echo $account ?>,dn:<?php echo $dn ?>, mode:<?php echo $dest ?>},function(data){document.write(data);});
    });
</script>

In order to continue using this setup, how can I modify my synchronous call?

Answer №1

Give this a try

<script>
    $(document).ready(function(){   
        $.ajax({
          url: 'url',
          type: "GET",
          success: function(r){
             var result = r.responseText;
             $.post("https://example.com/doit.php",{response: result,account: <?php echo $account ?>,dn:<?php echo $dn ?>, mode:<?php echo $dest ?>},function(data){document.write(data);});
          }
        });
    });
</script>

Answer №2

Make sure to execute your post request within the success callback function of your get request:

$.ajax({
    url: 'url',
    type: "GET"
})
    .then(function(responseText) {
        return $.post(...)
    })
    .then(function(postResponse) {
        // Perform any necessary actions here
    })

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

Issue: Unable to locate module - Unable to resolve 'core-js/modules/es.error.cause.js'

I've incorporated Vuexy Dashboard into my project, which utilizes Vue 2. Now, I'm in the process of upgrading it to Vue 3. However, I have encountered an error that has me stuck. Any assistance with this issue would be greatly appreciated. Thank ...

Having trouble with AJAX calling an ASP.NET web method

When attempting to call an asp.net web method in my ajax request, the defined web method is structured like this: [WebMethod()] public static int DropDownIndexChanged(string selectedText) { int a = 5; // This is just for testing purposes return a; } ...

Error message received from Express middleware: "Unable to modify headers after they have been sent."

I have created middleware for my Node Express app to perform the following tasks: Checking all incoming requests to determine if they are from a bot Allowing requests for raw resources to proceed Serving an HTML snapshot if the request is from a bot How ...

Is it possible to develop a reversed version of AJAX-IE? I am looking for this specific type of functionality

I've developed a web application that functions as a calendar with multiple tabs at the top. Currently, these tabs lead to new pages so that the user's back button works properly. Recently, I added a "help" box within the header that remains con ...

Blending the power of google-maps-react with the versatility of react-router

While working on my project, I encountered an issue with google-maps-react. It seems that when I try to include a <Link /> from react-router-dom alongside multiple <Marker />, there is a conflict. This is the structure of my code: render() { ...

Tips for saving information to a JSON file in Reactjs

Perhaps the real question should be How can I save data to a JSON file using Reactjs and Nodejs? I'm new to React and unsure about which database to use. On a side note, it's simple to read from a json file with var data = require('./d ...

How can I add a hyperlink to a Javascript string array?

I am currently facing a challenge in adding a hyperlink to a string using .link and .innerHTML methods. I believe there might be a misunderstanding on my part as I am quite new to this. Here is the code snippet I have been working with: <div id="type ...

The jQuery dropdown selection for only displaying the month and year is not functioning properly when using the select

Currently, I am utilizing a datepicker with only the month and year as options to select from using dropdowns. However, when I apply the following CSS to disable the days of the datepicker, it ends up affecting all datepickers in my JSP file. 1. Is there ...

Inexplicably, HighCharts flips its axis when exporting data

I am facing an issue with the display of my Highchart in the web application. While it appears correctly in the browser, the exported chart flips the axis and shows a different image. Below are the options I have configured for my Highchart: var options = ...

Using meteor.js to establish a controller for accessing a collection

Seeking insight on why I am unable to access data within the venue collection from a specific page. I have successfully accessed the events collection, but the venue collection remains inaccessible. Here is the snippet of code in question: //Controller U ...

Step-by-step guide on fetching blog posts from a Ghost blog by utilizing the API in a Vue cli project

I'm currently working on my Vue cli project and I am trying to showcase all the posts from a Ghost blog using the API. Unfortunately, the example provided on the page is for a nuxt project. Once we have called the dependencies and authenticated with ...

I have a JavaScript code stored as a string that I need to transform into plain JavaScript

If I have a variable in string format, for example suppose there is a JavaScript code inside it: var string="function myFunction(a,b){return a*b;}"; I want to convert this into pure JavaScript code format like so: function myFunction(a, b) { return ...

Creating unique page styles using global styles in Next.js

I am facing a dilemma in my NextJS app. On the /home page, I need to hide the x and y overflow, while on the /books page, I want the user to be able to scroll freely. The issue is that Next only allows for one global stylesheet and using global CSS selec ...

Issues arise when trying to manage HTML received as a response from a server in plain text

I have a scenario where I am dynamically generating an HTML table on the server side using Java and then sending it to the client as JSON data. The response looks something like this: <table class="table"></table><thead class="thead-dark"&g ...

The latest version of Material UI icons caused compatibility issues with React-Select

I recently made the switch from using @material-ui/icons version 4.11.2 to @mui/material and @mui/icons-material version 5.2.3 Although material UI is not directly integrated with react-select, there seems to be some interaction happening. The transition ...

The model fails to update when a blur event occurs

I am a beginner with Angular2 and I am currently working on creating a reactive form, specifically an interactive date input field. Here is my HTML code: <div class="date ui-input"> <input type="text" name="dateD" [ngModel]="model.date | dat ...

The toggle JavaScript class is failing to update the icon

After implementing a toggle js function to change the icon on click, I am experiencing difficulty with its functionality. Can you please help me troubleshoot what might be causing this issue? Below is the html code snippet: <div class="south-search-fo ...

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Issue with displaying post titles, URLs, and permalinks separately. Need them to display together for each post. See the code below: $(document).ready(function() { $.getJSON( "http://www.reddit.com/r/pics.json?jsonp=?", function foo(data) { ...

Having trouble with gsap.reverse() not functioning properly when using onMouseLeave event in React

I've been incorporating simple gsap animations into my React application. I have successfully triggered an animation.play() function on onMouseEnter, but for some reason, the animation.reverse() function is not functioning as expected. Here's ho ...

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...