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

Django記事シリーズ

の4つ目。

Python 3.6.4
Django 2.0.3
npm 5.7.1
jquery 3.3.1
jquery-ujs 1.2.2

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: '本当に削除してもよろしいですか？' }
  送信