CODEWITHSUNDEEP
javascriptjquerybackbone.js
pearler
pearler

Reputation: 109

backbone click event not firing on first click

I'm having an issue when I am trying to switch the view after a model save on a click event.

The flow I am trying to create is a reorder process, the user will have a confirmation page to reorder. On clicking submit an api call will execute and the invoice page will load on success.

Currently when I click the submit button the first time nothing happens and when i click again I can get an invoice page. no such issue for the cancel button.

var confirmView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
      var template = _.template( $("#confirmReorder_template").html());
      this.$el.html(template);
    },
    events: {
      "click #submitButton": "submitReorder",
      "click #cancelButton": "cancelReorder"
    },
    submitReorder: function(event){
        var URI='<config property="api.url.itemReorder"/>';
        var ItemReorderModel = new itemReorderModel({url:URI});

        $("#submitButton").click(function(event) {
            event.preventDefault();             
            ItemReorderModel.set('id','1');
            ItemReorderModel.save( {}, {
                success : function() {
                    var response = ItemReorderModel.toJSON();
                    var InvoiceView = new invoiceView({el: $("#itemData")});            
                },
                error : function(model, xhr, options) {

                }
            });
        });
    },
    cancelReorder: function(event){
        document.location.href = "items_list.ctl";
    }
  });

second view

var invoiceView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
      var template = _.template( $("#reorderInvoice_template").html());
      this.$el.html(template);
    },
    events: {
        "click #returnButton": "itemlist",
        "click #printButton": "print"
    },
    itemlist: function(event){
        document.location.href = "items_list.ctl";
    },
    print: function(event){
    }
  });

loading of first view

$(document).ready(function() {
    var ConfirmView = new confirmView({el:$('#itemData')});
});

I'm new to backbone so not sure if I should be using a route, I also have read something about binding, but still trying to get my head around how it all works.

any advice is much appreciated.

Upvotes: 1

Views: 570

Answers (1)

T J
T J

Reputation: 43156

You are binding a new event handler in submitReorder method, and your actual functionality is inside that event handler.

So the fist time you click the button, the event handler delegated toview via backbone event hash will trigger submitReorder, which binds a new event handler with actual functionality directly to the button element.

Next time when you click it, this new direct handler will also trigger and fire the functionality you expect.

Each time you click the button you're adding a new event handler.

Your code should be simply:

submitReorder: function(event){
    event.preventDefault(); 
    var URI='<config property="api.url.itemReorder"/>';
    //-----^------ if this is hardcoded, why not specify this in the model itself..?
    var ItemReorderModel = new itemReorderModel({url:URI});
    //-------------^----------- why not do this just once while initializing view..?

    ItemReorderModel.set('id','1');
    //-------------^----------- if this is hardcoded, why not set specify it in model..?
    ItemReorderModel.save( {}, {
        success : function() {
            var response = ItemReorderModel.toJSON();
            var InvoiceView = new invoiceView({el: $("#itemData")});            
        },
        error : function(model, xhr, options) {

        }
   });
},

I also suggest initializing the model in the view's initialize method and caching it as it's property rather than initializing a new model on every click.

Upvotes: 1

Related Questions