読者です 読者をやめる 読者になる 読者になる

Railsのformで:remote => trueしてAjaxする

【書きかけかも】 Railsのformで、シンプルに画面遷移なくAjaxで登録・表示を行う方法。
さらにparticalを使ってすっきり。
他に正しいやり方があったらおしえて。

xxx.html.erb

重要なのは、form_tagに「:remote => ture」を追加すること。
RailsさんありがとうこれだけでAjax通信にしてくれる

<%= form_tag ({:controller => "コントローラー名",:action => 'yyy(Ajax通信をキャッチするアクション名)'}), :remote => true, :id => 'new_entry' do %>
<%= hidden_field_tag :authenticity_token, form_authenticity_token %>
<%= submit_tag '登録', :class => 'button on-right' %>

yyy - コントローラーでのキャッチ

コントローラーでAjax通信をキャッチするアクションを作成。
ここでメンバにした@eはあとでjs.erbやparticalテンプレートの中で使える!
さらに、renderを呼ぶことで、yyy.js.erbがレスポンスとして帰ってくるという、すばらしい仕様

def yyy
  @e = Entry.new(params[:entry]) # Entryモデルとして

  if @e.save
    render
  else
    render json: 'render error'
  end
end

yyy.js.erb

レスポンスを用いてhtml上の要素に登録内容を表示する。
なんとpartialだって使えちゃう
<%=j render 'yyy' %>によりparticalとして準備する_yyy.html.erbが使えるようになる
<%=j %>はエスケープ

$('#entry_list').prepend($("<%=j render 'yyy' %>").hide().fadeIn('slow'));

_yyy.html.erb - 要素レンダリング用partial

レンダリング用のpartialで、メンバ変数にした@eを用いて登録要素をレンダリング。すばらしい

<h1><%= @e.id %></h1>

規約は多いけど、理解するとかなり便利?

Rails4とMySQLでのプロジェクト作成

これからはきちんと覚書を残そう.

プロジェクトディレクトリを作成し,bundle init ,さらにbundle install

$ mkdir dk_port
$ cd dk_port
$ bundle init

bundle initで作成されたGemfileでrailsを有効にする

$ emacs Gemfile
source "https://rubygems.org"
 
gem 'rails'

bundleで入れるものは vender/bundle に配置する.railsコマンドについても,bundle exec ~~として利用する.

gem をインストールするパスを指定して,bundle installする.

$ bundle install --path vendor/bundle

rails new で プロジェクトを新規作成

ここで,プロジェクトを新規作成.データベースにはMySQLを指定する.

  • -d: データベースの種類を指定
  • -T: test::unitを含まない
  • --skip-bundle: bundle install
  • edge: github リポジトリ上の最新のコードから作成
$ bundle exec rails new . -d mysql -T --skip-bundle --edge

bundle install すると必要なGemが入る

$ emacs Gemfile
source 'https://rubygems.org'

gem 'rails',     github: 'rails/rails'
gem 'arel',      github: 'rails/arel'

# Use mysql as the database for Active Record
gem 'mysql2'

# Use edge version of sprockets-rails
gem 'sprockets-rails', github: 'rails/sprockets-rails'

# Use SCSS for stylesheets
gem 'sass-rails', github: 'rails/sass-rails'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', github: 'rails/coffee-rails'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

# Use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.1.2'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

Gitリポジトリを初期化

この辺りでgitを設定する.

$ git init
$ git add .
$ git commit -m "first commit"

プロジェクト用のMySQLユーザーを作成する

MySQLにログインしてユーザーを作成する.

$ mysql -u root -p
# パスワード入力

ユーザー作成.

mysql> GRANT ALL PRIVILEGES ON *.* TO ユーザー名@localhost IDENTIFIED BY 'パスワード';

ユーザーができているか確認

mysql> select host,user from mysql.user;

config/database.ymlで設定を編集

$ emacs config/database.yml
# MySQL.  Versions 4.1 and 5.0 are recommended.
#
# Install the MYSQL driver
#   gem install mysql2
#
# Ensure the MySQL gem is defined in your Gemfile
#   gem 'mysql2'
#
# And be sure to use new-style password hashing:
#   http://dev.mysql.com/doc/refman/5.0/en/old-client.html
development:
  adapter: mysql2
  encoding: utf8
  database: railsapp_development
  pool: 5
  username: DBユーザー名 #ここと
  password: DBパスワード #ここだけ
  socket: /tmp/mysql.sock
  host: localhost
  charset: utf8
  collation: utf8_general_ci
 
# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  adapter: mysql2
  encoding: utf8
  database: railsapp_test
  pool: 5
  username: DBユーザー名
  password: DBパスワード
  socket: /tmp/mysql.sock
  host: localhost
  charset: utf8
  collation: utf8_general_ci
 
production:
  adapter: mysql2
  encoding: utf8
  database: railsapp_production
  pool: 5
  username: DBユーザー名
  password: DBパスワード
  socket: /tmp/mysql.sock
  host: localhost
  charset: utf8
  collation: utf8_general_ci

rails g を用いてControllerを作成し,確認

$ bundle exec rails g controller Hello index
$ bundle exec rails s

http://localhost:3000/hello/index

削除するには

$ bundle exec rails destroy controller Hello index