人生シーケンスブレイク

人生を楽してクリアしたい。当面はPython学習帳

Django 2.x で Rails みたいに jquery-ujs を使って二重submit抑止やconfirmをカンタンに実装する

Django記事シリーズ

の4つ目。

Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク 同様、npmでパッケージ管理し、node_modules/* 以下のファイルを static として読み込める前提。

やりたいこと

Django

  • 削除ボタンなどでconfirmを出す
  • submitボタン押下時に、ボタンをdisableにして連打を抑止する

などを実現したかった。

jquery-ujsをインストールする

github.com をnpm経由でインストールする。

$ npm install --save jquery
$ npm install --save jquery-ujs

インストールしたライブラリ中の jquery/dist/jquery.min.js と jquery-ujs/src/rails.js は、静的ファイルとして読み込めるようにしておく。 Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク 参考。

Templates側の編集

試しにこんな感じに書いてみる。 ソースコードはhamlpyインストール済みの為Haml

%script{ src: "{% static 'jquery/dist/jquery.min.js' %}" }
%script{ src: "{% static 'jquery-ujs/src/rails.js' %}" }

...

%button.btn.btn-outline-primary{ type: 'submit', data-disable-with: '送信中...', data-confirm: '本当に削除してもよろしいですか?' }
  送信

Rails + haml の時と同様、 data-disable-with にsubmit中にボタンに表示したいテキスト、 data-confirm にconfirm に出したいメッセージを書く。

できた

f:id:ShineSpark:20180323203804p:plain

ボタン押した時

f:id:ShineSpark:20180323204343p:plain

submit中

f:id:ShineSpark:20180323204515p:plain

ただここまでやるならRailsでいいんじゃないかな...

参考として、↓のリポジトリソースコードを公開しています。

github.com

みんなのPython 第4版

みんなのPython 第4版