JQuery ERB模板不能插入HTML

我是JQuery/JS的初學者，我試圖在Rails 3.1應用程序中實現一個依賴下拉列表。我有以下形式：JQuery ERB模板不能插入HTML

<%= debug params %> 
<%= form_for([@wall.climbing_centre, @wall]) do |f| %> 
    <% if @wall.errors.any? %> 
    <div id="error_explanation"> 
     <h2><%= pluralize(@wall.errors.count, "error") %> prohibited this wall from being saved:</h2> 

     <ul> 
     <% @wall.errors.full_messages.each do |msg| %> 
     <li><%= msg %></li> 
     <% end %> 
     </ul> 
    </div> 
    <% end %> 


    <div id="kind" class="field"> 
    <%= f.label :kind %><br /> 
    <%= f.select :kind, Wall::Kinds, :input_html => {:rel => "/kinds"} %> 
    </div> 
    <div class="field"> 
    <%= f.label :wall_number %><br /> 
    <%= f.text_field :number%> 
    </div> 
<div id="gradelist" class="field"> 
    <%= f.label :grade %><br /> 
    <%= f.select :grade, Wall::BGrades %> 
    </div> 

    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %>

下面的JavaScript

jQuery.ajaxSetup({ 
'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") } 
}); 
jQuery(function($) { 
    // when the #kind field changes 
    $("#kind").change(function() { 
    // make a POST call and replace the content 
    $.post('/kinds', {id: $("#wall_kind").val()}, null, "script"); 
    return false; 
    }); 

})

以下JS.ERB模板：

$("#gradelist").html("<%= label :gbabe, 'Grade'%></br><%=select_tag :gbabe, options_for_select(@grades) %>");

在我的心牆控制器的下列行動：高清grades_by_kind

if params[:id].present? 

    @grades = (params[:id] == "Boulder" ? Wall::BGrades : Wall::FGrades) 

    else 
    @grades = [] 
    end 

    respond_to do |format| 
    format.js 
    end 
end

我在壁模型下列常數：

FGrades = %w[5 5+ 6A 6A+ 6B 6B+ 6C 6C+ 7A 7A+ 7B 7B+ 8A 8A+ 8B 8B+ 9A 9A+] 
BGrades = %w[V0 V0+ V1 V2 V3 V4 V5 V6 V7 V8 V9 V10 V11 V12 V13 V14 15] 
Kinds = ['Boulder', 'Leading', 'Top Rope']

改變在一個選擇：一種選擇框，觸發JS發佈請求，並且接收以下響應：

$("#wall_grade").html("<label for="gbabe_Grade">Grade</label></br><select id="gbabe" name="gbabe"><option value="5">5</option> 
<option value="5+">5+</option> 
<option value="6A">6A</option> 
etc... 
<option value="8B+">8B+</option> 
<option value="9A">9A</option> 
<option value="9A+">9A+</option></select>");

然而，在網頁中呈現的id =「gradelist」div中的下拉值實際上並未改變。爲什麼不改變HTML？

來源

2011-10-03 Himerzi

你的選擇沒有改變，因爲你沒有對你從服務器得到的迴應做任何事情。您需要在您的$.post調用中指定callback。此外，您需要將您的成績轉換爲html選項列表才能返回它們，也許與options_for_select

來源

2011-10-03 14:40:10

嗨，傑夫，感謝您的幫助。我正在使用選項進行選擇。以下是我的js.erb模板：$（「＃gradelist」）。html（「<％= label：gbabe，'Grade'％><％= select_tag：gbabe，options_for_select（@grades）％>」）;.奇怪的是，如果我使用下面的代碼：$（「＃gradelist」）。html（「blablabla」）;內部html確實被替換爲「blablabla」。 – Himerzi

JQuery ERB模板不能插入HTML

回答

相關問題