I need to find a way to attach a jQuery autocomplete handler on to an input field that is rendered as part of an eco template.
Here's what works fine when the input field is on the page in the markup
HTML:
<input type="text" name="thing[name]" value="" id="the_input_field">
<input type="hidden" name="thing[id]" value="" id="the_id_field">
Coffee:
$("#the_input_field").autocomplete
source: "/path_to/suggest"
select: ( event, ui ) ->
$( "#the_id_field" ).val ui.item.id
I have tried a version that used a setTimeout to apply the autocomplete 3 seconds later which worked but I know this is NOT the solution, just tracking down the issue. What I need is a callback to pass into render so it can attach the autocomplete when it's done.
Hope someone can shed some light on this.
Cheers
Ok so I struggled for a while but a simple solution now seems to be to add the calls into the Spine controller after the render method. Why I didn't see this I dont know.
So what I have in the Spine controller now is:
class WorkRequests extends Spine.Controller
constructor: ->
super
@render()
render: =>
@html @view('workrequests/new')
@renderUi()
renderUi: =>
$("#the_input_field").autocomplete
source: "/path_to/suggest"
select: ( event, ui ) ->
$( "#the_id_field" ).val ui.item.id
window.WorkRequests = WorkRequests
So far this seems to work and add the jQuery stuff after the view has been rendered. I'm yet to see if there is any issue with a very heavy rendered page and the timing but I think this is a solution.
(kicks self in the head)