Jqueryの実行を関数にしておき、OKのときだけ実行するには？

実現したいこと

以下のHTMLで、ダイアログでOKのときだけjQueryを実行したい

<select name="userid">
<option value="">選んでください</option>
<option value="1">1001</option>
<option value="2">1002</option>
</select>
<textarea  id="userarea"></textarea>
<a href="#dialog" okEvent="func_example()" class="dialog" title="実行します。よろしいですか？"><button type="button" rel="tooltip" data-original-title="実行"><img src="./images/icon.jpg"></button></a>

function func_example(
  // 実行する内容 (A)
)

  // 実行したい処理 (A)
      $(function(){
            // Ajax button click
      //      $('#ajax').on('change',function(){
                $.ajax({
                    url:'./request.php',
                    type:'POST',
                    data:{
                        'userid':$('#userid').val()
                    }
                })
                .done( (data) => {
                    $('#userarea').html(data);
                    console.log(data);
                })
                .fail( (data) => {
                    $('.result').html(data);
                    console.log(data);
                })
                .always( (data) => {
                });
       //     });
        });

試したこと

ダイアログを表示させるところまではできたのですが、OKしたときに実行するファンクションをどのように記述したらいいのかがわかりません。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

window.confirm() は「OKのときは true 」「キャンセルのときは false 」の真偽値が返ってくるので、それで条件を分岐すれば可能です。

window.confirm - Web API | MDN

html
1<!DOCTYPE html>
2<head>
3  <meta charset="UTF-8">
4</head>
5<body>
6  <div id="text"></div>
7  <button id="button">クリック</button>
8  <script src="https://code.jquery.com/jquery-3.4.1.js"
9    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
10    crossorigin="anonymous"></script>
11  <script>
12    document.getElementById('button').addEventListener('click', () => {
13      var result = window.confirm('「OK」か「キャンセル」を選んでください。');
14      if (result) {
15        func_example();
16      }
17    });
18
19    function func_example() {
20      $.ajax({
21        url: './request.php',
22        type: 'POST',
23        data: {
24          test: 'data',
25        },
26      }).done(() => {
27        $('#text').text('成功');
28      }).fail(() => {
29        $('#text').text('失敗');
30      });
31    }
32  </script>
33</body>
34</html>

投稿2019/06/30 14:44

編集2019/07/01 14:18

syuus

総合スコア403

cherry-pie

2019/07/01 12:29 編集

ありがとうございます。以下のような書き方でよいのでしょうか？ functionの中に処理を、どう記述したらいいのかがわかっていません。こういったサンプル的なものも探してみたのですが、どうもみつからずこちらに質問をしました。 // 実行したい処理 ``` function func_example(text){ $(function(){ $.ajax({ url:'./request.php', type:'POST', data:{ 'userid':$('#userid').val() } }) .done( (data) => { $('#userarea').html(data); console.log(data); }) .fail( (data) => { $('.result').html(data); console.log(data); }) .always( (data) => { }); }); } ```

syuus

2019/07/01 14:15

func_example() 内の処理ついては、今回のご質問では言及されていないので特に触れていません。書く内容は何をしたいのかによりますので、正しいかどうか判断できません。 jQuery のドキュメントや参考になりそうなサイトをご確認いただいて、分からないことがあれば別のご質問として投稿されたほうが良いかと思います。 https://api.jquery.com/jquery.ajax/

行動規範の内容に同意します