CODEWITHSUNDEEP
javascriptjqueryajax
Matt Kelly
Matt Kelly

Reputation: 1491

jQuery AJAX call initiates without command when .done function added

I'm rewriting a series of jQuery AJAX requests and have been having trouble with .done code blocks. I'm attempting to send an AJAX request and wait for the response before processing the data. As a guide, I have been using the following page: http://michaelsoriano.com/working-with-jquerys-ajax-promises-and-deferred-objects/

I've also looked at countless stack questions to try and troubleshoot my issues, but haven't found anything which has helped. For reference, some of the questions I've looked at are below:
jQuery Ajax call not processing .done
jquery ajax done function not firing
Confused on jquery .ajax .done() function

I've noticed that when I create code blocks which are similar to the guide above, the functions run on page load, rather than when they are triggered in code. To isolate the fault, I created a simple example, as below:

<!DOCTYPE html>
<html lang="en">

<body>
    <button type="button" onclick="getData()">Click me</button>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
//Commented out due comment below   
/*function getData() {
        console.log('enter getData');
        return $.ajax({url:'./testajax.html',type:"POST"});
    }
     
    getData().done(function(data){
        console.log('enter done');
        alert(data);
    });*/

    function getData() {
        console.log('enter getData');
        $.ajax({ url: './testajax.html', type: "POST" })
            .done(function (data) {
                console.log('enter done');
                alert(data);
            });
        alert('after');
    }
</script>

</html>

I was expecting that when my example page loaded, nothing would happen, as there was no trigger to execute the getData() function unless the button was clicked. However, when I load the page, my console logs 'enter getData' and then 'enter done', and I get an alert with the contents of my ./testajax.html page (just a single string). Further, when I then click the button, it enters getData() but doesn't trigger the getData().done function, so no alert is received.

Is anyone able to guide me on the right track here and help me prevent the getData() function from executing on page load, and instead make the button click execute the AJAX request, wait for the result, then execute the code in the .done block?

Upvotes: 0

Views: 496

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370689

The getData() expression you have immediately calls the function on pageload. Then you attach a .done handler to it.

It sounds like you want a function that calls $.ajax and attaches .done to it, like:

function getData() {
    console.log('enter getData');
    $.ajax({ url: './testajax.html', type: "POST" })
        .done(function (data) {
            console.log('enter done');
            alert(data);
        });
}

Then attach getData as an event handler somewhere.

Don't use inline handlers. Use .addEventListener or jQuery's .on('click' instead.

Upvotes: 1

Related Questions