Inserting ERB with JavaScript

Question

I’m trying to insert an ERB element into my page using JS, but the insertAdjacentHTML method doesn’t work and simply put my erb element as a string

I tried with raw, .html_safe and append(), but none of these work.

here's basically what I want to do

btn_plus.addEventListener('click', () => {
    btn_plus.insertAdjacentHTML('beforebegin', `<%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %>`);
  })

and as a result it simply puts <%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %> as a string on my page

What is the correct way to do it ?

rails tags are converted to html on server side so It won't work in js file because it will run on client side — Abdul Rehman
– Abdul Rehman, Commented Sep 23, 2019 at 15:49

Les Nightingill · Accepted Answer · 2019-09-25 15:56:43Z

1

in an .html.erb file, you can use an actionview helper to generate a string like this:

<%= javascript_tag do %>
    const foo = '<%= select_tag(:foo, raw("<option>bar</option><option>baz</option>")) %>'
    $('#put_it_here').append(foo)
<% end %>

you can use options_for_select too, but I didn't have anything handy to check it, so my example just uses raw options tags.

the resulting output in the browser is:

<script>
//<![CDATA[

  const foo = '<select name="foo" id="foo"><option>bish</option><option>bash</option></select>'
  $('#put_it_here').append(foo)

//]]>
</script>

and you can use the string 'foo' in your javascript expression to insert it dynamically where you wish, I've used jQuery here.

If you need to use the <select>...</select> html string in an included js file, you can declare it in the .html.erb file and later use it in the included file.

edited Sep 25, 2019 at 15:56

answered Sep 23, 2019 at 18:17

Les Nightingill

6,1742 gold badges32 silver badges34 bronze badges

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

Comments

user11831257 · Accepted Answer · 2019-09-23 16:57:55Z

1

Abdul's comment is correct. Let me explain you in detail on how Rails rendering and JS works.

When you enter the URL on address bar, say http://url.com/articles/1, Rails recieves this request and looks for Articles#show action, then converts the show.html.erb file to an .html file(+ replaces dynamic stuff in this file) and then sends this HTML file to the browser. All this stuff is happening on the server side. Your in browser JS has nothing to do with it till now.

Now when you're browser recieves the HTML(+ CSS and JS files), the browser will render the HTML file and it will now execute the JS in browser. So now your btn_plus.addEventListener function is executed. It will do nothing to the rails part, it will just update the DOM. That's why when you inspect in dev tools you'll see

<%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %>

rather than seeing an <select></select> tag.

You can do something like this. Include your <%= select_tag :rg1, options_from_collection_for_select(@users, 'id', 'email') %> where ever you want it in your .html.erb file. Then in your JS, you could do something like this:

const rg1 = document.getElementById('rg1');
const btn_plus = document.getElementById('btn_plus'); // change your ID here if it's different

// Hide the select tag
rg1.style.display = 'none';

// On btn click, show the select tag:
btn_plus.addEventListener('click', () => {
  rg1.style.display = 'inline-block'; // or `block` or anything you want
});

answered Sep 23, 2019 at 16:57

user11831257

3 Comments

Maxim Over a year ago

Thanks for the explications ! Actually I thought about the hidden/show method, but I want to add a new select every time the user clicks on a button

user11831257 Over a year ago

Ok, I think then you can do something similar to Les's Answer. Create a dynamic javascript_tag and append it everytime a user clicks the button.

Maxim Over a year ago

yep, it worked. Thanks again for clarifying it for me !

Collectives™ on Stack Overflow

Inserting ERB with JavaScript

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related