LaravelでjQueryメモ

はじめに

メモいろいろ。
jQueryが多い。

バージョン指定

コンポーザーでプロジェクトを作るときバージョンを指定しないと自動で最新のバージョンになる。

バージョンを指定しない↓

ターミナル

composer create-project --prefer-dist laravel/laravel memoapp

バージョンを指定↓

ターミナル

composer create-project --prefer-dist laravel/laravel memoapp 5.7

バージョンを確認↓

ターミナル

php artisan --version

post()

jQueryのpostメソッド。
画面遷移なしでのDB処理に使った。

test.blade.php

<form id="post">
  @csrf
  <input type="hidden" name="data1" value="こんにちは">
  <input type="text" name="data2">
</form>
<button onclick="postAction()">post</button>

<script>
  const postAction = () => {
    $.post("home", $("#post").serialize())
    .done(function(data){
      console.log(data);
    }).fail(function(data) {
      console.log("失敗");
    });
  }
</script>

フォームを用意しておいてスクリプトでpost、画面遷移をせずにコントローラー側で処理を行える。

ボタンでメソッドを呼びformを指定してpostしている。
done()でpost完了後の処理を、dataでコントローラー側でreturnした値を受け取れる。
fail()で失敗した時の処理を行う。

ここでのhomeはルーティングで指定した値、URL等。

test.blade.php

<script>
  $csrf_token = '<?php echo csrf_token(); ?>';
  const deleteMemo = memo => {
    if (confirm("削除ok?")) {
      $.post("delete", {"id" : $(memo).val(),  "_token" : $csrf_token})
      .done(function(data) {
        toastr.success('メモを削除しました');
      });
    }
  }
</script>

フォームを用意しないでpostすることもできる。
postの第二引数で送る値を用意している。

自分用に少し具体的なまま。

submitセレクター

スクリプト内

// ボタンを押せなくする
$(":submit").prop("disabled", true);
// 戻す
$(":submit").prop("disabled", false);

submitタイプのbtnやinputを指定できる。

上記のpost()を使った時、処理待ちの間ボタンを押せないようにしたかった。

たくさんボタンがあっても一括で封印できて楽だった。

parents() find()

いっぱい使った。
ボタンがたくさんあって押したボタンの親要素内でなんかしたいときとか。

ボディ

<div>
  <div class="oya">
    <div>
      <div>
        <p class="memo">ここを書き換えたい</p>
      </div>
    </div>
    <div>
      <button onclick="kakikae(this)">ボタン</button>
    </div>
  </div>

  <div class="oya">
    <div>
      <div>
        <p class="memo">ここは書き換えたくない</p>
      </div>
    </div>
    <div>
      <button onclick="kakikae(this)">ボタン</button>
    </div>
  </div>
</div>

こんなとき。

スクリプト

const kakikae = btn => {
  $parent = $(btn).parents(".oya").get(0);
  $($parent).find(".memo").text("完了");
}

上のボタンを押せば上のpタグだけを書き換えられる。

muuri

動きが楽しい。
https://tr.you84815.space/muuri/index.html
https://coliss.com/articles/build-websites/operation/javascript/responsive-grid-layouts-muuri.html

見よう見まねで理解が怪しいので紹介だけ。

おわり

いったんおわり。