joppot

コピペで絶対動く。説明を妥協しない

プログラミング

railsのscaffoldでremote formを使ってフォームの送信をajax化する

投稿日:


Tech Valves

概要

みなさんこんにちはcandleです。
今回はrailsのformをremoteを使ってajaxしたいとおもいます。
正直、解説するまでもなく簡単です。


前提

適当なrailsプロジェクトが存在する

scaffoldの使い方を把握している

twitter bootstrap gemを使って解説をしています
twiwtter bootstrap gemはデザイン名で見やすくする為に使うので、無くても構いません。
もしも、記事と同じ様に、進行したい場合は下のURLを参考にしてください。

ruby on rails4でtwitter bootstrap 3のgemを使用してscaffoldを作成する



scaffoldを作成する

scaffolを作成します。
railsのプロジェクト内で以下のコマンドを実行して、作成します。

rails g scaffold RemoteForm title:string description:text

作成されたら、マイグレーションファイルをデータベースに反映させます。

rake db:migrate

twitter bootstrap gemを入れている場合は
下のコマンドでデザインを適応させます。

rails g bootstrap:themed RemoteForms

これでscaffoldが完成しました。

普通にフォームを送信してみる

以下にアクセスすると、
http://localhost:3000/remote_forms/new

普通のフォームが出てきます。

basicform

サンプル用に1つ新しくデータを送信しておいてください。
内容を記述して、「Create remote form」を押すと、送信されます。


remoteの属性を与えてajax化する

送信するのみなら、ajax化は楽勝です。

app/views/remote_forms/_form.html.erb

を開いて、form_forの部分を以下の様に変更します。

<%= form_for @remote_form, remote: true, :html => { :class => 'form-horizontal' } do |f| %>

toremote

@remote_formの後に「remote: true」と書くだけです。
ちなみにこちらの表記でも動きます。「data: { remote: true }」

あとは、フォームの値を変更するならい作成するなりして、送信すればそれがajaxになります。
omebagonzaresu

まとめ

ここまで簡単なら、別段記事にしなくても良かったのですが、まとめておきます。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-プログラミング
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

wordpress skeletonを使った開発環境の構築

はじめに みなさんこんにちはcandleです。wordpressは大変便利なのですが、いまいちgitで管理するのが難しいものです。 というのも、wordpress全体をgit管理対象にしてしまうと、w …

railsのfluent-loggerとdevise gemを使ってユーザーの行動をfluentdサーバに収集する

概要 fluentdと言えば、ビックデータで扱うようなデータを集め出力するサーバですが、これとrailsのfluent-logger gemとdevise gemを組み合わせてユーザーの行動ログをとっ …

ruby on rails のckeditor gemの機能ボタンをカスタマイズする

概要 みなさんこんにちはcandleです。今回はruby on rails のckeditor gemのショートカットボタンをカスタマイズして自分が必要な機能のみを表示してみましょう。 前提 cked …

ruby on railsでpdfファイルをダウンロードさせる

概要 みなさんこんにちはcandleです。pdfファイルのダウンロードのやり方を紹介します。 前提 railsの環境が出来ている twitterbootstrap gem を使用した環境で説明して行き …

react0.14 + gulp + express + babelでReactのチュートリアル環境構築をする

概要 みなさんこんにちはcandleです。今回は、react0.14のnodeの環境構築をします。 react0.14はまだまだ、開発段階にあり、しばしば仕様変更が行われています。 0.13の時では使 …

  • English
  • 日本語

ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー