rails javascript/jqueryの実装 メソッド gem

覚えることが多いので覚えた内容の備忘録を書こうを思います。

rails-ujs

基本rails5.1以降にかかれている記述ですがその意味は

Ajax の送受信の "送" の部分を JavaScript で実装せずにやってくれるライブラリです。

Rails 5.1 から導入された form_with を使ってフォームを構築し
form でデータを送った後のレスポンスだけを JavaScript で書けば良くなります。

application.js

//= require rails-ujs 

FormData

formタグ内の要素のデータをオブジェクトにしたもの
inputに入力された情報が、javascriptのオブジェクトとしてキーバリュー形式で表される。

new FormData(フォーム要素)とすることでFormDataを作成できます。

$(function(){
  $('#new_comment').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this); //ここがあたります。
  })
})

Ajaxでコメントの保存

$(function(){
  $('#new_comment').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action')
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
  })
})

attrメソッド

要素が持つ指定属性の値を返します。
要素が指定属性を持っていない場合、関数はundefinedを返します。

processDataオプション

デフォルトではtrueになっており、dataに指定したオブジェクトをクエリ文字列に変換する役割があります。

クエリ文字列とは、WebブラウザなどがWebサーバに送信するデータを
URLの末尾に特定の形式で表記したものの事です。

contentTypeオプション

サーバにデータのファイル形式を伝えるヘッダです。
こちらはデフォルトでは「text/xml」でコンテンツタイプをXMLとして返してきます。

ajaxのリクエストがFormDataのときはどちらの値も適切な状態で送ることが可能なため
falseにすることで設定が上書きされることを防ぎます。
FormDataをつかってフォームの情報を取得した時には必ずfalseにするという認識で構いません。

jbuilder

rails newコマンドでアプリケーションを作成した際にgemfileにデフォルトで記述されているgemで
入力データをJSON形式で出力するテンプレートエンジンです。

例としてはこちら

views/comments/create.json.jbuilder

  json.text  @comment.text
  json.user_id  @comment.user.id
  json.user_name  @comment.user.nickname

テンプレートリテラル記法

ダブルクオートやシングルクオートの代わりにバックティック文字で囲むことで
複数行文字列や文字列内挿入機能を使用できます。
shift + @
で出てきます。

総まとめ

$(function(){
  function buildHTML(comment){
    var html = `<p>　　
                  <strong>
                    <a href=/users/${comment.user_id}>${comment.user_name}</a>
                    ：
                  </strong>
                  ${comment.text}
                </p>`
               //テンプレートリテラル記法
    return html;
  }
  $('#new_comment').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData(this);
    var url = $(this).attr('action');
    $.ajax({
      url: url,
      type: "POST",
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){ //更新の成功
      var html = buildHTML(data);
      $('.comments').append(html);
      $('.textbox').val('');
      $('.form__submit').prop('disabled', false); //submitボタンを一度押したらdisabled属性というボタンが押せなく属性の追加。
    .fail(function(){ //更新の失敗
      alert('error');
    })
    })