0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

あっさり読むrails④(非同期処理)

Last updated at Posted at 2020-01-23

#はじめに
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の部分に表示されます。

※随時更新します

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?