Rails 5: render partial in another partial with AJAX

Question

I'm a bit stuck in trying to implement AJAX where on "link_to" view is rendered and in that view I have another AJAX call.

I have menu sidebar where there is something like this:

<li class="<%= is_active_action('positions') %>"><%= link_to "Positions", positions_path, remote: true %></li>

In application.html.erb I have this:

<!-- Main view  -->
<div id="yield">
   <%= yield %>
</div>

Actually not sure if this is the right way to do, but so far it worked.

Then in views/../positions/index.js.coffee I have this

$("#yield").empty()
  .append("<%= escape_javascript(render 'inventory/positions/index') %>")

which is redering /positions/_index.html.erb partial. In there I have <div id="media_list"> and <div id='positions_table'>

In assets/javascripts I have positions.coffee

$ ->
$(document).on 'change', '#media_list', (evt) ->
    $.ajax 'update_positions',
      type: 'GET'
      dataType: 'script'
      data: {
        media_id: $("#media_list option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
        console.log("AJAX Error: #{textStatus}")
      success: (data, textStatus, jqXHR) ->
        console.log("Dynamic media select OK!")

This is basically listening to drop-down change and then passing media_id to controller, then this /views/../positions/update_positions.js.coffee renders second partial (/views/../positions/_positions.html.erb):

$("#positions_table").empty()
  .append("<%= escape_javascript(render 'inventory/positions/positions', locals: {positions: @positions}) %>")

At the moment on dropdown change I cannot make second partial (_positions.html.erb) to render. Any ideas what could be wrong? Thank you for any help.

Update

I've set in my routes this: get '/update_positions', to: 'inventory/positions#update_positions' and then in controller I have this:

def update_positions
  @positions = Positions::Positions.where('media_id = ?', params[:media_id])

When :media_id is passed, I get this in console Started GET "/update_positions?media_id=1" and result visually is as expected. But then when I do several similar requests in a row, strange things happen. It looks like requests ar multiplying and seems that there are much historic requests repeating again and again. My assumption is that is because of this /update_positions?media_id=1 Please, help, what am I doing wrong?

Update 2

First of all I adjusted route to actual Controller I have: get '/inventory/positions/update_positions', to: 'inventory/positions#update_positions' Previous route did not work correctly when I jumped from routes like /users/1/edit.

In my /views/inventory/positions/update_positions.js.coffee I have this:

$("#positions_table").empty()
  .append('<%=j render 'inventory/positions/positions'%>');

Multiple queries look like this:

Started GET "/inventory/positions/update_positions?media_id=1" for 78.84.173.112 at 2016-12-20 05:29:39 +0000
  Parameters: {"media_id"=>"1"}  
  #several queries follow
Started GET "/inventory/positions/update_positions?media_id=1" for 78.84.173.112 at 2016-12-20 05:29:39 +0000
  Parameters: {"media_id"=>"1"}
  #several queries follow

This happens when I open particular view, select let' say "value: 1" from dropdown and particular partial is rendered. Then I go to another AJAX view in different section, then come back and again select "value: 1". If I do it multiple times, then queries happen to copy more and more. It stops, when I do full page refresh - then everything starts from normal position, but again queries grow, when I repeat select multiple times.

In your console, is it showing "Dynamic media select OK!" when you make the dropdown change or "AJAX Error: ..."? — luckyruby
– luckyruby, Commented Dec 17, 2016 at 11:53
@luckyruby No, it seems that listener is not working at all - nothing in console. `update_positions — matiss
– matiss, Commented Dec 17, 2016 at 11:54

luckyruby · Accepted Answer · 2016-12-17 12:25:45Z

1

In application.html.erb:

<!-- Main view  -->
<div id="yield">
  <div id="positions_index"></div>
  <%= yield %>
</div>

In positions/index.js.coffee:

$("#positions_index").html "<%= escape_javascript(render 'inventory/positions/index') %>"
$("#positions_index").on "change", "#media_list", (e) ->      
  $.get '/update_positions',
    media_id: $("#media_list option:selected").val()
  , null

Make sure you have update_positions defined in your routes.

answered Dec 17, 2016 at 12:25

luckyruby

2731 silver badge7 bronze badges

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

8 Comments

matiss Over a year ago

Thanks, works like charm! My naive idea was to use <% yield %> in order to render all dynamic stuff in my app, so my nav bars do not refresh. Do you think there is any option to avoid a lot of <div id=...> in future in application.html.erb?

matiss Over a year ago

Silly me :) I'll just use <div id="yield"> in every page and that's it. So basically when I load different section of my app, I'll refer to id="yield".

matiss Over a year ago

Please, can you check my update above, as I have got some strange thinks in console when implemented your positions/index.js.coffee suggestion. Visually I get the desired result, however "behinf the scenes" there are a lot of unnecessary queries happening when same on change event is executed.

luckyruby Over a year ago

What do the unnecessary queries look like?

matiss Over a year ago

Please, see my Update 2 above.

|

Collectives™ on Stack Overflow

Rails 5: render partial in another partial with AJAX

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related