#はじめに
JSを使った非同期処理を簡単に書いてみます。
関連事項を次の記事に書いています。
#前提
使用するのは、
Ruby on rails
Haml
jQuery
です。
CSSは特に指定しません。
#実行
次のファイルを用意します。
Gemfile
gem 'jquery-rails'
これを記述して、bundle install
します。
(ディレクトリが、アプリのディレクトリになっている事を確認。pwd
というコマンドで確認可能)
application.js
//= require jquery
この記述を忘れるとエラーになります($とは何ですか?
という感じのエラー)
sample.haml.html
= form_with model:@sample, local: true do |f|
= f.text_area :name, placeholder: "サンプル", class: "sample-form"
.add-text
これがビューデータとなります。
sample.js
$(function(){
$(".sample-form").on("change" functon(){
var sampletext = $(this).val;
$(".add-text").text(sampletext):
})
});
これが非同期処理の中身になります。
これで、テキストエリアに文章を入力すれば、同じ文章が.add-text
の部分に表示されます。
※随時更新します