Wait until ajax done before returning the function

Question

I use this code to get a message from the server and print it to the frontend:

var message = getMessageFromServer();
$('.result').html(message);

function getMessageFromServer() {
    var result = null;

    $.ajax({
        url: 'index.php',
        type: 'GET',
        success: function (msg) {
            result = msg;
        }
    });

    return result;
}

It obviously isn't working because as how javascript works, the line return result is running before the ajax done, therefore my function getMessageFromServer always return null.

I have searched all day about this problem and got many answers such as setting async to false, using when done, callback, re-structuring the code to be more ajax-friendly, etc. However, I'm using a framework that won't let me freely re-structuring my code, so I need to make the question myself: How do I print the message to the frontend with below conditions:

The 2 first lines must not be changed, I need to return the result to message, so it can be print to the frontend.
Not using the async: false because it's bad for user experience.
We can create more method, as long as it is used within the function getMessageFromServer

P/s: If you're wondering, the framework I'm using is Magento and I'm trying to add a custom validation rule with AJAX, but I the main problem is javascript so I didn't put it into the tags.

Can't you just move the return statement inside the "success" callback? — GrafiCode, Jul 26 '19 at 16:08
It doesn't matter. If you move `return` inside the `success`, you will just get "undefined" instead of "null", because javascript will run the function to the end without waiting for the AJAX to be done. — Mee, Jul 26 '19 at 16:10
Ok I see it now, it works setting the HTML directly instead of returning it, thanks for the explaination — GrafiCode, Jul 26 '19 at 16:12
*"The 2 first lines must not be changed"* - then you're stuffed as that's simply not how *asynchronous* works. — freedomn-m, Jul 26 '19 at 16:19

score 0 · Answer 1 · answered Jul 26 '19 at 16:10

0

It's the nature of JS and asynchronous callbacks. Instead of assigning the var message = getMessageFromServer(), you should instead set the $('.result') from within the success callback.


getMessageFromServer();

function getMessageFromServer() {

    $.ajax({
        url: 'index.php',
        type: 'GET',
        success: function (msg) {
            $('.result').html(msg);
        }
    });

    return result;
}

answered Jul 26 '19 at 16:10

André Tzermias

1,172
10
13

As I state in the question, the first two line must not be changed, and the message must be returned from `getMessageFromServer`. All because of the framework I'm working on. – Mee Jul 26 '19 at 16:13
@Mee it's simply not possible to do that. – Pointy Jul 26 '19 at 16:15
It is possible using promise object @Pointy – Rishab Jul 26 '19 at 16:24
@Rishab read the question: "the first 2 lines must not be changed". Those lines of code do not anticipate receiving a Promise object, so the question is impossible as posed. – Pointy Jul 26 '19 at 16:25
Let him try this https://jsfiddle.net/Luo2n6dh/ – Rishab Jul 26 '19 at 16:31
@Rishab the jsfiddle is completely blank, could you check it again? – Mee Jul 27 '19 at 03:42
@Mee well, what I suggested does work, https://glitch.com/edit/#!/economic-expansion – André Tzermias Jul 29 '19 at 16:42

Wait until ajax done before returning the function

1 Answers1