2017-03-02 18 views
1

我怎样才能解决的JavaScript,使这个HTML不collection_select显示,如<\/option>\n<\/select>的JavaScript渲染collection_select输出HTML选项标签

这是在JavaScript踢前HTML输出

<select name="duel[duelers_attributes][1][challenge_id]" id="duel_duelers_attributes_1_challenge_id"><option value="29">Climb Mount Everst by May 20, 2017</option> 
<option value="24">Run by Feb 20, 2017</option> 
<option value="26">See Drive-thru Movie by Feb 20, 2017</option> 
<option value="28">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17</option> 
<option value="25">Bungee Jump by Feb 20, 2017</option> 
<option value="27">Journal on Weekdays for 10 Days Starting Jan 20, 17</option></select> 

这是HTML输出在JavaScript踢后:

<select name="duel[duelers_attributes][1][challenge_id]" id="duel_duelers_attributes_1_challenge_id">$("#dropdown-no-2").html("\n <option value="\&quot;\&quot;">&lt;\/option&gt;\n</option><option value="\&quot;24\&quot;">Run by Feb 20, 2017&lt;\/option&gt;\n</option><option value="\&quot;25\&quot;">Bungee Jump by Feb 20, 2017&lt;\/option&gt;\n</option><option value="\&quot;26\&quot;">See Drive-thru Movie by Feb 20, 2017&lt;\/option&gt;\n</option><option value="\&quot;27\&quot;">Journal on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option><option value="\&quot;28\&quot;">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17&lt;\/option&gt;\n</option><option value="\&quot;29\&quot;">Climb Mount Everst by May 20, 2017&lt;\/option&gt;&lt;\/select&gt;\n&lt;\/div&gt;")</option></select> 

enter image description here

_dueler_fields.html.erb

<%= f.select :user_id, options_for_select(@challengers.collect { |challenger| [challenger.id] }) %> 

<%= f.select :challenge_id, options_for_select(@challenger_challenges.collect { |challenged| [challenged.full_challenge, challenged.id] }) %> , 

# The problem occurs only AFTER the javascript kicks in and replaces the above line with collection_select(:dueler... 
<script> 
$('#duel_duelers_attributes_1_user_id').change(function() { 
    var user_id = $(this).find(":selected").val(); 
    var address = "<%= user_challenges_path %>/".concat(user_id); 
    $.get(address, function(data) { 
     $("#duel_duelers_attributes_1_challenge_id").html(data); 
    }); 
}); 
</script> 

路由

get 'duels/user_challenges/:id', :to => 'duels#user_challenges', as: 'user_challenges' 
    get 'duels/user_challenges/:id/:user_id', :to => 'duels#user_challenges', as: 'select' 

user_challenges.js.erb

$('#dropdown-no-2').html('<%= j render partial: "user_challenges" %>') 

_user_challenges.html.erb

<%= collection_select(:dueler, :challenge_id, @challenges, :id, :full_challenge, include_blank: true, id: 'dropdown-no-2') %> 

AJAX控制台输出

$('#dropdown-no-2').html('<select name=\"dueler[challenge_id]\" id=\"dueler_challenge_id\"><option value=\"\"><\/option>\n<option value=\"24\">Run by Feb 20, 2017<\/option>\n<option value=\"25\">Bungee Jump by Feb 20, 2017<\/option>\n<option value=\"26\">See Drive-thru Movie by Feb 20, 2017<\/option>\n<option value=\"27\">Journal on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"28\">Run 5 Miles on Weekdays for 10 Days Starting Jan 20, 17<\/option>\n<option value=\"29\">Climb Mount Everst by May 20, 2017<\/option><\/select>') 

回答

0
有时

渲染和的js代码操作依赖于使用的单'和双引号"在js.erb文件。

尝试改变:

$('#dropdown-no-2').html('<%= j render partial: "user_challenges" %>') 

$('#dropdown-no-2').html("<%= j render partial: 'user_challenges' %>") 

这可能看起来滑稽的答案,但它在大多数情况下工作。

+0

尝试使用html_safe在百页html上。 '('#dropdown-no-2')。html(“<%= escape_javascript(render partial:'user_challenges')。html_safe%>”)' –