Rails Render View Onclick With Javascript

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

Solution 1:

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
  endend

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... ;)

Solution 2:

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');
});

Solution 3:

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" %>
<divid="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.rbclassYourController < ApplicationControllerlayout: 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" %>