2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

javascriptでviewのデータを使いたい時のやり方

Posted at

サイト上のナビゲーションのA/Bテストを実施し、その効果としてどのくらいクリックされるのに差が出るのかというのをやりたかったときに調べたのでメモとして残します。

view内

クリックした時にデータを渡したかったのでviewでは以下のように記述しました。
対象となる箇所にクラスをもたせます。"js-名"というように宣言することでjs内でクラス指定のもと使用することができます。一応インクルードするところも含めておきました、要らないとは思いますが。。。レファレンスも一応載せておきます。http://railsdoc.com/references/javascript_include_tag

<%= javascript_include_tag('hoge') %>
・
・
・
<div class="js-link" data-url-name="hoge">
  <%= link_to 'HOGE', hoge_path %>
</div>
<div class="js-link" data-url-name="hogehoge">
  <%= link_to 'HOGEHOGE', hoge_hoge_path %>
</div>

javascript内

A/Bテストを行いたかったので「指定先のurlにデータurlをpostする」という余計なものまでくっついていますがそこは大目にみてください。
さきほどview内で"js-"とクラスで指定したものをここで使用します。そのクラスの中のdataで指定した文字列を呼び出しています。

$(function() {
  $(".js-link").on("click",function(){
      var urlName = $(this).data("url-name");
      $.post("送信先url", { 
      'url': '/mobile/'+ urlName
    });
  });
});

ここで2つのリンク先をひとつのクリック処理にまとめています。クリックした時にそのクリックしたデータを取得したいので"this"を使用しました。こいつの存在を知らなかった笑。こちらがまとまっていると思います。
http://qiita.com/vvakame/items/74005adacc0e8e2a3cab

まあこんなものを使用しながら対応しました。

ちなみにview内で

<div class="js-link" data-url-name="hoge" data-user-id="<%= @login_user.id %>">
  <%= link_to 'HOGE', hoge_path %>
</div>

のようにrubyを持たせることもできるみたいです。あともう一点、書き方ですがjavascript内でのデータの受け方で

var urlName = this.dataset.urlName;

っていう書き方もできるっぽいです。これらに関しては未だ調べ中です。。。

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?