ムカデノワラジ

ムカデノワラジ

ガジェット・Webサービス・プログラミング・エンタメについて書く雑記ブログ

MENU

RailsでjavaScriptにデータを渡すgem gonをajax時に再読み込みする

この記事では

RailsjavaScriptにデータを渡すgem gonをajax時に再読み込みする

方法を紹介する。

 

gonを使うとき、一般的にHTML(erb,haml)のhead部分

Gon::Base.render_data  #ruby, railsのversionによってはinclude_gon

を読み込むときにデータをレンダリングする。
したがって、ページを部分的に更新し、ページ全体の再読み込みを行わないajaxによるページの部分的な更新の際はgonの値は更新されない。

しかし、ajaxでページを更新する際に、gonのデータも再定義したい場合もある。


公式では

gon.watch.ooo

とかいうのを使うらしいがどうもうまく動かなかった。


その場合、


1.次のような部分テンプレートを作り、

2.ajax通信の際にrenderして返し、

3.JavaScriptを使って、responseに含まれたpartialをキャッチしてhead要素に追加

すれば良い。
Partial
_gon_partial.html.haml

=Gon::Base.render_data

Controller

def hoge     #ajax通信による処理を行う
  #処理内容
  render partial: gon_partial
end

js

  $('#div').on ('ajax:complete', function(event) { //  #div はajax通信を行うdiv
     var  response = event.detail[0].response;   // renderされた部分htmlはdetail[0].responseで取得できる
      $('head').append(response);  //head要素に= Gon::Base.render_dataを追加
});