javascript behaviour in run time differs from debug

Question

I have some problem debugging a script, just because in debug mode all works fine... but not in runtime: I have this function in javascript:

function Add() {
    ... 
    $('#Value').val($('#Value').val()); // Value is a div class="input"
    ...
    $.get('@Url.Action("GetSomeData", "_Shared")', { id: parseInt($('#DataID').val()) },
            function (result) { $('#SomeData').val(result); });

    if ($('#SomeData').val() == "x") {
        $('#tmp').val($('#Value').val());
    }
    else {
        $('#tmp').val("0");
    }
    ...
}

and the controller _Shared simply returns an attribute:

public string GetSomeData(int id)
{
    return unitOfWork.DataRepository.GetByID(id).Something;
}

What happens is when I use a breakpoint in the "if", $('#SomeData').val() has the correct value but if I remove the breakpoint, write a console.log($('#SomeData').val()) and execute, it is alway empty and the $('#tmp').val() is always "0". Can anybody tell me what I'm doing wrong?

Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — James Thorpe, Sep 22 '17 at 16:23
Regarding the duplicate, in this case your "variable" is `$('#SomeData').val()`. — James Thorpe, Sep 22 '17 at 16:24
asynchronicity? ouch! this is new for me, I will explore it, thanks — Joao, Sep 22 '17 at 17:00

score 0 · Answer 1 · answered Sep 22 '17 at 16:30

0

Did you put the event binding on Jquery on load event?

$(function(){
//Your code here
});

If not, maybe in the runtime, jquery had not found your element (#Value) yet, so it will return empty value.

answered Sep 22 '17 at 16:30

tuq

1,328
2
11
21

score 0 · Accepted Answer · answered Sep 22 '17 at 16:39

This is a synchronicity issue. $.get is asynchronous, and the callback you pass it will run when it is finished, not inline with the code where it is written. So your function (result) { $('#SomeData').val(result); }); is running after your if ($('#SomeData').val() == "x") {...

You can fix this by adding the code to run after the $.get to the callback:

$('#Value').val($('#Value').val()); // Value is a div class="input"
...
$.get('@Url.Action("GetSomeData", "_Shared")', { id: parseInt($('#DataID').val()) },
        function (result) {
            $('#SomeData').val(result);
            if ($('#SomeData').val() == "x") {
                $('#tmp').val($('#Value').val());
            }
            else {
                $('#tmp').val("0");
            }
        });

...

Note, it works when you add the breakpoint because that gives your asychronous $.get time to finish and execute.

Exactly. This is the solution I've found too. Thanks! – Joao Sep 22 '17 at 17:31 — Joao, Sep 22 '17 at 17:31

score 0 · Answer 3 · answered Sep 22 '17 at 17:28

Ok, I've found a workaround to this asynchronicity situation:

$.get('@Url.Action("GetSomeData", "_Shared")', { id: parseInt($('#DataID').val()) },
    function (result) {
        if (result == "x") {
            $('#tmp').val($('#Value').val());
        }
        else {
            $('#tmp').val("0");
        }
        $('#SomeData').val(result); 
    });

Testing inside the function works like a charm. Thanks for the clues.

javascript behaviour in run time differs from debug

3 Answers3