CODEWITHSUNDEEP
twitter-bootstrapbackbone.jsdatepickerbackbone-viewsbackbone-events
engulfing
engulfing

Reputation: 11

datepicker for bootstrap does not react

i am using datepicker for bootstrap

my problem is, that when the backbone-view is loaded for the first time, the click event is not triggered. as soon as i click somewhere else on the page, everything works fine.

does anybody have an idea where i mess it up?

html snippet:

<form class="form-horizontal"><fieldset><div class="control-group">
                        <label class="control-label" for="focusedInput">id</label>
                        <div class="controls">
                          <input class="input-xlarge" id="id" type="hidden" value="1" disabled="">
                        </div>
                      </div>
        <div class="control-group">
                    <label class="control-label" for="focusedInput">Order_Ordertype</label>
                    <div class="controls">
                            <input class="input-xlarge" id="order_ordertype" type="text" disabled="" value="beeronlineshoporder">
                    </div>
                </div>
            <div class="control-group">
                            <label class="control-label" for="focusedInput">order_date</label>
                            <div class="controls"><input type="text" value="13.07.2013" data-date-format="dd.mm.yyyy" id="order_date">          </div>
                          </div>
            <div class="form-actions">
                            <button id="btn_save" class="btn">Save changes</button>
                            <button class="btn">Cancel</button>
                          </div>
            </fieldset></form>

backbone-view snipped

events:{
    "click #order_date":"datepicker_order_date",   
    "change input":"change",
    "click #btn_save":"saveBeerOnlineShopOrder",
    "click .delete":"deleteBeerOnlineShopOrder"
},
datepicker_order_date:function () {
        $('#order_date').datepicker({autoclose: true});
},

thanks in advance for any input

Upvotes: 0

Views: 2040

Answers (3)

seal
seal

Reputation: 520

Change your event click to mouseover, like this:

"mouseover #order_date":"datepicker_order_date"

and

in your function put this:

datepicker_order_date:function (ev) {
        $(ev.currentTarget).datepicker({autoclose: true});
},

For me works fine :)

Upvotes: 0

Harish.bazee
Harish.bazee

Reputation: 668

In this case render method write some set time out function inside this function just write $('#order_date').datepicker({autoclose: true}); It is like `render : function(eventName) { ...... ..... ....

    setTimeout(function() {
         $('#order_date').datepicker({autoclose: true});
    },0);
    return this;
    }`

Upvotes: 0

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14255

Because the first time when you click #order_date datepicker it is not ready yet. You have to initialize datepicker only once and the best place where you can do it is render method.

Upvotes: 1

Related Questions