Uncaught SyntaxError: Unexpected token :

Question

I am running an AJAX call in my MooTools script, this works fine in Firefox but in Chrome I am getting a Uncaught SyntaxError: Unexpected token : error, I cannot determine why. Commenting out code to determine where the bad code is yields nothing, I am thinking it may be a problem with the JSON being returned. Checking in the console I see the JSON returned is this:

{"votes":47,"totalvotes":90}

I don't see any problems with it, why would this error occur?

vote.each(function(e){
  e.set('send', {
    onRequest : function(){
      spinner.show();
    },
    onComplete : function(){
      spinner.hide();
    },
    onSuccess : function(resp){
      var j = JSON.decode(resp);
      if (!j) return false;
      var restaurant = e.getParent('.restaurant');
      restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
      $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
      buildRestaurantGraphs();
    }
  });

  e.addEvent('submit', function(e){
    e.stop();
    this.send();
  });
});

Answer 1

i never trust the onComplete + onSuccess +onFailure combo, personally. the way I look at it, onComplete is all you ever need. in your example, the onComplete just does not fire in chrome or IE8 but works in FF 3.6.7...

anyway, http://fragged.org/dev/jsonProblem.php - i had a play there and it works based around code which relies on onComplete only.

if it fails, j will evaluate to null/false so you can handle that.

document.getElements("div.restaurant form").each(function(e){
    e.set('send', {
        onComplete : function(){
            spinner.hide();
            var j = JSON.decode(this.response.text);
            if (!j) return false;
            var restaurant = e.getParent('.restaurant');
            restaurant.getElement('.votes').set('html', j.votes + " vote(s)");
            document.getElements('div.restaurant').getLast().set('html', "Total Votes: " + j.totalvotes);
        }
    });

    e.addEvent('submit', function(e){
        e.stop();
        spinner.show();
        this.send();
    });
});

good luck

Answer 2

I have just solved the problem. There was something causing problems with a standard Request call, so this is the code I used instead:

vote.each(function(element){                
  element.addEvent('submit', function(e){
    e.stop();
    new Request.JSON({
      url : e.target.action, 
      onRequest : function(){
        spinner.show();
      },
      onComplete : function(){
        spinner.hide();
      },
      onSuccess : function(resp){
        var j = resp;
        if (!j) return false;
        var restaurant = element.getParent('.restaurant');
        restaurant.getElements('.votes')[0].set('html', j.votes + " vote(s)");
        $$('#restaurants .restaurant').pop().set('html', "Total Votes: " + j.totalvotes);
        buildRestaurantGraphs();
      }
    }).send(this);
  });
});

If anyone knows why the standard Request object was giving me problems I would love to know.

Answer 3

Just an FYI for people who might have the same problem -- I just had to make my server send back the JSON as application/json and the default jQuery handler worked fine.

Answer 4

I was having a similar problem. My AJAX calls were working in FF but not Chrome. Getting rid of tab characters fixed it for me.