Render form partial on click, Rails

Question

I can't seem to figure this out, and I've tried multiple forums. I would like to render a form when I click a link using javascript. Could someone show a basic example on how to do this?

if you just want to render a form on button click then i think normal js would be better just to show your form like @Luan suggested. Ajax will be good if you need to do something in your controller too. — Mandeep, Jun 23 '14 at 16:34

score 6 · Answer 1 · answered Jun 23 '14 at 17:41

6

Just to clarify @Luan Nico answer since you just have to render a form without doing anything extra in your controller you would be better served if you put your form inside a div tag and then toggle that div to show when you click on button.

Fix:

a. Make a div and put your form inside it

<div id="myForm">
  <%= render "your_form" %>
</div>

b. Hide that div by css

#myform {
  display:none;
}

c. Create your link to show your from:

<%= link_to "Your button","#", id: "yourButton" %>

d. Write your js inside assets/javascript/application.js or make a new file and then require in inside application.js

$(document).on("click","#yourButton",function(){
  $(#myform).show();
});

answered Jun 23 '14 at 17:41

Mandeep

9,093
2
26
36

1

Thanks to the complement! Just to clarify, if you are just going to use this feature on a single page, you can add it with `javascript_include_tag 'file.js'`; otherwise, it'd be better to add `//= require file` to the end of your application.js file (that is loaded on all pages). – Luan Nico Jun 23 '14 at 17:56
@user233527 are you able to alert from your js function? write a simple `alert("working");` inside js function to see if it's being called or not – Mandeep Jun 23 '14 at 18:03
No, it's not being called – user233527 Jun 23 '14 at 18:06
are you using a custom layout? if you are then do you have javascript_include_tag inside your layout file? `<%=javascript_include_tag "application", "data-turbolinks-track" => true %>` and then require your file inside application.js like `//= require jsForm` – Mandeep Jun 23 '14 at 18:08
No just the standard application layout. I added the javascript_include_tag as well – user233527 Jun 23 '14 at 18:12
@user233527 if you are using application layout then it would already have a javascript_include_tag. Can you post your layout, application.js and myForm.js files in your question – Mandeep Jun 23 '14 at 18:13
Myapp <%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %> <%= javascript_include_tag "application", "data-turbolinks-track" => true %> <%= csrf_meta_tags %> <%= javascript_include_tag :defaults %> <%= yield %> – user233527 Jun 23 '14 at 18:17
$(document).on("click","#yourButton",function(){ $(#myform).show(); }); – user233527 Jun 23 '14 at 18:17
//= require jquery //= require jquery_ujs //= require turbolinks //= require_tree . //= require file – user233527 Jun 23 '14 at 18:19
@user233527 edit your question and add it there. It's not readable here and remove javascript_include_tag inside your body tag. you only need one inside head tag – Mandeep Jun 23 '14 at 18:19
@user233527 you have jquery code inside application.js? if you do, make sure it's at the bottom and `//= require file`, here file is your file name so if you have js in a different file named 'file.js' then you'll require it like you have and if your js code is inside jsForm.js then you'll require it by `//= jsForm` – Mandeep Jun 23 '14 at 18:21
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/56145/discussion-between-user2675613-and-user233527). – Mandeep Jun 23 '14 at 18:25

Luan Nico · Answer 2 · 2014-06-23T16:38:57.910

3

Assuming the form doesn't change when the button is clicked, just have it's visibility toggled, you can put the entire form inside a div, give it an id, and then you can use jquery:

$('#my-button').click(function (){
  $('#div-id').toggle();
});

Where my-button is the id of the button in HTML, and div-id is the div id in the HTML (something like <button id="my-button">Click me</button> and <div id="div-id"></div>). Or you can do it with plain JS as well, if you don't have jquery (getElementById, etc).

If the form changes slightly, you can also use this technique, but you will need to add some conditions. Otherwise, you will have to use AJAX to get the current data.

Just a warning, try to avoid passing the whole form HTML via an ajax call, the best way is to provide just the data via json and using JS to populate the HTML with the data.

edited Jun 23 '14 at 16:38

answered Jun 23 '14 at 16:28

Luan Nico

5,376
2
30
60

I'm really new, what would my button tag be? and do I need a controller method to handle this as well? – user233527 Jun 23 '14 at 16:30
if he simply wants to render a form then normal js would be better – Mandeep Jun 23 '14 at 16:33
Edited with better exaplanation. You need a method in the controller only if you are going to use AJAX, that is, only if the content of the form is going to change every time the user presses the button because the data is updated in real time. Otherwise, this should be done client-side, without bothering the controller if it doesn't need to send any new information for the browser to know how to render the new HTML. – Luan Nico Jun 23 '14 at 16:41
The issue is I am using rails and within my /assets/javascript/ folder I put in a file named jsForm.js: $('#my-button').click(function (){ $('#myForm').toggle(); }); in my view: <%= button_tag "My button", :id => "my-button"%>
<%= render 'form_basic' %>
the button doesn't do anything and the form is still displayed – user233527 Jun 23 '14 at 17:17

Render form partial on click, Rails

2 Answers2