url_for和远程：true

Question

I've got an issue with Rails. I want a select form which render a partial view when clicked. I want the partial views to be effective without refreshing the whole document (Ajax) but it seems that remote: true does not work for me...

What I have currently and refresh the whole document:

= form_tag url_for(action: :index), method: 'get' do
    //Storing some informations in html fields for further use
    - shops_array = @shops.collect.with_index { |shop, i| [shop.title, shop.id, {'address' => [shop.address, shop.zipcode, shop.city].join(" ")}, {'id' => 'shop'+String(i)}] }
    = select_tag :shop_id, options_for_select(shops_array, @shop_id), prompt: "Your shop :", data: {submit_on_change: true}

What I've tried :

= form_tag url_for(action: :index), remote: true, method: 'get' do
    //Storing some informations in html fields for further use
    - shops_array = @shops.collect.with_index { |shop, i| [shop.title, shop.id, {'address' => [shop.address, shop.zipcode, shop.city].join(" ")}, {'id' => 'shop'+String(i)}] }
    = select_tag :shop_id, options_for_select(shops_array, @shop_id), prompt: "Your shop :", data: {submit_on_change: true}

How do I apply the remote: true option with url_for ? If not possible, I could use some help finding a workaround.

Answer 1

As per the docs you can specify the remote option to the form_tag method, like so:

form_tag(url_for(controller: :charmander, action: :ember), remote: true, method: :get, class: 'pokemon-form') do
  # form logic
end

However , this will only trigger the ajax:success event when the whole form is submitted.

From your question it seems to me that you want to re-render some partial when your select value changes. I'm not sure how you use the submit_on_change data attribute, but if I'm correct in assuming that you make it submit the entire form when the select vaule changes then all you need to do is listen for the ajax:success event for the entire form, like so:

$('.pokemon-form').on('ajax:success', function (event, data, status, xhr) {
  // Do something with data, which would be the rendered partial returned
  // from the server call.
});

Answer 2

Ended up using an onclick and a JavaScript function. Though it may not be the best solution nor the prettier, it works like a charm for me.

= select_tag :shop_id, options_for_select(shops_array, @shop_id), prompt: "Your shop :", onclick: 'ajaxSelectedShop('+String(8)+')'