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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

4079閲覧

confirm()の代わりにcolorboxを使いたいです。

Wonjun

総合スコア8

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/04/20 02:24

編集2016/04/21 06:46

###前提・実現したいこと
JavaScript(jQuery)でsubmitボタンを押した時にconfirm()の代わりにcolorboxを使いたいです。
サーバからもらったデータを現在作成したデータと比べ、同じデータがあった場合coloboxを出して確認する流れです。
それぞれのcolorboxがconfirm()のようにボタンを押すまで待つ必要があります。

###発生している問題
ボタンを押した時順番的にcolorboxが出てくるのではなく、すべてが終わった後、colorboxが現れます。

###該当のソースコード

jQuery

1$(function(){ 2 $("#testButton").click(function(){ 3 if(data.a == a){ 4 var chk = confirmBox(data.msg_a); 5 if(chk == false) 6 return false; 7 } 8 if(data.b == b){ 9 var chk2 = confirmBox(data.msg_b); 10 if(chk2 == false) 11 return false; 12 } 13 if(data.c == c){ 14 var chk3 = confirmBox(data.msg_c); 15 if(chk3 == false 16 return false; 17 } 18 return true; 19 } 20}); 21 22function confirmBox(msg) { 23 $.colorbox({ 24 html: 25 + msg + "が同一ですが、続きますか?" + 26 "<li><button type='button' id='okButton'>OK</button></li>" + 27 "<li><button type='button' id='cancel'>戻る</button></li>", 28 padding : 5, 29 width:"300px", 30 height:"400px", 31 opacity: "0.8", 32 speed: 200, 33 closeButton: false, 34 onOpen: function() { 35 $("#colorbox").css({ 36 "opacity": 1 37 }); 38 }, 39 onComplete: function(){ 40 $("#okButton").click(function(){ 41 parent.$.colorbox.close(); 42 return true; 43 } 44 $("#cancel").click(function(){ 45 parent.$.colorbox.close(); 46 return false; 47 } 48 } 49 }); 50 }

###試したこと
setTimeoutを使ってみましたけど駄目でした。
debugモードで確かめてみましたけどcolorboxが現れてボタンを押すのを待たずに進んでてreturn true;で終わった後からcolorboxが出てきました。
confirm()の代わりにcolorboxを使って順番的にボタンを押したら次に進むようにしたいです。
コードを略した時に付けてた答えを試してみましたけど、順番的って事だけ合ってませんので使えなかったです。
答えのソースではonClosedで比べするとなんとか出来るとは思いますが、そうだとデータが合わなくスキップするcolorboxも考える必要があります。でも答えのソースでは一度は必ずcolorboxが現れる必要がありましのであのソースでは使えませんでした。

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

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

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

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

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

guest

回答2

0

javascript

1function confirmBox() {

functionからの戻り値(「return hogehoge;」などの記述で呼び出し元に帰ってくる値)がないので、chkの値は常に「undefined」です。

また、「onComplete」は「colorbox表示完了時(ダイアログっぽいものが表示されるまでの処理が完了した時)」の処理なので、colorboxを閉じたときの動作は「onClosed」で記述すべきです。

confirm()の代わりにcolorboxを使って順番的に

というなら、たとえばこんな感じになるでしょうか

javascript

1var chk = false; 2$(function(){ 3 var doRepeat = function(){ 4 $.colorbox({ 5 html : '<input type="button" value="OK" onclick="chk=true;$.colorbox.close();" />', 6 onComplete : function(){ chk = false; }, 7 onClosed : function(){ if(chk){ doRepeat(); } } 8 }); 9 } 10 $("#testButton").click(doRepeat); 11});

投稿2016/04/20 04:32

tkturbo

総合スコア5572

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

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

Wonjun

2016/04/20 05:08

回答、ありがとうございます。 が、この場合は単純にOKボタンを押すまで繰り返す事になります。 繰り返すのではなく上のように順番に出てくるようにしたいのですが.... 順番的に行く時に違うdataをcolorboxで表現しようとしてますので、ループは駄目です。 コードを略し過ぎて違う解析が出た事、申し訳ございません。 confirm()だとボタンが押されるまで待ってくれるのですが、それを実装したいって事になりますね。
tkturbo

2016/04/20 05:22 編集

私が書いたサンプルも当然「正解」ではないつもりで提示したものです。 「繰り返すのではなく上のように順番に」ならonClosedに渡すCallback関数を順番に違うものに変えればいいのではないですか? 処理したい内容をfunction配列に入れておいて、最後までOKであればform.submit()するとか、いろいろ工夫はできるはずですが。
Wonjun

2016/04/20 05:34

そういう事でしたか。 ありがとうございます。 元々の目的とは違いますが、参考してやってみます。
guest

0

こちらのコードで動くんじゃ無いかと思います。

$(function(){ $("#testButton").click(function(){ var msgs = []; if(data.a == a){ msgs.push(data.msg_a); } if(data.b == b){ msgs.push(data.msg_b); } if(data.c == c){ msgs.push(data.msg_c); } confirmBox(msgs); } }); function confirmBox(msgs) { var msgExists = msgs.length !== 0; if(!msgExists) { return; } var msg = msgs.pop(); $.colorbox({ html: + msg + "が同一ですが、続きますか?" + "<li><button type='button' id='okButton'>OK</button></li>" + "<li><button type='button' id='cancel'>戻る</button></li>", padding : 5, width:"300px", height:"400px", opacity: "0.8", speed: 200, closeButton: false, onOpen: function() { $("#colorbox").css({ "opacity": 1 }); }, onComplete: function(){ $("#okButton").click(function(){ parent.$.colorbox.close(); confirmBox(msgs); } $("#cancel").click(function(){ parent.$.colorbox.close(); } } }); }

投稿2019/06/06 02:21

foobar810

総合スコア217

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問