JavaScript append Rails erb code

Question

I got a complicated select block which was written by rails erb , but now I need to rewrite it into jQuery using append .

The select block is like this

<select id="mission_reward" name="mission_reward" class="select_reward">
  <option value="0"><%=t('mission.create_panel.no_reward')%></option>
  <% @monsters.each do |monster|%>
    <option data-img-src="<%=monster.url%>"
            data-cost='<%=monster.need_q_point%>'
            value="<%=monster.id%>">
      <%= monster.name %>
    </option>
  <% end%>
</select>

I've written some code following

html

<div class='select_block'></div>
<script type="text/javascript">
  $(function() {
    $('select_block').append(AppendReward());
  });
</script>

js

function AppendReward(){
  return
  "<select id=\"mission_reward\" name=\"mission_reward\" class=\"select_reward\"> \
    <option value="0"><%=t('mission.create_panel.no_reward')%></option> \
    <% @monsters.each do |monster|%> \
      <option data-img-src="<%=monster.url%>" \
            data-cost='<%=monster.need_q_point%>' \
            value=\"<%=monster.id%>\"> \
        <%= monster.name %> \
      </option> \
    <% end%> \
  </select>"
}

But it seems to fail, I am not familiar with JavaScript, is it wrong with the syntax?

Answer 1

use the below

<div class='select_block' id = "select_block"></div>

In Jquery , write the below:

$( document ).ready(function() {
  $('#select_block').append(AppendReward());  
});

instead of

  $(function() {
    $('select_block').append(AppendReward());
  });