rails render view onclick with javascript

Question

I'm trying to create a view, where users can click on different buttons and render different content based on the buttons they click. I've tried getting this done with JS but can't really get it to work. I made a button in my view:

<div class="link">
  <%= link_to "Greetings", "#" %>
</div>
<div id="show"></div>

then in job.js.erb:

$(function() {
  $('.link').click(function() {
    $('#show').append("<%=escape_javascript render(:partial => 'show' %>");
  });
});

unfortunately render is not supported in assets, but I don't really know what the best way is to make this happen.

Well, if you using assets, you shouldn't be mixing javascript and rails. What about ajax? — lcguida
– lcguida, Commented Nov 1, 2015 at 23:13

x6iae · Accepted Answer · 2015-11-01 23:48:23Z

One way you can try is to let the button click go to a controller action, by AJAX, and then render the file with name <action_name>.js.erb. this file will then be able to call the render action.

I will expatiate more with the following:

Assuming the resource in question is Greetings and you have a dynamic_show action in the Greetings controller, for example, and you have a dynamic_show_greetings_path routing to this action.

From inside your view, you can have:

<div class="link">
  <%= link_to "Greetings", dynamic_show_greetings_path, remote: true %>
</div>
<div id="show"></div>

and the Greetings#dynamic_show action will be like follow:

def dynamic_show
  respond_to do |format|
    format.js
  end
end

then, in your view directory, you have a dynamic_show.js.erb file, which will contain the script to append the dynamic view as follow:

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

And that solves it for you!

Of course, to now make it dynamic, you have to then pass in params to the controller, and then render content based on the response gotten.

PS:

setting remote: true on the link ensures that the call will be an AJAX call.
controller actions by default renders the file with same name as the action name, therefore, dynamic_show responding to js will render dynamic_show.js.erb

Hope this throws a great light into it for you... ;)

Anchalee · Accepted Answer · 2015-11-01 23:25:12Z

0

It sounds like you need jQuery for this.

You can wrap the rendered partial in a parent div with a hide class. When the button is clicked toggle displaying the content.

http://api.jquery.com/show/

$('#your-button').click(function(e){
    $('.hidden-div').toggleClass('hide');
});

answered Nov 1, 2015 at 23:25

Anchalee

6961 gold badge6 silver badges13 bronze badges

Comments

Richard Peck · Accepted Answer · 2015-11-02 14:31:07Z

0

There are two ways to do this.

Firstly, if you're wanting to load the JS on-page, you need to use what @anchalee suggested, and preload the content with some sort of "hide" class in the CSS:

#app/assets/javascripts/application.js
$(document).on("click", "a.hidden", function(e){
   e.preventDefault();
   el = $(this).attr("href");
   $(el).toggle();
});

#app/views/controller/your_view.html.erb
<%= link_to "User", "#user", class: "hidden" %>
<div id="user" class="hidden">
    Hello
</div>

This will take any divs with the id specified by the href attribute of the link, and then make it so that the div will hide or show depending on its current state.

--

Secondly, you have the off-page method (using ajax).

This is used to get data from the server, and will be where you'd load server-centric data such as what you're trying to do now.

Doing this is actually quite simple:

#app/controllers/your_controller.rb
class YourController < ApplicationController
   layout: Proc.new{|c| !c.request.xhr? }
end

This will return any data you need without the layout:

#app/assets/javascripts/application.js
$(document).on("click", "#show", function(e){
   e.preventDefault();
   $.get($(this).attr("href"), function(data){
      $("#show").html(data);
   });
});

#app/views/your_controller/show.html.erb
<%= link_to "Show", [[url for page]], id: "show" %>

answered Nov 2, 2015 at 14:31

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

1 Comment

Mischa Over a year ago

The second method seems to be what I want since I need to load a lot of different pages so preloading and hiding them is not the way to go. But I get an error on the controller layout part (unexpected ':'). Could you explain this a bit more? I don't really understand what is is you'r doing there.

Collectives™ on Stack Overflow

rails render view onclick with javascript

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related