javascript updating hidden value

Question

I have a function:

function add() {
    $.ajax({
        type: "POST",
        url: "add.php",
        async: "false", // Tried both- async: "false/true"
        data: {
            name: 'Test',
        },
        success: function(data) {
            document.getElementById('id').value = data;
            id = document.getElementById('id').value;
            alert(id); // alerts here proper value
        }
    });

}

function testMyFunction() {
    add();

    // 'id' was set in add function.
    id = document.getElementById('id').value;
    alert(id); // Here does not alert value but blank(no value)
    // This 'id' value is used at other place but here is issue. 
}

Calling testMyFunction() function gives above mentioned issue.

What could be a issue?

Would you please indent your code properly the next time?! The code style was horrible. Also, you do NOT want async: false. Just call your code asynchronously using a callback after the request has been successful. — ThiefMaster
– ThiefMaster, Commented Dec 30, 2014 at 12:35
@ThiefMaster, is telling someone that their post was horrible really the best way to welcome a first-time asker to the community? — James Hill
– James Hill, Commented Dec 30, 2014 at 12:36
True, could have been worded a bit nicer. On the other side, one should already write properly indented code in the first place. — ThiefMaster
– ThiefMaster, Commented Dec 30, 2014 at 12:37
Faced kinda same type of welcome in my case also in numerous occasions. — Pratip Ghosh
– Pratip Ghosh, Commented Dec 30, 2014 at 12:38

Michal Wilkowski · Accepted Answer · 2014-12-30 12:37:35Z

3

$.ajax is an asynchronous call and it updates "id" field after if it is completed. Your code checks for its value in function testMyFunction() instantly after the invocation (and before success: function(data) is invoked).

answered Dec 30, 2014 at 12:37

Michal Wilkowski

7475 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Dunai · Accepted Answer · 2014-12-30 12:49:51Z

JavaScript is an asynchronous language. In a nutshell, this means that your code should NEVER block: functions should either complete immediately or get called later, i.e. after some input/output operation is complete (e.g. AJAX request).

Edited: BTW, your code does not work because even with async: false the success function is called in the event loop, thus this can occur even after the code that follows synchronous AJAX. If you use async: true, the AJAX will block, but the success function will be called asynchronously in any case. So to handle data synchronously, you have to work not with success function, but rather with an object that is returned by $.ajax() call:

var xhr = $.ajax({
    type: "POST",
    async: false,
    url: "add.php",
    data: {
        name: 'Test',
    },
});
alert(xhr.responseText); // Alerts result

Thus, you should never use async: false. Instead, better refactor your code to be like this:

function add(callback) {
    $.ajax({
        type: "POST",
        url: "add.php",
        data: {
            name: 'Test',
        },
        success: callback
    });
}

function testMyFunction() {
    add(function(data) {
        // This closure will be called AFTER the request is complete.
        document.getElementById('id').value = data;
        alert(data); // Alerts proper value.
    });
}

Basically, this pseudo-code is WRONG:

result1 = action1();
result2 = action2(result1);
result3 = action3(result2);

...and should be written like this:

action1(function(result1) {
    action2(result1, function(result2) {
        alert(action3(result2));
    });
});

Never say never. ;) Anyway, do you have an idea why calling it synchronously doesn't work in OP's case?

Collectives™ on Stack Overflow

javascript updating hidden value

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related