Question

I have a form element which is being pulled in on request with ajax. I am then trying to perform an ajax request on the inserted text box to find a location as it is typed. The code works on the first textbox but simply fails when the second one is inserted. I’ve tried to get the script to reload itself when the ajax has completed but it still won’t work. Help would be much appreciated.

Form.html.erb – Sets up the rails nested form and pulls in partial

  <%= nested_form_for(@post, :html=> {:multipart => true, :class=> "new_blog_post", :id=> "new_blog_post"}) do |f| %>

  ...

  <fieldset>
   <%= render :partial => 'search_locations', :locals => { :f => f }  %>

  </fieldset>

  <p><%= f.link_to_add "Add a location", :locations %></p>

  ...

  <% end %>

partial.html.erb – Pulled in on page load and then when ‘Add a location’ button is pressed

  <fieldset>
  <%= f.fields_for :locations do |m| %>    
        <%= m.text_field :name ,:class=>"localename", :placeholder=> "Name of the location", :autocomplete => "off" %>
        <%= m.text_field :longitude, :class => "long" %>
        <%= m.text_field :latitude, :class => "lat" %>
        <div class="latlong">
        <p class="help-block">Enter the name of the town or city visited in this blog entry.</p>
        </div>
        <%= m.link_to_remove "Remove this location" %>

   <% end %>
  </fieldset>

Javascript (placed at bottom of form)

<script type="text/javascript">


    function locationchecker() {

    // Rails to multiply the script 20 times            
    <% (0..20).each do |i| %>

    // when the #search field changes
    $(".localename:eq(<%=i%>)").keyup(function() {

    // get the value of searchfield 
        var location<%=i%> = $(".localename:eq(<%=i%>)").val(); 

    //Take the value of the textbox and pull it from geocoder
    $.get('/locations/location?location='+location<%=i%>,this.value, function(searchone<%=i%>) {
    $(".latlong:eq(<%=i%>)").html(searchone<%=i%>);

     })
        // Upon complete run the script again
    .complete(function(searchone<%=i%>) { locationchecker });


    });

    <%end%>
}
       // load script on doc ready
$(document).ready(locationchecker);


</script>

Help would be great!

Thanks in advance,

James

Answer 1

you should use the .on()(jQuery api doc) method to attach your keyup event handler, like so :

$('#myForm').on('keyup','.localename',function() {
       // stuff here
       var location = $(this).val(); // this = element on which the event was triggered
});