Rails视图中的JQuery append（）提供“未捕获的SyntaxError：无效或意外的令牌”

Question

I'm trying to dynamically add/remove select boxes to my form on the click of a button

Here is my options/new.html.erb :

<br>
  <h3>Add Options</h3>
  <div class="input_options_wrap">
    <button class="add_options_button">+</button>
    <%=select_tag "options[]", options_for_select(@options.pluck(:option)), class: "form-control", prompt: "Select Option" %>
  </div>

This shows one line with the select box and the options. I want the user to be able to select as many options as he wants to add, but they need to be from this list of options only. So, there is the add_button and here is the script to handle the add/remove select boxes on click:

<script>
  $(document).ready(function () {
    var max_fields = 10; //maximum input boxes allowed
    var wrapper = $(".input_options_wrap"); //Fields wrapper
    var add_button = $(".add_options_button"); //Add button ID

    var x = 1; //initial text box count
    $(add_button).click(function (e) { //on add input button click
        e.preventDefault();
        if (x < max_fields) { //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><%=select_tag "options[]", options_for_select(@options.pluck(:option)), class: "form-control", prompt: "Select Option" %><a href="#" class="remove_field">Remove</a></div>');
        }
    });

    $(wrapper).on("click", ".remove_field", function (e) { //user click on remove text
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    })
  })
</script>

Now here is the problem. On rendering this html page, I am getting Uncaught SyntaxError: Invalid or unexpected token . Here is how the above code (relevant line) is being parsed:

$(wrapper).append('<div><select class="form-control" id="options_" name="options[]"><option value="">Select Option</option><option value="book">book</option>
<option value="copy">copy</option></select>
</div>');

I believe this exception is because inside append , it expects one string of "html code" while here because of random line breaks, that single string is no more syntactically correct. Is there any way around this?

Answer 1

You could put that html into a script tag to use as template and retrieve it as html from that template. By setting the type to something other than javascript the browser won't compile it as script and the html inside won't be turned into dom nodes either.

<script type="text/template" id="select-template">
  <div><%=select_tag ..... %><a..></div>
</script>

Then change:

$(wrapper).append('html string')

To:

$(wrapper).append($('#select-template').html());