Cross Domain Ajax in Chrome Extensions Failing Inside Functions

Question

My extension is doing a cross-domain ajax post -- whenever I perform the function:

$.ajax({
    crossDomain: true,
    type: 'post',
    url: 'url/to/my.php',
    data: {
        "username" : $user,
        "score"  : $score,
        "action" : "update"
    },
    success: function (data) {
        if (data.replace(/"/g,"") === 'true') {
            $('#form-container').html('<p>Score!</p>');
        } else {
            $('#form-container').prepend('<p>No score.</p>');
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(thrownError);
        console.log('error');
    }
});

The problem is, if I place this call outside of any containing functions (on its own) then it will run just fine. The second I place this inside of a function Chrome cancels the ajax call. I don't get any errors, console logging inside the call doesn't send anything to console, and the only error I see is in Developer Tools when recording Network (where it shows the request being canceled). Is this by design or am I missing something?

It's using form data in the ajax call, so leaving it on its own isn't really an option. Are there other suggested methods for performing the same action?

The full code is:

$(document).ready( function () {
    $('#score').submit( function (e) {
        var user = $('#username').val();
        var score = $('#score').val();

        if (user && score) {
            send_score(user, score);
        }
    });
});

function send_score(user,score) {
    console.log(user + ' ' + score);
    $.ajax({
        crossDomain: true,
        type: 'post',
        url: 'url/up/my.php',
        data: {
            "username" : user,
            "score"  : score,
            "action" : "login"
        },
        success: function (data) {
            if (data.replace(/"/g,"") === 'true') {
                $('#form-container').html('<p>Score!</p>');
            } else {
                $('#form-container').prepend('<p>No score.</p>');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(thrownError);
            console.log('error');
        }
    });
}

Thanks in advance.

I ended up placing 'return false;' at the end of my $(document).ready() function, and the ajax calls are going through now. Referenced in this post: http://stackoverflow.com/questions/7577275/jquery-ajax-requests-are-getting-cancelled-without-being-sent — DeliriumTremSTL, Aug 29 '14 at 18:21

score 0 · Answer 1 · answered Aug 29 '14 at 17:33

0

I notice for your ajax call be successfull you need to pass two variables $user and $score.. is it possible that they might have fallen out of scope when you placed the entire call inside a function? and thus maybe cancelling the ajax call? However if they are present in the global scope then it should be fine.. could you just check if the variables are undefined or not? Might be the problem!

answered Aug 29 '14 at 17:33

Lakmal Caldera

1,001
2
12
25

If I log out the variables just prior to the ajax call, and inside of the function, they appear correctly in console. For good measure I defined the variables globally and it still occurs. – DeliriumTremSTL Aug 29 '14 at 17:45

score 0 · Accepted Answer · answered Aug 29 '14 at 18:23

After hours of searching, I discovered that this function:

$(document).ready( function () {
    $('#score').submit( function (e) {
        var user = $('#username').val();
        var score = $('#score').val();

        if (user && score) {
            send_score(user, score);
        }
    });
});

needed a line at the end:

return false;

Now the function is working and the ajax call is being made successfully.

Cross Domain Ajax in Chrome Extensions Failing Inside Functions

2 Answers2