joppot

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

プログラミング

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

投稿日:

Pocket

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

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

関連記事

ruby on railsに最強のwysiwygエディタ、Squireを導入する

概要 みなさんこんにちはcandleです。今回はruby on railsにsquire editorを導入したいと思います。 squireはオープンソースの便利なwysiwygエディタです。 カスタ …

railsのcarrierwaveとremotipartで画像のアップロードを非同期にしjsonを受け取る

概要 みなさんこんにちはcandleです。今回はremotipartとcarrierwaveを使って画像のアップロードをajax化したいと思います。 railsのフォームはremote設定をするだけで …

Stinger3のURLまたはタブの横にあるロゴを変更する

概要 みなさんこんにちはcnadleです。Stinger3のカスタマイズをしましょう。どんなwebサイトでもURLの周辺にロゴがありますよね。今回はそれを変更します。 条件 WordPressを利用し …

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

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

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

概要 みなさんこんにちはcandleです。今回はrails4上でtwitterbootstrap3のgemを使ってscaffoldしてみたいと思います。 scaffoldとはご存知のようにいわゆるwe …

  • English
  • 日本語

プロフィール


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

スポンサードリンク

アーカイブ