use javascript variable inside <% %> in erb - Ruby on Rails

Question

I am using select_tag and onchange. I need to call a helper method and pass the value of the selected item as a parameter:

This is how my helper method looks like

def find_template(temp)
    "Hello #{temp}!"
end

What I need to do is to get user's selection, using javascript, and pass it to find_template. If I pass a string instead of template, it works fine, i.e. <% @header = find_template("option_1") %> but when I use var template I get the following error:

undefined local variable or method `template' for ...

and this is my erb

<% content_for :javascript do %>
    <script>
        function template() {
            var e = document.getElementById("category");
            var template = e.options[e.selectedIndex].text;
            <% @header = find_template(template) %>
        }
    </script>
<% end %>

<%= select_tag(:category, options_for_select(
                 Blah::TYPES.map {|k, v| [v['name'], k] }),
                 {onChange: 'template()'}) %>

<div id="template-overview">
    <table>
        <tr>
            <% @header.each do |column| %>
                <th class="<%= cycle('even', 'odd') -%>">
                    <%= column %>
                </th>
            <% end %>
        </tr>
    </table>
</div>

you can't use javascript inside of ruby. Ruby is server side. Javascript is client side. To pass such a variable you would need to make an AJAX request. blog.teamtreehouse.com/… — Cfreak
– Cfreak, Commented Jul 14, 2016 at 3:05
When your page loads, Rails generates the HTML, JS, CSS etc then feeds it to the server. Rails code doesn't change the content of the page without reloading the page. If you want your content to change, you're better off finding a way to use your JS to dynamically change the content of your page without calling a Rails function. — Okomikeruko
– Okomikeruko, Commented Jul 14, 2016 at 3:05
That's because Server code executes before Client code, therefore the variable is undefined. Use AJAX. — StackSlave
– StackSlave, Commented Jul 14, 2016 at 4:44

Sergio Tulentsev · Accepted Answer · 2016-07-14 15:25:55Z

2

solved: The right way do to it is to use ajax:

in your page.erb

<% content_for :javascript do %>
    <script>
        $(document).ready(function(){
            $("#category").change(function(){
                var temp_name = $('#category').val();
                $.ajax({
                    url: "/YOUR_PATH/"+temp_name,
                    dataType: "html",
                    type: "GET",
                    data: {ANY_DATA: VALUES},
                    success: function(data){
                        jQuery("#template_overview").html(data);
                    }
                });
            });
        });
    </script>
<% end %>

<div id="template_overview">
</div>

have a partial that populates your div

in the controller:

def display_template
    .
    .
    .
    .
    render partial: '/PATH/template_overview', header: @header
end

and of course the routes

get 'controller/display_template/:temp_id' => 'controller#display_template'

edited Jul 14, 2016 at 15:25

Sergio Tulentsev

231k43 gold badges381 silver badges373 bronze badges

answered Jul 14, 2016 at 15:24

Sarah A

1,23313 silver badges27 bronze badges

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

2 Comments

Sergio Tulentsev Over a year ago

Don't use quote syntax for something that isn't a quote.

Sergio Tulentsev Over a year ago

The > markup you used in your question/answer. It is reserved for decorating quotes.

Collectives™ on Stack Overflow

use javascript variable inside <% %> in erb - Ruby on Rails

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related