LoginSignup
2
0

More than 5 years have passed since last update.

新しい削除時の仕組みを考えてみた。

Posted at

Symfonyで管理画面を作っている際に、Ajaxで1レコードの削除を実装した時に考えた削除の確認仕組みメモ。

ダイアログ出すのもいいんだけど、マウス動かすのめんどくさいよね?(そうでもない?)

仕組み

削除ボタン押下→待機中になる(1秒間)→もう一度押下で削除

凄くシンプルです。間違ってクリックした時に誤って削除するのも防げるのでこれでも十分かなと。

アイコンはFont Awesome を使ってます。
fontawesome.io

//Row Delete Ajax Axtion
$(document).on('click','button[aria-label=RowDelete]',function(){
  var $button = this;

  //削除ボタン初期アイコン
  var $iconDef = 'fa fa-remove fa-2';
  //削除ボタン待機中アイコン
  var $iconInterval = 'fa fa-refresh fa-spin fa-2';
  //削除中アイコン
  var $iconDelete = 'fa fa-spinner fa-spin fa-2';

  //アイコンが初期の場合
  if( $($button).attr('class') == $iconDef){
      //アイコンを待機中に変更して1秒間待機状態に。
      $($button).attr('class',$iconInterval);
      var $timer = setInterval(function(){
          //アイコンが待機中の場合に時間が来たら初期状態に戻す。
          if( $($button).attr('class') == $iconInterval ){
              $($button).attr('class',$iconDef);
          }
          clearInterval($timer);
      },1000);

      //処理を終了する。
      return 0;
  }

  /* アイコンが待機中の場合削除を実行 */

  //タイマーを削除
  clearInterval($timer);

  //アイコンを削除中アイコンに変更
  $($button).attr('class') == $iconDelete;

  //対象行のボタン関連はすべて押下不可にする。
  $row.find('button').addClass('disabled').prop('disabled',true);

  $.post('action.php',function(){
      /* 削除完了後処理 */
      //アニメーションで行を消すなど
      ...
  });

}

複数件削除したいときに何回もダイアログでるのが嫌いな人は是非使ってみて下さい。
チャタリング起きてるマウスだと危険(!)

2
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
2
0