質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

2458閲覧

アラートを出す際に、後に出さなければならないアラートが一瞬出てくる。Promiseを使用して順序を付け、出てこないようにしたい。(sweetalert2)

ponchoccho

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2018/10/03 12:11

編集2018/10/23 01:40

前提・実現したいこと(10/23修正)

(修正版)
下記ソースコードから、
そのデータが削除できるかどうかの処理(消してはいけないデータがあるため)を
「ajaxRun.check(rowiddata);」で確認して、

そのチェックがtrueだった場合に、
削除確認ダイアログ(~のデータを削除しますか?)を表示し、
「はい」を選んだ場合に
「ajaxRun.delete(rowiddata);」の処理を行いたいです。

(修正前)
下記ソースコード
ajaxRun.check(rowiddata);
を実行後に、
swal内の
ajaxRun.delete(rowiddata);
を実行したいです。

Promiseを使用するといただき、
試してみたのですが、
出来ずに困っています。

発生している問題・エラーメッセージ(10/23修正)

(修正版)
「ajaxRun.check(rowiddata);」でひっかかった(削除してはいけないデータ)場合に、
先に「ajaxRun.check(rowiddata);」のアラートが出なければいけないのに、
一瞬「ajaxRun.delete(rowiddata);」のアラートが出てきてしまいます。

(修正前)
ほんの一瞬、
ajaxRun.delete(rowiddata);
の「コード:"" のデータを削除しますか?」メッセージ(アラート)が出てきてから、
ajaxRun.delete(rowiddata);
の「このコードは使用中のため削除できません」のメッセージ(アラート)
が出てきます。
(スクショ取ろうと試みましたが、できませんでした)

参考にならないと思いますが、アラートの画像添付します。
イメージ説明
イメージ説明

該当のソースコード

JavaScript

1 2var rowiddata = $(this).data("row-id"); 3 4ajaxRun.check(rowiddata); 5 6 swal({ 7 title: "コード:" + $(this).data("row-id") + " のデータを削除しますか?", 8 type: 'warning', 9 showCancelButton: true, 10 confirmButtonColor: '#3085d6', 11 cancelButtonColor: '#d33' 12 }).then(function (result) { 13 if (result.value) { 14 ajaxRun.delete(rowiddata); 15 swal({ 16 title: '削除しました', 17 type: 'success' 18 }).then(function () { 19 location.reload(); 20 }) 21 } 22 else { 23 swal({ 24 title: '削除しませんでした', 25 type: 'error' 26 }).then(function () { 27 location.reload(); 28 }) 29 } 30 }) 31

JavaScript

1var ajaxRun = { 2 //削除 3 delete: function (rowiddata) { 4 var Delete_id = rowiddata 5 var Delete_class = "削除"; 6 7 $.ajax({ 8 type: "post", 9 url: "test.ashx?Method=delete", 10 async: true, 11 data: { 12 req: JSON.stringify({ 13 Delete_id: Delete_id, 14 Delete_class: Delete_class 15 }) 16 }, 17 dataType: 'json', 18 beforeSend: function () { 19 common.elementsToDisabled(); 20 } 21 }) 22 .done(function (json) { 23 if (json.result === "OK") { 24 } 25 else if (json.result === "NoRecord") { 26 swal("データがありません", "", "error"); 27 return false; 28 } 29 else { 30 swal("削除出来ませんでした", "", "error"); 31 return false; 32 } 33 }) 34 .fail(function () { 35 swal("削除出来ませんでした", "", "error"); 36 return false; 37 }); 38 }, 39 //チェック 40 check: function (rowiddata) { 41 var Check_id = rowiddata; 42 43 $.ajax({ 44 type: "post", 45 url: "test.ashx?Method=check", 46 async: true, 47 data: { 48 req: JSON.stringify({ 49 Check_id: Check_id, 50 }) 51 }, 52 dataType: 'json', 53 beforeSend: function () { 54 common.elementsToDisabled(); 55 } 56 }) 57 .done(function (json) { 58 if (json.result === "OK") { 59 } 60 else if (json.result === "NoRecord") { 61 swal("このコードは使用中のため削除できません", "", "error"); 62 return false; 63 } 64 else { 65 swal("失敗しました", "", "error"); 66 return false; 67 } 68 }) 69 .fail(function () { 70 swal("データがみつかりませんでした", "", "error"); 71 return false; 72 }); 73 return; 74 } 75} 76

試したこと

var checkmanage = ajaxRun.check(rowiddata);
のように各自var化して、
setTimeout(checkmanage, 1000);
とsetTimeoutしてみても、反応せず。

ajaxRun.delete(rowiddata)をfunctionで括り、
それをvar化して
setTimeoutで行ってみると、
ajaxRun.checkcheck(rowiddata)の処理のみが行われました。

補足情報(FW/ツールのバージョンなど)

使用
sweetalert2 v7.26.29
visual studio 2017

追記(10/11)

コメントにて、
Promiseを使用するとあったので
試しに

JavaScript

1var rowiddata = $(this).data("row-id"); 2 3let promise = new Promise((resolve, reject) => { // #1 4 console.log("#1") 5 resolve(ajaxRun.check(rowiddata)) 6}) 7 8var swaldelete = swal({ 9 title: "コード:" + $(this).data("row-id") + " のデータを削除しますか?", 10 type: 'question', 11 showCancelButton: true, 12 confirmButtonText: 'はい', 13 confirmButtonColor: '#3085d6', 14 cancelButtonText: 'いいえ', 15 cancelButtonColor: '#d33' 16}).then(function (result) { 17 if (result.value) { 18 ajaxRun.delete(rowiddata); 19 swal({ 20 title: '削除しました', 21 type: 'success' 22 }).then(function () { 23 location.reload(); 24 }) 25 } 26 else { 27 swal({ 28 title: '削除しませんでした', 29 type: 'warning' 30 }).then(function () { 31 location.reload(); 32 }) 33 } 34}) 35 36promise.then((msg) => { // #2 37 return new Promise((resolve, reject) => { 38 setTimeout(() => { 39 console.log("#2") 40 resolve(swaldelete) 41 }, 10000) 42 }) 43}).then((msg) => { // #3 44 console.log('#3') 45 console.log(msg) 46}).catch(() => { // エラーハンドリング 47 console.error('Something wrong!') 48})

をやってみましたが、何も変わりがありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/10/19 15:36

前提・実現したいことに「ajaxRun.check(rowiddata);を実行後に、swal内のajaxRun.delete(rowiddata);を実行したいです。」とありますが、これは実現したいことを正しく表現できていますか?実際にしたいことは、削除確認ダイアログを表示した後に、ajaxRun.delete(rowiddata)を実行し、その後、削除完了ダイアログを表示することではありませんか?
ponchoccho

2018/10/23 01:28

そのデータが削除できるかどうかの処理(消してはいけないデータがあるため)を 「ajaxRun.check(rowiddata);」で確認してます。 そのチェックがtrueだった場合に、 削除確認ダイアログ(~のデータを削除しますか?)を表示し、 「はい」を選んだ場合に 「ajaxRun.delete(rowiddata);」の処理を行いたいです。 しっかりとした日本語で書いておりませんでした(今もしっかりとはしていないと思いますが)。 失礼致しました。 そしてお返事遅れてしまい大変申し訳ありません。
guest

回答2

0

自己解決

自己解決しました。

JavaScript

1ajaxRun.check(rowiddata); 2 3if (!check) return; //追加 4 5swal({ 6 title: "コード:" + $(this).data("row-id") + " のデータを削除しますか?", 7 type: 'warning', 8 showCancelButton: true, 9 confirmButtonColor: '#3085d6', 10 cancelButtonColor: '#d33' 11}). //(以下略) 12

JavaScript

1var ajaxRun = { 2 //チェック 3 check: function (rowiddata) { 4 var Check_id = rowiddata; 5 6 $.ajax({ 7 type: "post", 8 url: "test.ashx?Method=check", 9 async: false, //trueから変更 10 data: { 11 req: JSON.stringify({ 12 Check_id: Check_id, 13 }) 14 }, 15 dataType: 'json', 16 beforeSend: function () { 17 common.elementsToDisabled(); 18 } 19 }) //(以下略)

Promise使用せずにいけました。
使用しなければならないものだと思い、
「必ず使用する」みたいな言い方で質問をしてしまったこと、お詫びいたします。

投稿2018/10/23 07:32

ponchoccho

総合スコア17

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ちょっとどうしたいのかわからないのですが、そのように書いているためそう動いています。

JavaScript

1ajaxRun.check(rowiddata);

の結果を待ってから処理するのであればcheck()メソッドでPromise(jqXHRオブジェクト)を返すべきです。
そうでなければ後続の処理(ダイアログ表示)が終わったのち、サーバーからのレスポンスが帰ってきて別のダイアログ表示処理が動いてしまいます。

投稿2018/10/09 06:11

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問