Ajax call being skipped

Question

I'm having an issue with the javascript below in which the $.ajax call is not being called. The alert('foo') does happen, but then the data call is completely skipped and the callback is never reached (never get alert('success!'). I don't completely understand callbacks, but this seems like it should be working.

Edit

Edited the script to where I currently stand, as I've read this way is better practice. Still, I can step in to authenticate(), it breaks on url:[...], but then never actually makes the ajax call. I've tried removing the return just to see if that's the problem, but it's producing the same result.

define(["jQuery", "kendo", "modernizr", "app/environment"], function ($, kendo, modernizr, environment) {
    var authenticate = function (username, password) {
        return $.ajax({
            url: environment.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
            type: 'get',
            dataType: 'jsonp'
        });
    }

    var canLogin = function(data) {
        alert('good');
    }

    return {
        viewModel: kendo.observable({
            username: null,
            password: null,
            authenticate: function () {
                var username = this.get('username'),
                    password = this.get('password');

                authenticate(username, password).done(canLogin);
            }
        })
    }
});

I see, thanks. Does anyone have the proper way to do what I'm trying to do? — Tom, Dec 03 '13 at 14:15
see here: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — A. Wolff, Dec 03 '13 at 14:18
Do you get a script error on the ajax line? Or something funny with `environment.apiConnection`? — G. Stoynev, Dec 03 '13 at 21:34
Negative, I even just tried hardcoding it and got the same result. One change I just tried, changing canlogin to not take a callback and `return $.ajax[...]`. Then I called it like this `canLogin(username, password).done(authenticate)` where authenticate just looks like `alert('foo')`... Anyways, same result. — Tom, Dec 03 '13 at 21:40

score 1 · Answer 1 · answered Dec 03 '13 at 14:19

1

Use a callback instead.

var canLogin = function (username, password, callback) {
    $.ajax({
        async: false,
        url: config.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
        type: 'GET',
        dataType: 'jsonp',
        error: function (x, t, r) {
            alert('Error');
        },
        success: callback
    });

}

// use
canLogin("user","passwd",function( data ){
    alert("Im called on authentication success!");
});

answered Dec 03 '13 at 14:19

jonathansamines

41
6

Thanks, I tried this, but it still didn't work. I noticed that the API call isn't happening either (unless I break on $.ajax, and step over it, then it works) – Tom Dec 03 '13 at 14:32

score 1 · Accepted Answer · answered Dec 04 '13 at 21:44

The solution is a mixture of e.preventDefault() and using a callback in the ajax call. Just using the callback didn't resolve the issue, but adding preventDefault to the authenticate function and fixing the callback issue did.

The final, working version, now looks something like this:

define(["jQuery", "kendo", "modernizr", "app/environment"], function ($, kendo, modernizr, environment) {
    function authenticate(username, password, callback) {
        $.ajax({
            url: environment.apiConnection + '/canlogin?userid=' + username + '&password=' + password,
            type: 'get',
            dataType: 'jsonp',
            success: callback,
            error: function (x,t,r) {
                console.log('error')
            }
        });
    }

    function login(canLogin, username, password) {
        if (canLogin == false) {
            alert('Incorrect username or password');
            return;
        }

        alert('good');
    }

    return {
        viewModel: kendo.observable({
            username: null,
            password: null,
            authenticate: function (e) {
                e.preventDefault();
                var username = this.get('username'),
                    password = this.get('password');

                authenticate(username, password, function (canLogin) {
                    login(canLogin, username, password);
                });
            }
        })
    }
});

Ajax call being skipped

2 Answers2