Question

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

Answer 1

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)