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

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

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

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

jQuery

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

Q&A

1回答

1686閲覧

Magnific Popupで表示した内容が消える

howling818

総合スコア7

JavaScript

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

jQuery

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

1グッド

0クリップ

投稿2018/01/11 06:52

###発生している問題・エラーメッセージ
以下のように数件のリストがあります

登録1
登録2
登録3

それぞれMagnific Popupで表示したモーダル内のデータをDBに登録しているのですが、
登録した際にそのモーダル内容が消えてしまっています

「登録1」でモーダル内の「登録する」を押して、モーダルを消した場合に
DIV#Updateが元の位置に残っておらずHTML内にもない状態で、
「登録2」「登録3」を一度押した場合に、モーダル内には#Update.PModal-successが表示されます
そして、そのモーダルをcloseして再度モーダルを表示した場合には#Update.PModal-statが表示されます

しかし、「登録2」or「登録3」で登録して、モーダルを消した場合には
DIV#Updateが元の位置に残っており、「登録1」「登録3」を押した場合には、#Update.PModal-statが表示されます

わかりにくいかと思いますが、1つ目のリンクで表示したモーダルで登録しcloseした場合に、DIV内容がなくなり、
2つ目・3つ目のリンクで表示したモーダルで登録しcloseした場合には、DIV内容が元位置にあり内容も残っているという状況です

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

HTML

1<table> 2 <tr><td><a href="#Update" class="p_update">登録1</a></td></tr> 3 <tr><td><a href="#Update" class="p_update">登録2</a></td></tr> 4 <tr><td><a href="#Update" class="p_update">登録3</a></td></tr> 5</table> 6 7<div class="mfp-hide PModal" id="Update"> 8 <div class="PModal-stat"> 9 <p 10 <select name="year" id="year"></select> 11 <select name="month" id="month"></select> 12 <select name="day" id="day"></select> 13 <a class="btn-regist" onClick="update_p();">登録する</a> 14 </div> 15 16 <div class="PModal-success"> 17 18 <div id="succsess_area"> 19 <p>登録しました</p> 20 </div> 21 <div id="error_area"> 22 <p>失敗しました</p> 23 </div> 24 </div> 25</div>

Javascript

1jQuery(function($){ 2 3 module.paymentUpdate(); 4 5}); 6 7var module = { 8 9 jQuery('.p_update').magnificPopup({ 10 type: 'inline', 11 preloader: false, 12 showCloseBtn: false, 13 callbacks: { 14 beforeOpen:function(){ 15 var modal = jQuery('#Update'); 16 jQuery("#Update").find("select").val(""); 17 }, 18 afterClose:function(){ 19 jQuery(".PModal-stat").show(); 20 jQuery(".PModal-success").hide(); 21 } 22 } 23 }); 24 25 //登録ボタン 26 jQuery('.btn-regist').on('click', function () { 27 jQuery(".PModal-stat").hide(); 28 jQuery(".PModal-success").show(); 29 }); 30}; 31 32function update_p() { 33 var optino_obj={ 34 page:'aaa', 35 }; 36 result = jQuery.ajax( { 37 type : "post", 38 cache: false, 39 data:data, 40 url:"index.php", 41 dataType : "json", 42 success : function(json){ 43 if(json.status=='OK') { 44 jQuery("#succsess_area").show(); 45 jQuery("#error_area").hide(); 46 } else { 47 jQuery("#succsess_area").hide(); 48 jQuery("#error_area").show(); 49 } 50 } 51 }); 52}

わかりにくい状況だと思いますので、補足が必要でしたら補足させて頂きます

nb776👍を押しています

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

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

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

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

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

guest

回答1

0

エラーがでてないかたしかめましょー

投稿2019/03/26 15:00

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問