.js.erbに配列を渡して、HTML書き換えを行う。
前回の記事であった「selectedの値を非同期で書き換える」を実現するための方法。
手順としては
- コントローラでJSON化した配列を準備。
- 置き換えを行いたいelementに同じclassを指定しておき、Jqueryですべて取得
- 繰り返し処理を行いその回数をindexで取得。配列のindexとして利用して書き換えを行う。
お題を少し変えて、「表の列数分だけ列車名の置き換えを非同期で行う。」にした。
ビューでは以下のようにclassを指定し、書き換えを行うターゲットのマーカーとしている。
<table class="trains_table"> <tr><td>東海道線</td><td class="express">踊り子 </td></tr> <tr><td>内房線</td><td class="express">しおさい</td></tr> <tr><td>中央線</td><td class="express">あずさ</td></tr> <tr><td>高山本線</td><td class="express">ひだ</td></tr> <tr><td>高崎線</td><td class="express">みなかみ</td></tr> <tr><td>常磐線</td><td class="express">ひたち</td></tr> </table>
コントローラーは以下のようにJSONに変換している
def table @array = ["スーパービュー踊り子","あやめ","かいじ","ワイドビューひだ","スワローあかぎ","スーパーひたち"].to_json.html_safe respond_to do |format| format.js end end
ajaxで返されるJSファイルは以下のように指定している。
$(".express").each(function(index,element){
console.log(index + $(element).text());
var array = <%= @array %>;
$(element).text(array[index]);
})each文の回数はindexで取得することが出来る。これを配列のindexの要素取得に利用している。
これで、データベースから取得した、すでに選択されている選択肢を配列で所得し、その順番に応じてHTMLの書き換えでselectedを書き換える、ということが可能になる。
