I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

Question

I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

I attempted to implement an AJAX function but the output is not displaying anything.

var ajaxFunction = function(url, method, data = "") {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && x.status == 200) {
                        this.responseAjax = this.responseText;
                    }
                }
                xhr.open(method, url, true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(data);
    
            }
    
            function showSuggestion(inputStr) {
                var xhttp = new ajaxFunction("gethint.php?q=" + inputStr, "GET");
                if (inputStr.length == 0) {
                    document.getElementById("txtHint").innerHTML = "";
                    return;
                }
                document.getElementById("txtHint").innerHTML = xhttp.responseAjax;
            }

<!DOCTYPE html>
    <html>
    
    <body>
    
        <h3> Start typing a name in the input field below :</h3>
    
        <form action="">
            First Name : <input type="text" id="txt1" onkeyup="showSuggestion(this.value)">
    </form>
    
        <p>Suggestions:
            <sapn id="txtHint"></sapn>
        </p>
        
    </body>

</html>

I tried to retrieve suggested names from the gethint.php file when a user starts typing into the text box. However, it appears that the value of responseAjax is obtained after the showSuggestion() call. Can someone please assist me?

javascript ajax

Answer 1

Answer №1

It's important to handle the AJAX request asynchronously. When you are using the showHint function and trying to set the inner HTML of "txtHint" element with xhttp.responseAjax, you need to be aware that the AJAX call might not have returned yet. This means that the xhttp.responseAjax object is not defined at that moment. To properly handle the response, it's crucial to wait for the response to arrive. One way to do this is by passing a callback function into the ajaxObj definition. The object will call this function once it receives the response.

var ajaxObj = function(url, method, callback, data = "") {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {

            // Handle the response data
            callback(xhr.responseText);
        }
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);

}

// The callback function to execute when AJAX finishes
function fillTxtHint(responseHtml)
{
    document.getElementById("txtHint").innerHTML = responseHtml;
}

function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
    }

    // Pass in the callback function to be executed after AJAX returns
    ajaxObj("gethint.php?q=" + str, "GET", fillTxtHint);
}

Answer 2

It's important to handle the AJAX request asynchronously. When you are using the showHint function and trying to set the inner HTML of "txtHint" element with xhttp.responseAjax, you need to be aware that the AJAX call might not have returned yet. This means that the xhttp.responseAjax object is not defined at that moment. To properly handle the response, it's crucial to wait for the response to arrive. One way to do this is by passing a callback function into the ajaxObj definition. The object will call this function once it receives the response.

var ajaxObj = function(url, method, callback, data = "") {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {

            // Handle the response data
            callback(xhr.responseText);
        }
    }
    xhr.open(method, url, true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(data);

}

// The callback function to execute when AJAX finishes
function fillTxtHint(responseHtml)
{
    document.getElementById("txtHint").innerHTML = responseHtml;
}

function showHint(str) {

    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
    }

    // Pass in the callback function to be executed after AJAX returns
    ajaxObj("gethint.php?q=" + str, "GET", fillTxtHint);
}

Answer 3

Answer №2

this within the context of onreadystatechange's handler is actually referring to an instance of XMLHttpRequest, hence the line

this.responseAjax = this.responseText

seems redundant as it creates a field in the object that already exists and sets its value to another existing field. In the function showHint, the variable xhttp represents an instance of ajaxObj, however there is no pre-existing responseAjax field defined for this particular object. Instead, you can directly manipulate the innerHTML property of the element displaying suggestions inside the event handler of onreadystatechange like below:

function getSuggestions (method, data) {
    method = method.toUpperCase();
    var params = "q=" + data;
    var url = (method == "GET") ? "gethint.php?" + params : "gethint.php";

    var elem = document.getElementById("txtHint");

    if (data.length == 0) {
        elem.innerHTML = "";
        return;
    }

    var x = new XMLHttpRequest();

    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            elem.innerHTML = this.responseText;
        }
    }
    x.open(method, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (method == "GET") { 
        x.send(); 
    } else { 
        x.send(params); 
    }

}

Then, the modified showHint function will look like:

function showHint(str) {
    getSuggestions ("GET", str);
}

Answer 4

this within the context of onreadystatechange's handler is actually referring to an instance of XMLHttpRequest, hence the line

this.responseAjax = this.responseText

seems redundant as it creates a field in the object that already exists and sets its value to another existing field. In the function showHint, the variable xhttp represents an instance of ajaxObj, however there is no pre-existing responseAjax field defined for this particular object. Instead, you can directly manipulate the innerHTML property of the element displaying suggestions inside the event handler of onreadystatechange like below:

function getSuggestions (method, data) {
    method = method.toUpperCase();
    var params = "q=" + data;
    var url = (method == "GET") ? "gethint.php?" + params : "gethint.php";

    var elem = document.getElementById("txtHint");

    if (data.length == 0) {
        elem.innerHTML = "";
        return;
    }

    var x = new XMLHttpRequest();

    x.onreadystatechange = function() {
        if (x.readyState == 4 && x.status == 200) {
            elem.innerHTML = this.responseText;
        }
    }
    x.open(method, url, true);
    x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (method == "GET") { 
        x.send(); 
    } else { 
        x.send(params); 
    }

}

Then, the modified showHint function will look like:

function showHint(str) {
    getSuggestions ("GET", str);
}

I attempted to implement an AJAX function, but unfortunately, it is not displaying any output

Answer №1

Answer №2

Similar questions

Achieving the selected option's text in Knockout and incorporating it into the URL for an Ajax call

Whenever I repeatedly click the button, the array will store a new value. My goal is for it to collect and store all values obtained from the function

Encountering empty parameters in JSP file when they are being transmitted via request

Issue: A child component's function is unable to update the state of the parent component

Is it possible to retrieve the complete file path in a form?

Jquery .submit function not functioning properly in Chrome

Can you point me in the direction of the Monaco editor autocomplete feature?

Utilize a Web Api controller to authenticate and verify the data input in

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

An error has occurred: Unable to access the property "filter" as it is undefined

Utilizing Node.js to Retrieve Data from MySQL

Tidying up JQuery with automatic selection of the next div and navigation item

I am seeking guidance on creating a dynamic search feature using node.js and mongoDb. Any input regarding

What is the best way to make a Dojo TitlePane overlap using CSS?

Unexpected behavior encountered when using the $http.post method

Changing the main domain of links with a specific class attribute during an onmousedown event - is it possible?

Simultaneously activate the top and bottom stacked components by clicking on them

To effectively execute a JQuery / Javascript function, it is essential to incorporate both $(document).ready and $(document).ajaxSucces

Storing the AJAX response in an external variable using jQuery callback function

Troubleshooting problem with Ajax Calendar Extender