Execute JavaScript code once the XMLHttpRequest has completed execution

Question

Execute JavaScript code once the XMLHttpRequest has completed execution

I'm facing an issue where the JavaScript code is executing faster than the XMLHttpRequest. I am hesitant to resolve it using:

setTimeout(function() {}, 100);

Below is a snippet of my code:

function change_country(id) {

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var data = JSON.parse(xmlhttp.responseText);

            document.getElementById("continent").value = data.continent;
            document.getElementById("country").value = data.country;

        }
        xmlhttp.open("GET", "request_country_change.php?id=" + id, true);
        xmlhttp.send();
    }
}

This excerpt serves as an example and is not part of the original code. It aims to demonstrate a form that undergoes changes. In this scenario, it fetches and populates a select field with all continents, followed by selecting the continent and countries based on the provided id. However, it loads the list in the select fields ahead of running the JavaScript portion.

document.getElementById("continent").value = data.continent;
document.getElementById("country").value = data.country;

The execution order seems off. While placing an alert or setTimeout in between rectifies the problem, I seek alternative solutions to address it.

javascript ajax callback xmlhttprequest

Answer 1

Answer №1

To achieve the desired outcome, you could include another JavaScript function in the select statement like this:

Here is an example of how it can be done in JavaScript:

function updateCountry(selectedValue){
     document.getElementById("country").value = selectedValue;
}

Let me know if this aligns with what you are looking for.

Answer 2

To achieve the desired outcome, you could include another JavaScript function in the select statement like this:

Here is an example of how it can be done in JavaScript:

function updateCountry(selectedValue){
     document.getElementById("country").value = selectedValue;
}

Let me know if this aligns with what you are looking for.

Execute JavaScript code once the XMLHttpRequest has completed execution

Answer №1

Similar questions

Executing a post request using axios

Communication between nodes using serial ports in Node.js fails to receive a response from the connected Arduino board

Steps for automatically closing a TextPrompt if the end user does not respond within a specific time frame

Using Three.js to showcase 3 different slices of heatmaps within a 3D environment

What is the name of the event triggered when a jQuery UI draggable element is reverting back to its original position?

Encountering an error message stating, "Unable to assign value to 'onclick' property"

The ng-submit() directive in Angular does not trigger submission when the "Enter" key is pressed in a text field

Handling conditional statements in JSX

The following middleware is not functioning properly on a local SSL server

Showing undefined or null values in React and JavaScript

Click the button to trigger an AJAX request that sends the values from the forms within a while loop

What is the best way to trigger a snackbar notification when two passwords do not match?

Access a PHP file using XMLHttpRequest to run additional JavaScript code

The error "Property 'user' does not exist on type 'Session'." occurred while attempting to pass session data using express-session and accessing req.session.user

Adjustable value range slider in HTML5 with ng-repeat directive in AngularJs

Once the jQuery Ajax call is completed, my goal is to redirect to a different page and display the returned JSON data on that new page

Unable to modify the hover color on the image or icon

Will the rel attribute work in all web browsers and with all HTML tags?

Is there a way to retrieve the name of a JSON or obtain the file path using NodeJS Express Router?

Linking the value of an expression to ngModel