javascript - Backbone.js submit event not firing -
i'm @ loss what's going on here. think it's because i'm loading form later on in view, i'm not sure. here's view.
define([ 'jquery', 'underscore', 'backbone', 'serializeform', 'backboneforms', 'text!templates/services/servicestemplate.html', 'models/servicemodel', 'forms/newserviceform', 'text!templates/forms/serviceformtemplate.html', 'collections/regionscollection', 'collections/userscollection' ], function($, _, backbone, serializeform, backboneforms, servicestemplate, servicemodel, newserviceform, serviceformtemplate, regionscollection, userscollection){ // form var form; // what's gonna clicked var clicked; // user's credentials if($.cookie('userinfo')) var usercreds = json.parse($.cookie('userinfo')); var servicesview = backbone.view.extend({ el: '.body', render: function() { // load var servicestemplate = _.template(servicestemplate); this.$el.html(servicestemplate); }, events: { 'click .btn': 'loadform', 'submit': 'addservice' }, loadform: function(ev) { // save clicked clicked = $(ev.target).html(); // save scope var = this; // create regions collection var regionscollection = new regionscollection(); var servicemodel = new servicemodel(); var serviceformtemplate = _.template(serviceformtemplate); // create form form = new newserviceform({ template: serviceformtemplate, model: servicemodel }).render(); $("#form").html(form.el); $('.body').on('submit', 'form', function() { alert( "submit firing" ); }); }, addservice: function(ev) { var errors = form.commit(); if(!errors) { var newservice = $(ev.currenttarget).serializeform(); newservice.cluster = clicked; console.log(newservice); } else { $.each(errors, function(key, value) { $("[name='" + key + "']").closest(".control-group").addclass("error"); $("[name='" + key + "']").closest(".control-group").find(".text-error").html("<small class='control-group error'>" + value.message + "</small>"); }); } return false; } }); return servicesview; }); i've tried bind event form gets generated and, can see above, i've tried catching submit event. on appreciated.
edit: here's index page looks like
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>backbone auth</title> <?php include('includes/head_includes.php'); ?> </head> <body> <div class="header"></div> <div class="container body"> </div> <?php include('includes/js_files.php'); ?> </body> </html> and here's form looks like. .control-groups populated fields using backbone-forms extension.
<form id="addservice" accept-charset="utf-8"> <div id="error" class="alert alert-error" style="display:none;"></div> <fieldset> <div class="control-group"> <div class="controls"> <label>region</label> <div class="text-error"></div> <div data-editors="region"></div> </div> </div> <div class="control-group"> <div class="controls"> <label>stage</label> <div class="text-error"></div> <div data-editors="stage"></div> </div> </div> <div class="control-group"> <div class="controls"> <label>description</label> <div class="text-error"></div> <div data-editors="description"></div> </div> </div> <div class="control-group"> <div class="controls"> <label>primary contact</label> <div class="text-error"></div> <div data-editors="contact"></div> </div> </div> <input id="addservice" class="btn btn-primary" type="submit" name="submit" value="add service" /> </fieldset> </form> edit2: here newserviceform
define([ 'jquery', 'underscore', 'backbone', 'backboneforms' ], function($, _, backbone, backboneforms){ var newserviceform = backbone.form.extend({ schema: { region: { type: 'select', title: 'disaster region', options: [], validators: [ 'required' ] }, stage: { type: 'select', title: 'stage', options: [ {val: "", label: "select one"}, {val: "assessment", label: "assessment"}, {val: "planned", label: "planned"}, {val: "commenced", label: "commenced"} ], validators: [ 'required' ] }, description: { type: 'textarea', title: 'description', editorattrs: { maxlength: 140 }, validators: [ 'required' ] }, contact: { type: 'select', title: 'primary contact', options: [], validators: [ 'required' ] } } }); return newserviceform; });
woop!! figured out! went ahead , moved rendering of form render function of view. render looks this:
render: function() { var servicemodel = new servicemodel(); var serviceformtemplate = _.template(serviceformtemplate); // create form form = new newserviceform({ template: serviceformtemplate, model: servicemodel }).render(); // load var servicestemplate = _.template(servicestemplate); this.$el.html(servicestemplate); } everything else stays same. , works!
Comments
Post a Comment