1

Using jQuery post() I'm calling an ajax action which returns json ({"Success": "true" } or {"Success": "false"}). After getting json I'm trying to set the value of a hidden HTML element to the Success value in the returned object. After setting the hidden element, it's still empty (not undefined) as per Firebug's watch expression. But after making another identical call the value is set properly. What am I doing wrong?

JavaScript

function setValue() {
            $.post('/action', { "data": "dummy" }, function (data) {
                if (eval(data.Success))
                    $('#hiddenResult').prop('value', 'true');
                else
                    $('#authResult').prop('value', 'false');
            }, "json").fail(function () {
                $('#hiddenResult').prop('value', 'false');
            });
        }

HTML

<input type="hidden" id="hiddenResult" name="hiddenResult" />
joym8
  • 4,014
  • 3
  • 50
  • 93
  • 1
    Have you tried using [.val()](http://api.jquery.com/val/) instead of `.prop()`? – kei Nov 07 '13 at 18:43

1 Answers1

2

Use val() to modify the value of an input:

$.post('/action', { "data": "dummy" }, function (data) {
    if (data.Success)  // might need to be: if (data.Success == 'true') {
        $('#hiddenResult').val('true');
    else
        $('#authResult').val('false');
    }, "json").fail(function () {
        $('#hiddenResult').val('false');
});

Also, you don't need to use eval there (or anywhere, for that matter).

EDIT: This comment by Jason was very helpful.

Community
  • 1
  • 1
Jason P
  • 26,984
  • 3
  • 31
  • 45
  • Thanks, This is what I noticed: - `data.Success` or `data.Success=='true'` did not make any difference. Now the hidden element's value is not getting set at all. With eval it was at least getting set in the second ajax call. - using `val()` did not make any difference, same results with and without `eval()` Here is the exact json copy pasted from firebug: `{"Success":true,"Message":null,"Urls":null}` – joym8 Nov 07 '13 at 19:43
  • Try adding some logging. Log `data.Success` in the success handler, and `arguments` in the `fail` callback. – Jason P Nov 07 '13 at 19:45
  • Do you have more than one element with the id `hiddenResult`? How do you know the value isn't being set? – Jason P Nov 07 '13 at 20:00
  • Only one `hiddenResult` element (very small page). I'm using firebug's watch expression feature (add watch: `$('#hiddenResult').val()` or `$('#hiddenResult').prop('value')`) to check the latest value of the `hiddenResult` element. It gets set in the second call, but only when I use `eval()`. Using `data.Success` as-is does not set the `hiddenResult` no matter how many time I call the action. – joym8 Nov 07 '13 at 20:06
  • Just discovered I need to right click and hit refresh on the watch expression in firebug. That's bit odd but is definitely some progress. – joym8 Nov 07 '13 at 20:15
  • Do race conditions apply in JavaScript also? Noticed that if I put an `alert` right after the success handler of `post()`, and another `alert` in the function _that_ _calls_ `setValue()` function above, both alerts fire simultaneously _sometimes_ in the _first_ call to `setValue()`. – joym8 Nov 07 '13 at 21:01
  • Is it possible that the page is doing a post and refreshing? Javascript is single-threaded, but the browser basically pushes tasks into a queue for the js thread to execute when it's available, and there's not always a guarantee on the order tasks get queued. – Jason P Nov 07 '13 at 21:10
  • It's not refreshing. I've tried all kinds of combinations including using a non-hidden element. Everything works as expected, just that the method that calls `setValue()` does not get the correct value of `hiddenResult` after the first call to `setValue()`. The call originates from a jQuery click event. – joym8 Nov 07 '13 at 21:35
  • 1
    Oh! Are you doing something like this? http://jsfiddle.net/GngLH/ If so, the ajax call is async, so the function returns before the ajax call finishes. See [this SO question](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call). – Jason P Nov 07 '13 at 21:40
  • Yes - I'm doing same thing. And was trying to avoid callback, since down the road my code had to face the user's popup blocker, which apparently does not like a window.open in callback function. But then seems like no other option. – joym8 Nov 07 '13 at 21:48
  • When using ajax, you need to have callbacks somewhere. You can use a `deferred` instead, but I think that uses callbacks behind the scenes. – Jason P Nov 07 '13 at 21:48