Masahiro Okubo

RailsのformをajaxでSPAっぽく実装する方法

RailsのformをajaxでSPAっぽく実装する方法

SPAっぽいformの実装を無理なく実装する方法調べたら結構簡単そうにできたので、念の為記事で残してます

まずはformに remote: true を入れて非同期にします

<%= simple_form_for @order, url: path入れてください, remote: true do |f| %>

その後は、controller側で、jsonをreutrn

def create
  if @hoge.save
    render json: @hoge
  else
    render json, {}, status: 422
  end
end

次はjavascriptをこんな感じで実装

成功と失敗をそれぞれ定義しておいて、任意のイベントを発火させることで、SPA的な実装も簡単にいけました

$(document).on('ajax:success', () => {
  $('#priceModalTrigger').trigger('click');
});
  
$(document).on('ajax:error', () => {
  console.log('失敗!!!!');
});

参考記事

How to Use remote: true to Make Ajax Calls in Rails

Rails way of AJAX with remote: true

Buy Me A Coffee

関連記事

copyright© 2016-2021 Masahiro Okubo