私はアイデアを使い果たし、解決策のヒントがないままウェブを調べました。私は本当に、本当に立ち往生しているので、誰かが私をこの混乱から抜け出させてくれることを願っています.
私のルートの 1 つは、データベースをクエリし、一連のインスタンス変数 (@campagnes および @missions) を介して erb を介してデータをレンダリングします。心配はいりません。すべて正常に動作します。
ドロップダウン セレクターに基づいてテーブルのデータをフィルター処理するのに役立つ jQuery 関数をセットアップしました。したがって、ユーザーがドロップダウンで選択した値を変更すると、jQuery の $.ajax メソッドがページをリロードし、選択した値を「get」ルートに渡します。
これが私が得られないものです。呼び出しは機能し、成功し、パラメーターがルートに渡され、データベースから読み取るために使用されますが、新しいデータセットを持つすべてのインスタンス変数は、ビューで評価されることを拒否します。代わりに、古いもの (Ajax 呼び出しの前に最初の GET で評価されたもの) がまだ使用されているため、テーブルは古いテーブルのままです。
ビューでインスタンス変数を再度評価するには、Ajax 呼び出しで何を渡す必要がありますか?
これが私のルートです：
get '/admin/mission' do
# load the appropriate js file in template
@js = "mission.js"
# retrieve list of all campagnes, latest on top
@campagnes = Campagne.all :order=>:id.desc
if !params[:campagne]
#puts "camp id retrieved from normal GET"
camp_id = @campagnes[0].id # first campagne in collection is latest
else
#puts "camp id retrieved from ajax call"
camp_id = params[:campagne] # if submitted via Ajax
end
# retrieve list of missions for selected campaign
@missions = Mission.all :campagne_id => camp_id, :order=> :numero.asc
erb :admin_mission , :layout => !request.xhr?
end
私の見解（重要なものまで編集）
<div id="mission_form">
<form class="cmxform" name="mission" action="/admin/mission" method="post">
<ol>
<li>
<label for="campagne" id="campagne_label" >Choisir une Campagne</label>
<select id="campagne" name="campagne">
<% @campagnes.each do |c| %>
<option value="<%= c.id %>"> <%=h c.nom %> </option>
<% end %>
</select>
</li>
<li>
<label for="numero" id="numero_label" >Numéro</label>
<input type="text" name="numero" id="numero" placeholder="" size="5"/>
<label class="error" for="numero" id="numero_error">Champ obligatoire.</label>
</li>
<li>
<label for="nom" id="nom_label" >Nom de la mission</label>
<input type="text" name="nom" id="nom" placeholder="" size="50"/>
<label class="error" for="nom" id="nom_error">Champ obligatoire.</label>
</li>
<li>
<input type="submit" name="submit" id="submit_btn" class="button" value="Ajouter" />
</li>
</ol>
</fieldset>
</form>
</div>
<table div="table_mission" id="hor-minimalist-a" summary="Main Table">
<!-- Table header -->
<thead>
<tr>
<th scope-"col">Campagne</th>
<th scope="col">Mission</th>
<th scope="col">Briefing</th>
<th scope="col">De-Briefing</th>
</tr>
</thead>
<!-- Table body -->
<tbody>
<% @missions.each do |m| %>
<tr>
<td>
<%=h m.campagne.nom %>
</td>
<td>
#<%=h m.numero %>: <%=h m.nom %>
</td>
<td>
<%=h m.briefing %>
</td>
<td>
<%=h m.debriefing %>
</td>
<td>
<span><a href="/<%= m.id %>">[edit]</a></span>
</td>
<td>
<class="meta"><%= m.created_at.strftime("Created: %m/%d/%Y") %>
</td>
</tr>
<% end %>
</tbody>
</table>
そして私のスクリプトファイル（重要なビットを保持するために編集されています）：
$(document).ready (function() {
// hide all error and confirm labels
// refresh mission table if change campagne dropdown
$('#campagne').change(function() {
var inputs = [];
$(':input').each(function () {
inputs.push(this.name + '=' + escape(this.value));
});
$.ajax({
data: inputs.join('&'),
url: '/admin/mission', // couldhave used: this.action if it was a submit...
timeout: 2000,
error: function() {
console.log("Failed to submit"); // remove when going live
},
success: function() { //
$('label#campagne_confirm').show(function() {
console.log("Sucess!");
});
}
});
});