jQuery-UI Autocomplete Widget not binding to ajax loaded partial form in Rails

Question

I have a form with a text field that uses jQuery-UI autocomplete widget. I'm loading this form as a partial using AJAX with Ruby on Rails <li id="activity_<%= activity.id %>"><%= link_to activity.address, edit_activity_path(activity), :remote => true %></li>

Since the form is being loaded after document.ready, the autocomplete jQuery widget is not binding to the DOM element.

Since this isn't a jQuery AJAX call, I don't think that there is a success callback that I can use to bind the autocomplete widget with after the Ajax call.

I'm not sure how to use the .on() function that I've seen around with the autocomplete Widget since the syntax is $('selector').autocomplete

Can someone please help?

This is the edit.js.erb file:

$("#activity_form").html("<%= escape_javascript(render(:partial => "form"))%>");

This is my jQuery code to bind the autocomplete widget to my text field.

jQuery ->       
$('[type="text"][name*="[geocode_location]"]').autocomplete
  source: (request, response) ->
    $.ajax 
      url: "http://ws.geonames.org/searchJSON"
      dataType: "jsonp"
      data: 
        featureClass: "P"
        style: "full"
        maxRows: 12
        name_startsWith: request.term

      success: (data) ->
        response $.map(data.geonames, (item) ->
          label: item.name + ((if item.adminName1 then ", " + item.adminName1 else "")) + ", " + item.countryName
          value: item.lat + ", " + item.lng
        )
  minLength: 2

  open: ->
    $(this).removeClass("ui-corner-all").addClass "ui-corner-top"

  close: ->
    $(this).removeClass("ui-corner-top").addClass "ui-corner-all"
  focus: (event, ui) ->
    event.preventDefault()
    $(this).val ui.item.label      
  select: (event, ui) ->
    event.preventDefault()
    $(this).val ui.item.label
    $(this).siblings('[name*="[geocode_ll]"]').val ui.item.value

Hung Luu · Accepted Answer · 2012-11-06 22:38:52Z

2

I read here about how there are 6 custom events that each Rails Ajax call can bind to, including ajax:success which is fired anytime there is a successful ajax request.

http://net.tutsplus.com/tutorials/javascript-ajax/using-unobtrusive-javascript-and-ajax-with-rails-3/

So I did $(this).bind "ajax:success" which allows $(this) which is the entire window in this case, to fire off some other functions after any "ajax:success" event.

So, I ended up doing this:

jQuery ->
  $(this).bind "ajax:success", -> 
    jQuery ->       
      $('[type="text"][name*="[geocode_location]"]').autocomplete
       --REST OF CODE--

answered Nov 6, 2012 at 22:38

Hung Luu

1,12319 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan.lay Over a year ago

Brother, you have saved me a lot of pain!

anka · Accepted Answer · 2013-02-02 19:09:51Z

1

I had a similar case, when rendering a partial containing an autocomplete input field after an ajax call the autocompletion did not work any more. I was using the rails3-jquery-autocomplete gem.

The problem was simply, that all autocomplete input fields are only bound to the autocomplete function on the initial document load. To bind new autocomplete fields again simply call the following function:

jQuery('input[data-autocomplete]').railsAutocomplete();

answered Feb 2, 2013 at 19:09

anka

3,8571 gold badge32 silver badges38 bronze badges

Comments

Nikhil D · Accepted Answer · 2012-11-06 12:57:50Z

0

$('[type="text"][name*="[geocode_location]"]').live("autocomplete", function(){ your code})

Please try.

answered Nov 6, 2012 at 12:57

Nikhil D

1091 gold badge1 silver badge4 bronze badges

1 Comment

Hung Luu Over a year ago

I tried this, it doesn't seem to be working. It breaks the autocomplete capability.

Collectives™ on Stack Overflow

jQuery-UI Autocomplete Widget not binding to ajax loaded partial form in Rails

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related