Backbone.js submit event not firing

Question

I'm at a loss as to what's going on here. I think it's because I'm loading the form later on in the view, but I'm honestly not sure. Here's my 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){

    // The form
    var form;

    // What's gonna be clicked
    var clicked;

    // Get the user's credentials
    if($.cookie('UserInfo'))
        var userCreds = JSON.parse($.cookie('UserInfo'));

    var ServicesView = Backbone.View.extend({
        el: '.body',
        render: function() {
            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        },
        events: {
            'click .btn': 'loadForm',
            'submit': 'addService'
        },
        loadForm: function(ev) {
            // Save what was clicked
            clicked = $(ev.target).html();

            // Save the scope
            var that = this;

            // Create the regions collection
            var regionsCollection = new RegionsCollection();

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the 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 to bind the event to just the form that gets generated and, as you can see above, I've tried just catching any submit event. Any help on this is greatly appreciated.

EDIT: Here's what my 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 roughly what my form looks like. The .control-groups all get populated with fields using the 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 is my 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;
});

are you seeing a submit event firing at all on your page when you submit that form? Try registering a handler using jQuery on the parent of your #form for any submits, as per: http://stackoverflow.com/a/9331127/323005 — damienc88, May 22 '13 at 03:13
@damienc88 So I added `$('body').on('submit', '#form', function() { alert( "submit firing" ); });` underneath `$("#form").html(form.el);` and it's not registering a submit event at all. — Willem Ellis, May 22 '13 at 03:37
@muistooshort I've added my index page and form template so you can get an idea of what it looks like. — Willem Ellis, May 22 '13 at 03:40
Try again using 'form', not '#form', you're specifying an element tag, not a selector. You can specify this however you want, even from the browser console, or document.load, if your body exists at that point. — damienc88, May 22 '13 at 03:43
@damienc88 I tried 'form' and still no sign of a submit event. — Willem Ellis, May 22 '13 at 03:50
Where is `#form`? Does the `$("#form").html(form.el);` actually do anything? Is `#form` inside `.body`? — mu is too short, May 22 '13 at 04:25
@muistooshort that does actually load the form into the #form div which is a child of .body. — Willem Ellis, May 22 '13 at 04:46
I'd recommend simplifying your code: strip out everything except the bare minimum structure. Right now there's too much noise to be able to spot the problem. — mu is too short, May 22 '13 at 04:51
Can you please post your "forms/NewServiceForm"? BTW, you should split your functionalities in smaller submodules. — Rifat, May 22 '13 at 09:56
@Rifat I've posted the NewServiceForm. How would you suggest splitting it up? — Willem Ellis, May 22 '13 at 13:55
@muistooshort I've simplified the code to just the absolute barebones. As you'll notice, I have a click event that's triggering the rendering of the form. Could this have anything to do with the submit event not being recognized? — Willem Ellis, May 22 '13 at 14:06
Okay so I had the form just directly load in the render function and it is recognizing the submit event. So something about generating it after a click event is messing it up. Any way around this? — Willem Ellis, May 22 '13 at 14:37

score 0 · Accepted Answer · answered May 22 '13 at 18:31

WOOP!! Finally figured this out! I went ahead and moved the rendering of the form into the render function of the view. So now render looks like this:

        render: function() {

            var serviceModel = new ServiceModel();

            var serviceFormTemplate = _.template(ServiceFormTemplate);

            // Create the form
            form = new NewServiceForm({
                template: serviceFormTemplate,
                model: serviceModel
            }).render();

            // Load everything
            var servicesTemplate = _.template(ServicesTemplate);
            this.$el.html(servicesTemplate);
        }

Everything else stays the same. And now it works!

Backbone.js submit event not firing

1 Answers1