Post response with render partial that has events is not working

Question

In ruby on rails, I am trying to update 2 partials.

show.html.erb:

<div id="filters"><%= render :partial => "pricelistfilters" %></div>

pricelistfilters.html.erb:

<% @properties.each do |prop| %>
  #Render the page on properties (and the newproperties)
  #<select ...><option>...</option><option>...</option>
  #</select>
<% end %>

products.js --> events for the rendered partial

$(window).ready(function(){
  selectionchanges();
});
function selectionchanges(){
  $('#filters select').change(function(){
    //Doing stuff to send with ajax

    //Ajax:
    $.ajax({
      url: document.URL,
      type: 'POST',
      data: params
    });
  });
}

products_controller.rb --> code to process changes made

def show
  #Changing the properties (and the pricelist properties)
  @properties #is filled
  @newproperties #is filled
  respond_to do |format|
    format.html
    format.js
  end 
end

show.js.erb

$('#filters').html('<%= escape_javascript(render :partial => "pricelistfilters") %>');
selectionChanges();

My rendered item is perfectly good. However, when I've got the proper response with the rendered item, It just doesn't send the ajax anymore. So the event on my select items is gone, whilst I am certain that I've reset them with the "selectionchanges();" on the end of my show.js.erb file?

Can anyone see a solution to this?

Greetings and thanks in advance

Answer 1

Try using jquery's live function on product.js, as bellow:

$(window).ready(function(){
  selectionchanges();
});
function selectionchanges(){
  $('#filters select').live('change', function(){
    //Doing stuff to send with ajax

    //Ajax:
    $.ajax({
      url: document.URL,
      type: 'POST',
      data: params
    });
  });
}

Basically, you're replacing the HTML Dom's element that you first bound the event 'change' to. With live, even by replacing the element, jQuery will re-do the binding for you.

Hope it helps!