Backbone.js: trigger an event on a view after the render?

Up vote 1 down vote favorite share g+ share fb share tw.

I'm trying to attach a jQuery Date Range Picker to an input which is appended to the DOM after a link is clicked, but if I do it during the render, the range picker appears in the wrong place (because the input hasn't been given a DOM position yet). So, I need to wait until after the input has been rendered before I attach the date picker. Coffeescript is below.

@makeDateRangePicker is a function that inits the date picker class window. ClientDestinationPricingFieldsView extends ModelSaverView template: (json) -> _. Template(jQuery("#special-pricing-timeframe-template").html()) json render: -> jQuery(@el).

Html @template(@model.toJSON()) @makeDateRangePicker jQuery(@el). Find("inputname=date_range") this jquery view backbone. Js coffeescript render link|improve this question edited Feb 29 at 17:25mu is too short77.4k74081 asked Feb 29 at 16:21Kevin Whitaker464113 88% accept rate.

I would try this: class window. ClientDestinationPricingFieldsView extends ModelSaverView events: 'click inputname=date_range': 'makeDateRangePicker' template: (json) -> _. Template(jQuery("#special-pricing-timeframe-template").html()) json render: -> jQuery(@el).

Html @template(@model.toJSON()) this You would have to modify @makeDateRangePicker to take an event element instead.

Edit: So, my last stab at a solution was not. What you're saying is that after your call to jQuery(@el). Html, the expected html is not there?

That sounds very weird. I think it might be as simple as that you need to quote your attribute value: jQuery(@el). Find("inputname='date_range'") Note the ' single-quote around date_range.

Edit: Sorry, after verifying that it actually seems to work without quotes. I've been bitten by something similar before. Anyway, if the question is correct as it is now (after it's been updated with info about adding the input on a click event), then you should call makeDateRangePicker right after you append the element, right?

Sorry, should have mentioned in the question that this view is loaded after a click event from another element on the page, so waiting for document. Ready won't fix it. – Kevin Whitaker Feb 29 at 17:17 I figured as much after I had already answered.

So you're saying that inputname= ... I think I've got it. Editing my answer. – Linus G Thiel Feb 29 at 17:24.

You can usually use setTimeout with a timeout of zero for this sort of thing. SetTimeout(..., 0) essentially queues up a function to be called once the browser has control again. Something like this: render: -> jQuery(@el).

Html @template(@model.toJSON()) setTimeout => @makeDateRangePicker jQuery(@el). Find("inputname=date_range") 0 @ I often use this trick with Google Maps to make it positioned and sized properly.

Cool, I never knew you can do that – teggy Mar 1 at 20:10.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.