javascript return with jQuery.get() not working

Question

I am trying to make a link work if a condition is true for which I am sending a jQuery.get() and checking if the link should jump to the next page or not.

I am using the following code for it:

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            return true;
                        }
                        else {
                            alert("double submit is not allowed");
                            return false;
                        }
                    }
            );
        });
    }
</script>


<a href="<c:url value="/submit" />" onclick="return checkDoubleSubmit();">check double submit</a>

Even if data is not null the page is jumping to the next page. Could someone help me understand what am I doing wrong here?

Thanks.

dku.rajkumar · Answer 1 · 2012-01-22T10:03:40.417

3

That's because ajax call is asynchronous. it wont wait for ajax response. for that either include async = fasle in ajax call. or change the preventDefault.

or change the code as below

<a href="#" id="mylink" for="<c:url value="/submit" />" onclick="checkDoubleSubmit();">check double submit</a>

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            window.location = jq("a#mylink").attr("for");
                        }
                        else {
                            alert("double submit is not allowed");
                        }
                    }
            );
        });
    }
</script>

edited Jan 22 '12 at 10:03

answered Jan 22 '12 at 09:04

dku.rajkumar

18,414
7
41
58

For some reasons it doesn't work even with the code above. If the `checkDoubleSubmit(obj)` ends even before I get the data then why should it work? What am I missing here? Also, would `href` not return the same value as `link`? I can't even find a link attribute associated with ``. – skip Jan 22 '12 at 09:39
It is still forwarding to the next page :(. the value of data is coming out to be `[object XMLDocument]` but what I am sending back from the server is a json of `Long` java data type. It seems as if the `if(data == null)` is not working :(. – skip Jan 22 '12 at 11:12
Finally, I've got this working :). I've pasted the code as an answer. Many thanks to you, ziesemer and bububaba. – skip Jan 22 '12 at 11:29

score 1 · Answer 2 · edited May 23 '17 at 12:28

You are never actually returning any true/false value from your checkDoubleSubmit function. Your return statements are only returning to the anonymous function being used by jq.get.

You could do something like this:

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit() {
        var doubleCheckResult;
        jq(function() {
            jq.get("/checkDoubleSubmit",
                    function(data) {
                        if(data == null) {
                            doubleCheckResult = true;
                        }
                        else {
                            alert("double submit is not allowed");
                            doubleCheckResult = false;
                        }
                    }
            );
        });
        return doubleCheckResult;
    }
</script>

However, this will only get you started. See dku's answer for why, and then see How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request? for details on how to implement it.

This should have been the approach for returning something out of `checkDoubleSubmit()` but how come it doesn't work? I am assuming that `var doubleCheckResult` is `false`. — skip, Jan 22 '12 at 09:42

score 1 · Answer 3 · answered Jan 22 '12 at 09:05

checkDoubleSubmit() does not return a value, regardless of what you get with get(). The execution of checkDoubleSubmit() ends before you get AJAX data through get() as it's an asynchronous call. You won't get success with handling it this way.

One way to do that would be returning false ALWAYS from checkDoubleSubmit(), and then, in the callback function from get(), if the data is OK and you want the submit to go through, submit the form by JavaScript again, this time without any checks so that it submits right away.

score 0 · Accepted Answer · answered Jan 22 '12 at 11:27

I got this working using the following code:

<script type="text/javascript">
    var jq = jQuery.noConflict();
    function checkDoubleSubmit(obj) {
        var checkDoubleSubmitResult;
        jq.ajax({
            url:        "/checkDoubleSubmit",
            success:    function(data) {
                                if(data == null) {
                                    checkDoubleSubmitResult = true;
                                }
                                else {
                                    alert("double submit is not allowed");
                                    checkDoubleSubmitResult = false;
                                }
                            },
            async:      false,
            dataType:   "json"
        });
        return checkDoubleSubmitResult;
    }
</script>
<a href="<c:url value="/submit" />" onclick="return checkDoubleSubmit(this);">check double submit</a>

javascript return with jQuery.get() not working

4 Answers4