We Keep Coding

Backbone.js troubles receiving AJAX response

I'm having troubles catching a response from Rails controller upon saving a model. I can see that the XHR response is generated in the Network tab of Chrome's devtools, but success or error functions don't fire. I suspect that this is a consequences of forcing post method and different url directly in the view, but I'm not sure, maybe I've messed up some syntax. Here's the snippet of the the save function in coffee:
save: (user_id) =>
model = #model
if $(".task").val()
#$el.find(".task").each ->
model.set
body: #value
user_id: user_id
task_title_id: model.id
return
model.save null, type: 'post', url: '/tasks',
success: (model, response) ->
console.log 'tasks saved!'
error: (model, response) ->
console.log "error! ", response.responseText
else
console.log 'nothing to save'
and compiled JS:
save = function(user_id) {
var model;
model = this.model;
if ($(".task").val()) {
this.$el.find(".task").each(function() {
model.set({
body: this.value,
user_id: user_id,
task_title_id: model.id
});
});
return model.save(null, {
type: 'post',
url: '/tasks'
}, {
success: function(model, response) {
return console.log('tasks saved!');
},
error: function(model, response) {
return console.log("error! ", response.responseText);
}
});
} else {
return console.log('nothing to save');
}
};
Trivia: I have to generate a new Task view for each existing TasktTitle and then submit these new Tasks to the server. Being very new to the Backbone I couldn't come up with a better idea other than render TaskTitles collection and add input field for each TaskTitle view and then force post method and /tasks url on save. It does feel quite dirty, but it works as expected with the exception of catching the response, which is a crucial part because there is more logic happens on success\error.

Relational query with Parse

So I am trying to get the comments associated with a blog, Using Parse Javascript SDK
here is my code
var Blog = Parse.Object.extend("Blog");
var query = new Parse.Query(Blog);
query.get("tFlENZ3ege", {
success: function(blog) {
// Next, retrive comment based on blog
var commentQuery = new Parse.Query(Comment);
commentQuery.equalTo("parent", blog);
commentQuery.find({
success: function(comments) {
console.log("Success getting comments");
},
error: function(object, error) {
console.log(error);
}
});
},
error: function(object, error) {
}
});
I am able to retrieve the blog object based on the objectId.
However, I can't figure out how to get the associated comment objects

Backbone.js Unable to parse response from collectio.toJSON()

I am learning Backbone and it would be great if someone can help me with this issue. After I do a fetch on my collection, in success callback I get the parsed data using collection.toJSON(), this actually returns an object and I am unable to get anything out of this object. This object actually has data that I need.
My question is how do I access rows property in my object. Here is my code for your reference
var testCollection = Backbone.Collection.extend({
model:myModel,
url: '/myApiEndPoint',
data: '',
initialize: function(models, options) {
this.data = models.data;
},
fetch: function(options) {
var ajaxConfig = {
url: this.url,
data: this.data,
type: 'POST',
dataType: 'text',
contentType: 'text/xml',
parse: true
};
options = _.extend({}, ajaxConfig, options);
return Backbone.Collection.prototype.fetch.call(this, options);
},
parse: function(xmlResponse) {
// I have some parsing logic to extract uid and rows from my xmlResponse
return {
uid: uid,
rows: rows
};
},
});
var collObj = new testCollection({data: xmlQuery1});
collObj.fetch({
success: function(collection){
// This code block will be triggered only after receiving the data.
console.log(collection.toJSON());
}
});

As the name toJSON suggests, it returns you the array of JSON objects where each object is a Model's JSON object. You can fetch the required properties in this way:
collObj.fetch({
success: function(collection){
// This code block will be triggered only after receiving the data.
console.log(collection.toJSON());
var uid = 'uid-of-an-object-to-access';
var rows = collection.get(uid).get('rows');
console.log(rows);
}
});

Override sync method in backbone

I'm doing a model named person and i use parse.com javascript api. To send model to parse.com ì've created a my function send but i think it is wrong. I think that i have to override sync method with api parse.com and after use save method on the model created. It's right?
var Person = Backbone.Model.extend({
defaults: {},
initialize:function() {
console.log("inperson");
},
validate:function() {
console.log("validate");
},
send:function() {
var user = new Parse.User();
user.set("username", this.get("username"));
user.set("password", this.get("password"));
user.set("email", this.get("email"));
user.signUp(null, {
success: function(user) {
},
error: function(user, error) {
alert("Error: " + error.code + " " + error.message);
}
});
}
});
return Person;
});

Backbone only uses one sync method (Backbone.sync). All methods collections and models that are "talking" with the server goes through this one.
You can simply overwrite it by saying:
Backbone.sync = function(method, model, options) {
// method is send through methodMap witch is an object:
//var methodMap = {
// 'create': 'POST',
// 'update': 'PUT',
// 'patch': 'PATCH',
// 'delete': 'DELETE',
// 'read': 'GET'
//};
// model refers to the active model and you can use model.attributes to get all the attributes.
// So in here you can write your integration with parse.com and not change anything else while using backbone.
// Remember to trigger `sync` etc.
};
But I can see that parse.com allready have a REST-api so maybe this is not the solution.

How do you find the error generated by a backbone fetch

I'm new to backbone but I've written a basic model and when trying to fetch data for my model. I know the server is returning the data but fetch is calling the error callback.
That's fine but I don't know how I can find what error is being generated.
Here's the relevant code:
mUser = Backbone.Model.extend({
urlRoot: CURRENT_URL+'user',
defaults: {
name: '',
age: 22,
email: ''
},
initialize: function(){
}
});
user = new mUser({'id':1});
var x = user.fetch({
error: function(model, xhr, options){
alert('Error on fetch')
console.log(xhr.responseText);
},
success: function(model, response, options) {
alert(user.toJSON());
}
})
console.log('x email',x.email)
As I mentioned, the responseText does have the data I expect to see from the server, which is:
{'id':'1','name':'joe','age':'25','email':'joe#example.com'}
Maybe I should mention that I'm, doing this as part of a PhoneGap android app. I don't think it's significant to the problem I'm having but it does limit my debugging options.

You are probably getting a parsererror when jQuery tries to parse the JSON response from your server. To check if you're getting a parsererror, add a complete callback and check the textStatus parameter. e.g.
user.fetch({
complete: function(xhr, textStatus) {
console.log(textStatus);
}
});