How to Render a Partial from JavaScript

How to render a partial from javascript

You can't render a partial inside of JavaScript to detect change events. Ruby is server side, and JavaScript is client side. By the time your JavaScript runs, your Ruby has already been parsed into regular ol' HTML.

Your best bet is to do the following:

Use an AJAX control (there are Prototype/scriptaculous ones) to hit your server in the onchange event. Your server can send back RJS to update the other dropdowns, or it can return back standard JSON and you can populate the other dropdowns manually in the onSuccess method of the AJAX call.

How to render partial.js in rails 3

Shouldn't it be in the file _show.js.erb?

From "Using Partials".

JQuery/Rails: How to render a partial with params?

Rendering partials with params is not possible. I think, you want to pass some local variable into the partial.

Passing locals can be achieved -

$('#index_page').html("<%= j render partial: 'form', locals: {whs_id: params[:whs_id]} %>");

Hope, that helps!

how to render a partial by passing an id through jQuery?

When your starting out with javascript avoid falling for the temptation of mixing javascript and whatever server side language you are using.

You end up with an overcomplicated mess and tons of confusion about what is happening where. Its a pretty common misstake and there is no reason to feel ashamed.

Using AJAX as suggested by Oleander is a good alternative - but another classic way to setup sliders or tabs is by using ancor links.

So first lets setup the table:

<table id="table_clients">
  <thead>
   <tr>
     <td>id</td>
     <td>name</td>
   </tr>
  </thead>
  <tbody>
    <%= clients.each do |client| %>
      <tr>
        <td>
          <%= client.id %>
        </td>
        <td>
          <%= content_tag :a, client.name, href: "client-<%= client.id %>" %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

Note the a <%= content_tag :a, client.name, href: "client-<%= client.id %>" %> part. This will render something like:

<a href="#client-1">Acme Corp.</a>

So lets create the details on the right side:

<% if clients.any %>
<ul id="client-details">
  <%= clients.each do |client| %>
  <li id="client-<%= client-id %>">
    <%= client.details # or whatever %>
  </li>
  <% end %>
</ul>
<% end %>

Even without javascript the browser will now jump down to the linked tab. Progress!

So now lets enhance the behavior with javascript:

// hide everything but the first
$('#client-details li').not(':first').hide();

$('#table_clients').on('click', 'tr,a', function() {
  var id, target;

  // we don't know if the user clicked a link or a row
  if (this.tagName === 'A') {
    id = this.href;
  } else {
    id = $(this).find('a').attr('href'); 
  }

  // since the href is equal to the id we can use it as a selector
  target = $(id);
  target.show(); // show the target
  $('#client-details li').not(target).hide(); // hide the others
  return false; // prevents the view from jumping if the user clicked a link
});

Note that this is a special keyword in javascript that changes meaning depending on the concept. When you attach a click handler it is the element that the user clicked. $(this) gives us a new jQuery object with that element as the context.

How can I render a partial from .js.erb file in rails 4?

Asset Pipeline

Firstly, you need to make sure that you don't use any Rails dynamic path helpers in your javascript directly.

The issue is that if you pre-compile your asset pipeline, you'll typically find these dynamic path helpers won't work correctly. Although there's nothing "wrong" with it - I tend to keep Rails back-end code completely separate from the front-end, as to ensure the versatility of the application:

#app/assets/javascripts/application.js
$(document).on("click", ".element", function(){
   $.ajax({  
     type: "GET",    
     url: "/cookbooks"
  });
});

This will send a "naked" Ajax request (no params / body) to your controller backend:

#app/controllers/cookbooks_controller.rb
Class CookbooksController < ApplicationController
   def index
      @cookbooks = Cookbook.all
      respond_to do |format|
        format.html
        format.js #-> loads /views/cookbooks/index.js.erb
      end
   end
end

The trick here is that you can now populate your index.js.erb file with the params necessary to render the partial:

#app/views/cookbooks/index.js.erb
$("#property").html("<%=j render :partial => 'recipes/package_form' %>") 

--

This should work for you

---

Related Topics