0
0

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 3 years have passed since last update.

【Rails5】 japanMapリンク js.erbファイル内のパラメータ書き方

Last updated at Posted at 2020-11-08

初投稿になります。プログラミング始めて4ヶ月の初心者です。よろしくお願いします。

ポートフォリオ作成の際にjapanMapを使用して8地方ごとにイベントを検索できるようにしました。
その際、地方ごとのリンクに任意のパラメータを渡すのに少し苦労したので、自分で確認用として投稿しています。

今回は application.jsファイルにjapanMapのプログラムを記述しました。

以下が自分の書いたコードになります。

application.js
//検索ページ日本地図
$(function(){
  //8地方でリンク作成
  var areaLinks = {
    1:"/user/index?sort=hokkaido",
    2:"/user/index?sort=tohoku",
    3:"/user/index?sort=kanto",
    4:"/user/index?sort=chubu",
    5:"/user/index?sort=kinki",
    6:"/user/index?sort=chugoku_shikoku",
    7:"/user/index?sort=kyusyu_okinawa",
  };

  //8地方エリア指定
  var areas = [
    {code : 1, name: "北海道", color: "#ab86c4", hoverColor: "#dfcceb", prefectures: [1]},
    {code : 2, name: "東北",   color: "#6d93d1", hoverColor: "#91b0e3", prefectures: [2,3,4,5,6,7]},
    {code : 3, name: "関東",   color: "#f5a164", hoverColor: "#f5c09a", prefectures: [8,9,10,11,12,13,14]},
    {code : 4, name: "中部",   color: "#77e077", hoverColor: "#adedad", prefectures: [15,16,17,18,19,20,21,22,23]},
    {code : 5, name: "近畿",   color: "#ffe966", hoverColor: "#fff2a3", prefectures: [24,25,26,27,28,29,30]},
    {code : 6, name: "中国・四国",   color: "#e68ccc", hoverColor: "#f0b9e0", prefectures: [31,32,33,34,35,36,37,38,39]},
    {code : 7, name: "九州・沖縄",   color: "#de6474", hoverColor: "#f29da9", prefectures: [40,41,42,43,44,45,46,47]},
  ];

  //地図表示設定
  $("#map-container").japanMap({
    width: 600,
    areas  : areas,
    selection : "area",
    borderLineWidth: 0.25,
    drawsBoxLine : false,
    movesIslands : true,
    showsAreaName : true,
    font : "MS Mincho",
    fontSize : 13,
    fontColor :"#777",
    fontShadowColor : "white",
    onSelect : function(data){
    location.href = areaLinks[data.area.code];
  };
});

上記のこの部分がリンクになります。

var areaLinks = {
    1:"/user/index?sort=hokkaido",
    2:"/user/index?sort=tohoku",
    3:"/user/index?sort=kanto",
    4:"/user/index?sort=chubu",
    5:"/user/index?sort=kinki",
    6:"/user/index?sort=chugoku_shikoku",
    7:"/user/index?sort=kyusyu_okinawa",
};

html.erbファイルでは下記のように記述するところを

○○.html.erb
<%= link_to '◯◯', ○◯_path(:sort => 'hokkaido') %>

js.erbファイルでのlink_to の書き方がわからなかった為、

○○.js.erb
1:"/user/index?sort=hokkaido"

のように記述しました。こうすることで任意のparams[:sort]のパラメータを渡すことができました。
[?sort=hokkaido] の部分がパラメーターになります。

○○_controller.rb
def index
    if params[:sort] == 'hokkaido'
        @events = Event.where(prefecture_code: "北海道")
	    @events = @events.page(params[:page]).per(6).order("id DESC")

上記がコントローラーの一部になります。
[if params[:sort] == 'hokkaido']の記述でパラメーターを区別し表示するイベントを変更しています。

初めての投稿で見にくいところ間違いなどあるかもしれませんが最後まで見ていただきありがとうございました。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?