ajax not setting value on declared variable

Question

I have a problem with this javascript function. What I'm trying to do is, finding a specific "Material Description" using ajax call. When I try to console.log the ajax function, the data is showed up. But when I'm setting to an array, it won't set the array value and skipped. Using "async: false" give me this warning:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience.

without async will give me undefined result.

$('#iBarcode').keypress(function (keyPressed) {
            if (keyPressed.which == 13) {
                var barcode = $('#iBarcode').val()
                var splitted = new Array()
                var arrayCnt = -1;
                for (var i = 0; i < barcode.length; i++) {
                    var flagStart;
                    if (barcode.charAt(i) == ')') {
                        flagStart = true
                        i += 1
                        arrayCnt += 1
                        splitted[arrayCnt] = ''
                    }
                    if (barcode.charAt(i) == ('(')) {
                        flagStart = false
                    }
                    if (flagStart == true) {
                        splitted[arrayCnt] = splitted[arrayCnt] + barcode.charAt(i)
                    }
                }
                console.log(setMatDesc(splitted[0])) //value showed here
                splitted[arrayCnt + 1] = setMatDesc(splitted[0]) //value not showed here and skipped?
                splitted[arrayCnt + 1] = currentDate

                $('#iBarcode').val('').focus
                console.log(splitted)
            }
        })

        function setMatDesc(MatID) {
            var result
            $.ajax({
                url: '@Url.Action("Get_MatDesc")',
                type: 'GET',
                async: false,
                data: { MatID: MatID },
                success: function (data) {
                    result=data
                },
                error: function (xhr) {
                    alert('error');
                }
            })

            return result
        }

I would appreciate the help, thanks.

u should understand how async request work, when u call setMatDesc(splitted[0]), and ajax will be triggered, but main thread will not wait for ajax complete, so your splitted[arrayCnt + 1] = setMatDesc(splitted[0]) will not work, because value haven't come back, u can take a look about promise for javascript. — BeiBei ZHU, Nov 28 '18 at 04:20
Related: "[jQuery has deprecated synchronous XMLHTTPRequest](https://stackoverflow.com/questions/27736186/jquery-has-deprecated-synchronous-xmlhttprequest)." Then, "[Why is my variable unaltered after I modify it inside of a function?](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron)" and/or "[How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call)" — Jonathan Lonowski, Nov 28 '18 at 04:23

score 1 · Answer 1 · answered Nov 28 '18 at 04:20

1

You need to provide a call back function which will get executed after ajax call completes like:

function setMatDesc(MatID, calback) {
        var result
        $.ajax({
            url: '@Url.Action("Get_MatDesc")',
            type: 'GET',
            async: false,
            data: { MatID: MatID },
            success: function (data) {
                callback(data); // note this
            },
            error: function (xhr) {
                alert('error');
            }
        });
}

and at calling end do like:

setMatDesc(splitted[0],function(result) {

    splitted = result;
    splitted[arrayCnt + 1];
    splitted[arrayCnt + 1] = currentDate;

});

The code might not work as i have not tested but this is the way to return the data from a function doing ajax call as the ajax call executes asynchronously and the function executes the body before the ajax call completes back from the server.

answered Nov 28 '18 at 04:20

Ehsan Sajjad

61,834
16
105
160

still learning about this async thing. is it possible without async: false? – HealMee Nov 28 '18 at 06:32
this will work with `async:true` – Ehsan Sajjad Nov 28 '18 at 06:38
hmm true, but it only show using alert(result). using the result to assign variable not working – HealMee Nov 28 '18 at 06:41
i have to add "await" after setMatDesc(), and its working with async: true – HealMee Nov 28 '18 at 06:58

ajax not setting value on declared variable

1 Answers1