Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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(){
      /* 削除完了後処理 */
      //アニメーションで行を消すなど
      ...
  });

}

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした