New to Javascript - Callback issue

Question

I am new to Javascript programming coming from a Java and Objective C background. I am looking to learn a bit more about Javascript for hybrid mobile applications.

In doing so I am trying to do a login with a call back but I am having a little trouble understanding both the syntax and the way a callback works.

First up I am calling the following login function which just creates an ajax call to fetch some JSON at the minute for testing purposes:

testLogin.loginWithUsername ("test", loginCallback);

This works OK as I can see the 200 OK Status and the expected JSON in logging.

However the call back "loginCallBack" never gets called.

It is as follows:

loginCallback: {
success: function(id) {
    alert ('success');
}
failure: function (id, error) {
    alert ('failure');
}
}

First off the above gives me a syntax error when I try to run the code, at the success:function(id) line. I can change it and the failure function to = function(id) and it the code runs then but the callback is never called.

I am using a library for the login that states the call back required is an object that needs a success and failure function and the code above is the given example.

So first off I don't understand why the above syntax works in the sample code but gives me an error when I run it?

Secondly am I calling the callback correctly? Both the loginWithUsername call and the loginCallback function are in the same Login.js file.

Answer 1

Here is an example how callback works:

First thing: you need to create a new object containing your functions/methods. Properties and methods are listed comma seperated.

// Creating new object with callback functions
var loginCallback = {
  success: function(id) {
    alert ('success');
  } , // Add a comma
  failure: function (id, error) {
      alert ('failure');
  }
}

function loginWithUsername(username, callback) {
  if (username === 'test') {
    var successId = 1;
    callback.success(successId);
  } else {
    var errorId, errorMsg;
    errorId = 0;
    errorMsg = 'Error';
    callback.failure(errorId, errorMsg);   
  }
}

Now you can call the function:

loginWithUsername('test', loginCallback);

And the result should be 'success'.

Edit: But you can do this without an object, by passing the function directly:

// Creating function
function showMessage(message) {
  alert(message);
}

function loginWithUsername(username, callback) {
  if (username === 'test') {
    callback('success');
  } else {
    callback('failure');   
  }
}

// Pass function
loginWithUsername('test', showMessage); // Result: 'success'
loginWithUsername('abcd', showMessage); // Result: 'failure'

Answer 2

First off the above gives me a syntax error when I try to run the code, at the success:function(id) line.

Each property: value pair in an object literal must be separated with a comma.

}, /* Your comma is missing which is why you get a syntax error */
failure:

---

This:

loginCallback: {

is only acceptable if you want to define a property inside an object literal.

This:

testLogin.loginWithUsername ("test", loginCallback);

is using a variable.

You probably want:

var loginCallback = {

but it is hard to tell without more context.