【Rails】"ajax"でupdateへリクエストを送るとredirect_toが機能しない！

ハロハロ〜　しゅんです。

本日は、題名の通り、
「"ajax"でupdateへリクエストを送るとredirect_toが機能しない！」

【結論】redirect_toは普通のHTTPリクエスト時に機能するものなのでajaxで送られたリクエストには反応しません。
（普通の〜というのが語彙力不足ですみません💦）
今回は、AjaxHelperというモジュールを作成し、該当のcontrollerを少し変更して対応しました。

●　Viewの変更

行いません。

●　Module作成

app/controller/concerns/ajax_helper.rb　を作成

module AjaxHelper

def ajax_redirect_to(redirect_uri)

{ js: "window.location.replace('#{redirect_uri}');" }

end

end

●　Controllerの記述

class ItemsController < ApplicationController

# ↓作成したmoduleをincludeします

include AjaxHelper

def update

# ↓これを追加。パスは適宜変えてください。

respond_to do |format|

format.js { render ajax_redirect_to(item_path(@item)) }

end

end

これでOK😄

この作業でajaxから送られてきたリクエストをredirectすることができました。

何か間違いやご指摘などありましたら、宜しくお願いします！

【Rails】自作アクションで" Couldn't find Item with 'id' = "「id」が見つからない！？

●7つのアクション

resourcesを使う事で7つのアクションが簡単に定義できますね😁

resources :hoges

この記述で、hogesコントローラーに対して、

index, new, create, show, edit, update, destroyの７つのルーティングを設定した事になります。

resources :hoges, only: [:index, :show]

上のようにonlyを記述して、指定したアクションだけを定義することもできます。

●自分でアクションを定義することもできます

今回に本題はここから！

７つのアクション以外にも自分でアクションを定義することもできます。

その中で、下のようなエラーが出ました！！！

「id」を見つけて来れなかったと言ってますね。。。。
idが分からんといっているので、パスにidが設定されているか、コントローラーにidを探して持ってくる記述をしているか確認します。

def selling

@item = Item.find(params[:id])

@images = @item.images

end

- @items.each do |item|

　　= link_to selling_mypage_path(item.id), class: "selling_my_item" do

　　.item_screen__box__items

問題なさそう。。。

●自作アクションで「全てのデータを取ってくるのか」「特定のデータを取ってくるのか」を定義する

今回の問題は、routes.rbへの記述の仕方でした。
自作アクションの場合、それに特定にのidを指定するかどうかが鍵になります。

resources :リソース名 do

member do

HTTPメソッド名 'アクション名'

end

collection do

HTTPメソッド名 'アクション名'

end

end

追加で作ったアクションは「memberブロック」か「collectionブロック」に記述します。
この２つの違いは、
member・・・特定のデータを対象としたアクション＝リクエストにidを含ませる
collection・・・全てのデータを対象としたアクション

つまり、今回は特定のデータを対象としたアクションなのにも関わらず、collection内に該当アクションを定義していたことが原因によるエラーでした🙂

resources :mypages do

member do # idありの自作アクション

get :selling

end

collection do #idなしのあ自作アクション」」

get :items_screen

get :logout

end

end

これで解決しまいした✨

【Rails】gretelを使ってパンくずリストを作成！

●前書き

某ECサイトのコピーサイトを作成しています。

今回はいわゆる、「パンくずリスト」を実装していきます😊

●パンくずリストとは？

パンくずリストとは、「Webサイト上でユーザーが今、どの位置にいるのか」を見て分かるようにするのリストです。

ヘッダーの下辺りに表示されていること殆どだと思います。
なぜ「パンくず」というのかは、、知りませんww

上の写真の（トップページ→マイページ）みたいに、階層順に表示されています。

" gretel " というgemを使って実装していきます。

（名前、かわいいなww）

早速、いきましょう♫

●gretel導入

GitHub
https://github.com/lassebunk/gretel

公式
https://www.rubydoc.info/gems/gretel

●gretelをインストール

Gemfileにこちらを記載

gem "gretel"

$ bundle install

忘れずに、bundle install

設定ファイルを作成しますので、下記のコマンドを実行

$ rails generate gretel:install

こちらを実行すると下記のファイルが作成されます。

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

では、追記していきます。

crumb :root do
  link "トップページ", root_path
end

crumb :muypages do
  link "マイページ", mypages_path
 parent :root
end

---------------------------------------------------------------------

:mypage  設定したファイルを呼び出しています。

"マイページ"  ここに記載したテキストがパンくずリストに表示されます。

mypages_path  呼び出し元のパスを指定します。※rails routesで調べてね

--------------------------------------------------------------------------------

●　ビューを作成していきます。

※今回は実装を焦点を当てたいのでCSSのの記述を省きます。

●ビューを部分テンプレート化します

layouts/_breadcrumbs.html.haml

.breadcrumbs
  = breadcrumbs pretext: "",separator: " › ", class: "breadcrumbs-format"

----------------------------------------------------------

pretext → パンくずリストの先頭に挿入するテキストを記述します。何も記述しないので「" "」としています。

separator → パンくずの区切り文字を指定しています。「&rsaquo」と記述すると「>」になります。

-----------------------------------------------------

●呼び出したいビューに記述します

- breadcrumb :mypages
= render "layouts/breadcrumbs"

ここまできたらこのようなビューになります。

次にマイページのより深い階層に遷移していきます。

config/breadcrumbs.rb

の中で親となる階層を「parent」とするように記述していきます。

crumb :root do
  link "トップページ", root_path
end

crumb :mypages do
  link "マイページ", mypages_path
 parent :root
end

crumb :mypage do
  link "プロフィール", mypage_path
 parent :mypages
end

このように記述すると・・・

こんな感じになります。

●まとめ

今回は、名前がとってもファンタジーなgem、「gretel」を使ってパンくずリストを作成しました。

至らない点、間違っている点など御座いましたらご指摘いただけると嬉しいです。

それでは、また宜しくお願いします😄

このブログは・・・

ハロハロー、しゅんです。

現在、テックエキスパート渋谷校に短期集中・転職コース66期として通っています。
遅すぎるくらいですが、アウトプットのためにブログを開設しました。

自分自身の備忘録としてのアウトプットがメインではありますが、発信するからには見て下さった方にとって有益な情報を届けられるように頑張ります！

不慣れな点、至らぬ点、それ間違ってるぜ！、、、などご指摘いただけると嬉しいです！

一先ず、Twitter連携とかの設定してきますww