Search code examples
ruby-on-railscoffeescriptform-helpers

Dynamically insert ruby generated HTML


I have a form where a user can elect to create more input areas (to provide more information). I have a link the user will click on and then the extra form inputs will be created. I'd like to use the rails form helpers so that I don't have to write the html myself. I've tried inserting the form helpers directly into coffeescript and saving the outputted html to a data tag on the link, but I can't get the coffeescript to execute the ruby code and I'm having escaping issues with the data attribute.

Here's the form:

= simple_form_for([@site, @zone]) do |f|
  = f.error_notification

  .form-inputs
    = f.input :site_id

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = label_tag "X"
    = text_field_tag 'x_coords[]'

    = label_tag "Y"
    = text_field_tag 'y_coords[]'

    = link_to "Add Point", "#", id: "add_point", data: { fields: label_tags }

  .form-actions
    = f.button :submit

When a user clicks the "Add Point" link, I'd like to add another block of:

= label_tag "X"
= text_field_tag 'x_coords[]'

= label_tag "Y"
= text_field_tag 'y_coords[]'

label_tags is in application_helper.rb:

def label_tags
  label_tag "Z"
end

The problem is the output for the "Add Point" link is:

<a href="#" data-fields="<label for=" z"="">Z" id="add_point"&gt;Add Point</a>

and the quotation marks are causing the link to come out with the text: "Z" id="add_point">Add Point"

I got the data attribute idea from this screencast


Solution

  • Simple solution for me was to replace the double quotes in my generated HTML with single quotes. In code:

    = link_to "Add Point", "#", id: "add_point", data: { fields: label_tags.gsub("\"", "'") }
    

    Also, had to use capture and concat in the helper method:

    module ApplicationHelper
      def label_tags
        capture do
          concat label_tag "X"
          concat text_field_tag 'x_coords[]'
    
          concat label_tag "Y"
          concat text_field_tag 'y_coords[]'
        end
      end
    end