CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4
Rob
Rob

Reputation: 1855

JS embedding HTML on click function but embedded ruby shows as plain text

I'm trying to apply this js fiddle that adds and takes form fields to the lower half of the form below.

<%  if (current_user.mod_of_game?(@guide) unless current_user.nil?) %>
   <%= form_for([@category, @page], url: update_pages_path) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>

       <%= f.label :content_top, "Top Content" %>
       <%= f.text_area :content_top, :class => 'editor' %>
<br>
<br>
       <%= f.label :content_bottom, "Bottom Content" %>    
       <%= f.text_area :content_bottom, :class => 'editor' %>
<br>

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
  <% @page.table_head.zip(@page.table_content).each do |head, content| %>

    <% head_key, head_value = head %>
    <% content_key, content_value = content %>
    <% if head_key == '0' %>
       <p> Column 1 Contains the name of the item, you can add more to the column or leave it blank to show just the item name <br>
   Column 1:
     <%= text_field_tag ('header[' + head_key + ']'), head_value %> 
    <%= select_tag 'content[' + content_key + ']', options_for_select(@category_keys_with_blank, ''), { :multiple => true, :size => 3}  %> </p>
    <% else %>
        <% number = head_key.to_i + 1 %>
     <p>Column <%= number %>:
    <%= text_field_tag ('header[' + head_key + ']'), head_value %> 
    <%= select_tag 'content[' + content_key + ']', options_for_select(@category_keys, content_value), { :multiple => true, :size => 3}  %> <a href="#" id="remScnt">Remove</a></p> 
    <% end%>
  <%end%>


  <%= f.submit "Save"  %>

<% end %>
</div>

I've converted the js in the fiddle to coffee script and modified it where I though was needed. 

$ ->
  scntDiv = $('#p_scents')
  i = $('#p_scents p').size() + 1
  $('#addScnt').on 'click', ->
    $("<%= text_field_tag ('header[' + head_key + ']'), head_value %> <%= select_tag 'content[' + content_key + ']', options_for_select(@category_keys, content_value), { :multiple => true, :size => 3}  %> <a href='#'' id='remScnt'>Remove</a></p>").appendTo scntDiv
    i++
    false
  $('#remScnt').on 'click', ->
    if i > 2
      $(this).parents('p').remove()
      i--
    false
 return

In the fiddle it uses .live which is depreciated so I replaced it .on. But it adds all the embedded ruby information as a string on click instead of embedding it. I can add in the HTML the RoR coding produces but first want to know if there is an way for the RoR coding to be embedded instead of showing up as a string.

(as a side note if there is a better fiddle or example on how to add and remove form fields I'll be happy to know about them, I couldn't find others that were as straight froward and easy but it is pretty old.)

Upvotes: 0

Views: 36

Answers (1)

SickLickWill
SickLickWill

Reputation: 196

In JS you use the following syntax to use injected Ruby: 

$("<%= j(text_field_tag ('header[' + head_key + ']'), head_value ) %>...")

Or try:

$("<%= (text_field_tag ('header[' + head_key + ']'), head_value).html_safe %>...")

Upvotes: 1

Related Questions