【初心者質問】aタグ実行前にalert処理を挟みたい

Question

こんにちは！
お世話になっていますm(_ _)m

今回のご相談はタイトルの通り
「aタグ要素をクリックしたときにリンクへ飛ぶ前に処理を挟みたい」という内容です。

以前までは以下の挙動で動いておりました。
【全て削除】をクリック→入力ダイアログが出る→正しいユーザー名を入力した場合にのみ処理

<%= link_to clear_users_url(@user), onClick: "return pass();" do %>
全て削除
<% end %>

function pass(){
  password = window.prompt("削除する場合はユーザーの名前を入力してください");
  if(password == null) {
    return false;
  } else if(password !== "<%= @user.name %>") {
    alert("正しいユーザーの名前を入力してください");
    return false;
  } else if(password == "<%= @user.name %>") {
    return true;
  }
}

ところが、sweet-alertというgemを導入したところ形式が変わり、
公式サイトを見ながらアレコレしてみたものの、上記の処理ができなくなってしまいました。

  function pass(){
    swal({
      title: "全てのデータを削除します",
      text: "削除する場合はユーザーの名前を入力してください",
      type: "input",
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
    }, function(inputValue){
        if (inputValue == null || inputValue !== "<%= @user.name %>") {
          swal.showInputError("正しいユーザーの名前を入力してください");
          return false;
        } else if (inputValue == "<%= @user.name %>") {
          return true;
        }
    });
  };

上記の場合だと、そのままリンク処理が走ってしまいます。
また、変数flagを用意して、

  function pass(){
    var flag = 0
    swal({
      title: "全てのデータを削除します",
      text: "削除する場合はユーザーの名前を入力してください",
      type: "input",
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
    }, function(inputValue){
        if (inputValue == null || inputValue !== "<%= @user.name %>") {
          swal.showInputError("正しいユーザーの名前を入力してください");
          flag = 0;
        } else if (inputValue == "<%= @user.name %>") {
          flag = 1;
        }
    });
   if (flag == 0) {
      return false;
   } else if(flag == 1) {
      return true;
     }
  };

にすると、最初の値がそのまま適用されてしまうのか、どんな場合でもリンクが走りません。。

融通のききにくい使用ですが、何か方法が見つかりそう...で、見つかりません;;
何か解決策の思いつく方がいらっしゃいましたら、アドバイスいただけると助かりますm(_ _)m

Answer 1

k.tadaさんの言うとおり、いろいろやってみたけどfunctionの戻り値がうまく取れないので
やるならこうかなぁ・・・

    <a href="" onclick="return pass('http://www.example.com/');">pass</a>

function pass(url) {

    swal({
      title: "全てのデータを削除します",
      text: "削除する場合はユーザーの名前を入力してください",
      type: "input",
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
    }, function(inputValue){
        if (inputValue == null || inputValue !== "<%= @user.name %>") {
          swal.showInputError("正しいユーザーの名前を入力してください");
        } else if (inputValue == "<%= @user.name %>") {
            window.location.href = url;            
        }
    });

    return false;
}

Comments

[MaShiRo_H]

ご回答ありがとうございます！
上記の方法でうまく動かすことができました！
今までとやり方は異なりますが、正常に動くのでこれでいきたいと思います。

[Mr_Roboto]

動いたみたいでよかったです。

Aタグで使うサンプル検索してみたけど、無いんですよねぇ
なんのための return なのか
もしかしたらもっとエレガントな方法を誰かが答えてくれるかもですね ^^

Answer 2

function pass(){
    swal({
      略
    }, function(inputValue){ 
        if (inputValue == null || inputValue !== "<%= @user.name %>") {
          swal.showInputError("正しいユーザーの名前を入力してください");
          return false;
        } else if (inputValue == "<%= @user.name %>") {
          return true;
        }
    });
  };

ここの return true/falseはswalの引数に渡したメソッドへの戻り値なので、pass()の戻り値にはならないですよ。

対応するならpass()の戻り値(true/false)でリンクの有効無効を切り替えるのではなく、pass()の中でリンク処理自体を行ってしまうのが一番簡単だと思います。

Comments

[MaShiRo_H]

ご回答ありがとうございます！
やはりそれが一番なのでしょうか><
一度その方法で試してみようと思います！！

[MaShiRo_H]

試したところ、やはりその方法が一番のようでしたm(_ _)m
助かりました！ありがとうございました！

Answer 3

手を動かして調べてみましたよっと
最後に return false; を入れると動くみたいですよ。

function pass(){
    swal({
      title: "全てのデータを削除します",
      text: "削除する場合はユーザーの名前を入力してください",
      type: "input",
      showCancelButton: true,
      closeOnConfirm: false,
      animation: "slide-from-top",
    }, function(inputValue){
        if (inputValue == null || inputValue !== "<%= @user.name %>") {
          swal.showInputError("正しいユーザーの名前を入力してください");
          return false;
        } else if (inputValue == "<%= @user.name %>") {
          return true;
        }
    });
    return false;
}

Comments

[Mr_Roboto]

いや、違うな、これじゃダイアログが出るようになるだけでした失礼 ^_^；

[MaShiRo_H]

ご回答ありがとうございます！
試してみたんですが、やはりそうですね×_×;
いろいろ試しても、
・ダイアログが出て、そのまま削除処理
・ダイアログに何をしても常に無反応(return false)
のパターンばかりで。。

Answer 4

JavaScriptの2行目にローカル変数として「flag」が設定してあるのに、「function(inputValue){」内にグローバル変数として「flag」が設定してあるのがおかしいのでは？
if (flag == 0)以降では、2行目で設定されている「var flag = 0」を見に行くので、常にreturn falseされているのかなと。
2行目の「var flag = 0」を削っても同じでしょうか？

Comments

[MaShiRo_H]

ご回答ありがとうございますm(_ _)m

>2行目の「var flag = 0」を削っても同じでしょうか？
削るとダイアログが表示されてすぐ、削除処理が走ってしまいます;

Answer 5

こういうこと？

<a href="?delall=1" onclick="return confirm('削除して良い？');">すべてを削除</a>

Comments

[MaShiRo_H]

ご回答ありがとうございます！m(_ _)m