ajax通信(サーバからのレスポンス)でテキストコピーボタン付きのポップアップを表示させたい

Question

【問題】
ajax通信によるサーバからレスポンスで、テキストコピーボタン付きのポップアップを表示させたいです。

【調査した事】
現在、aleart関数によりポップアップを表示させていますが、aleart関数だとボタンの追加(カスタマイズ)ができないとオンライン資料に記載されておりました。
また、confirm関数も同様にカスタマイズできないと記載されており、Dialogでポップアップを表示させるとボタンの追加(カスタマイズ)ができると記載されておりました。

【修正点】
以下ソースコードのsuccessのalert部分です。

【コード】
問題のソースコードは以下の通りです。

j$("#reset").click(function (){
        if (confirm("パスワードを再発行します。\nよろしいですか?")) {
            var Id = j$("input[name='Id']").val();
            j$.ajax({
            type        : "POST",
            url         : "./reset",
            data        : "Id=" + Id,
            success     : function(data) {
                          alert('新しいパスワードは、' + data + 'です。');
                        },
            error       : function() {
                            alert("読み込み失敗");
                        }

        });
        }
    });

【実装したいもの】
パスワードを再発行する機能で、サーバーからのレスポンス(変数data)には、生成したPWが入っています。
実装したいものは、生成したパスワード(data)をコピーするテキストコピーボタンを、表示するポップアップに追加したいです。

【構築環境】
・eclipse
・java
・javasclipt

Comments

[yambejp]

ajaxのsuccess/errorは古い書き方です

[m.ts10806]

作業依頼になっています。

[hentaiman]

今の試したコード無しの丸投げ状態だとどんな実装を希望しているのかすら分かりません
daialogが何を指しているのか知りませんが、dialogで作ってみたらいいと思います
それとも参考にしたサイト（？）のdialogが何を意味しているのかすら分からない状態ですか？

[engnao]

yambejpさん
ご回答ありがとうございます。
調べた所、確かにsuccess/errorは古い書き方でした。

$.ajax({
オプション
})
.then(成功時の処理, 失敗時の処理);

今回は既存に合わせるようにコードを書きますが、
次回から上記の方法でコードを書こうと思います。
ありがとうございます。

[engnao]

m.ts10806さん
ご指摘ありがとうございます。
今後質問する際は、充分に注意いたします。

[m.ts10806]

>今後
今からでも試してその結果を追記すれば良い話かと思います。何日も何週間もかかるものでもないでしょうし

Answer 1

Dialogでポップアップを表示させるとボタンの追加(カスタマイズ)ができると記載されておりました。

jQuery UI の Dialog で目的は果たせるのでは？　デモがあるので見てください。ソースもそのページに出ています。

Dialog
https://jqueryui.com/dialog/

ググれば他にも同種のプラグインは見つかると思いますので探してみてはいかがですか。

Comments

[engnao]

多くのご回答、ありがとうございます。
頂きました意見を参考にして、jquery.dialogを使用する事に致しました。
そこで、以下のコードを記述し、再度実行しました。
しかし、ブラウザの管理ツール上にエラー「Uncaught TypeError: Cannot read property 'dialog' of null」が表示され、ダイアログが表示できませんでした。

何度も質問して申し訳ないですが、
この事象について、原因がわかる方、ご教示いただきたいです。

j$("#reset").click(function (){
if (confirm("パスワードをリセットします。\nよろしいですか?")) {
var Id = j$("input[name='Id']").val();
j$.ajax({
type : "POST",
url : "./reset",
data : "Id=" + Id,
}).done(function(data){
$("#Sample_ID").dialog({
modal: true,
autoOpen: false,
title: 'ダイアログを表示',
});
$("#Sample_ID").dialog('open');
}).fail(function(){
alert("読み込み失敗");
});
}
});

[退会済みユーザー]

jQuery ajax とかはとりあえず使うのはやめて、単純に button クリックなどで、中身はクローズボタン一つでもいいので Dialog を表示することはできるのですか？

j$ って何ですか？　その反対 $j は衝突回避とかで時々目にしますけど、それですか？　衝突するなら $("#Sample_ID") も衝突回避が必要とか？　あと Sample_ID って何ですか？

Answer 2

手っ取り早いのだとdialg dialogタグを動的につくることでしょうか

Comments

[yambejp]

でもidを送ってパスワードをリセットし、それがその場で確認できるんだと
アカウントの乗っ取り仕放題だと思いますが・・・

[engnao]

yambejp
管理者が使用するツールですので、そこは問題ないと思います。

[engnao]

yambejp
ご回答ありがとうございます。
・ dialogタグを動的につくる
について、一旦自身でも調査した上、実装してみます。

[yambejp]

流れ的にはこんな感じ
<script>
$(function(){
$('#btn').on('click',function(){
$.ajax({
・・・
}).done(function(data){
$(`<dialog open><input type="text" id="newpass" value="${data}"><input type="button" id="copy" value="copy"></dialog>`).appendTo('body');

});
});
});
</script>

<input type="button" id="btn" value="パスワードリセット">