posting data with backbone form post - backbone.js

Question

i am unable to get form post to work. below is snippet for form view with event handling but I am unable to see form data printed in console from getFormData. I am not sure if this is right approach to form handling but was just trying it out reading stuff from net.
define(['backbone', 'handlebars', 'jquery', 'events', 'models/article'], function(Backbone, Handlebars, $, Events, Article) {
var ArticleFormView = Backbone.View.extend({
events: {
"submit": "createArticle"
},
tagName: "form",
id: "article-form",
className: "articleform",
initialize: function() {
this.model = new Article();
this.render();
},
render: function() {
var template = $("#createarticletemplate").html();
console.log("template=" + template);
var compiled = Handlebars.compile(template);
var html = compiled(this.model.attributes);//passed when we do new View()
console.log("compiled template=" + template);
this.$el.html(html);
return this;
},
createArticle: function(e) {
e.preventDefault();
console.log("createArticle event happened" + $(this.el).parent().html());
var data = this.getFormData( $(this.el).parent() );
console.log(JSON.stringify(data));
this.model.save(data, {
success: function(model, response, options) {
console.log("create article success");
Events.trigger("router:navigate", "#");
},
error: function(model, response, options) {
return console.log("create article failure:" + response.responseText);
}
});
},
//Auxiliar function
getFormData: function(form) {
console.log(form);
var unindexed_array = form.serializeArray();
console.log(unindexed_array.length);
var indexed_array = {};
$.map(unindexed_array, function(n, i){
console.log("array:" + n);
indexed_array[n['name']] = n['value'];
});
return indexed_array;
},
}); //artifleformview
return ArticleFormView;
});
snippet of routes/index.js
exports.articles.createone = function(req, res) {
console.log(req.body);
//res.json(req.body);
db.articles.insert(req.body);
}
article.js model:
define(['backbone'], function(Backbone) {
var Article = Backbone.Model.extend({
url: "/article",
idAttribute: "_id"
});
return Article;
});
console log:
createArticle event happened<form id="article-form" class="articleform"><label>title </label><input type="text" name="title"><p></p><label>body </label><input type="text" name="body"><p></p><label>category </label><input type="text" name="category"><p></p><input type="submit" value="create article"></form> articleform.js:27
[div.form, prevObject: m.fn.init[1], context: form#article-form.articleform, jquery: "1.11.1", constructor: function, selector: ""…]
articleform.js:44
0 articleform.js:46
{} articleform.js:29
create article success articleform.js:33
index called on router
Adding createArticle error log:
POST http://localhost:3000/article net::ERR_EMPTY_RESPONSE jquery.js:4
send jquery.js:4
m.extend.ajax jquery.js:4
e.ajax backbone.js:1
e.sync backbone.js:1
i.extend.sync backbone.js:1
i.extend.save backbone.js:1
Backbone.View.extend.createArticle articleform.js:33
m.event.dispatch jquery.js:3
r.handle
If some one wants more code let me know I can put all code here but its too many files so better would be some link I attach if needed.
Above log for error prints in console thought the article is getting persisted fine.
Regards,
Miten.

Answer 1

Looks like you need to replace
var data = this.getFormData( $(this.el).parent() );
with
var data = this.getFormData(this.$('form'));
or
var data = this.getFormData(this.$el.closest('form'));