###前提・実現したいこと
これまで自作(といってもどこかのサイトにあった jQuery版)のモーダルウィンドウを使っていましたが、レスポンシブ対応ということである Magnific Popup というプラグインに置き換えようとしています。
動作としては、最初に条件を与えてサムネール画像を一覧表示させ、一覧からひとつの画像クリックするとモーダルダイアログ画面が開いて画像を原寸で表示させる、というものです。
###発生している問題・エラーメッセージ
ところが、サムネイルのどれをクリックしてもモーダルダイアログが開きません。
とくにエラーが出ることはなく、反応がない状態です。
###該当のソースコード
【javascript モーダルダイアログの定義】
モーダルウィンドウに表示する内容は画像の他文字情報やデータ入力も行なうため、インライン情報なので以下の設定をしています。
$(function () { $('.popup-modal').magnificPopup({ type: 'inline', preloader: false }); //閉じるリンクの設定 $(document).on('click', '.popup-modal-dismiss', function (e) { e.preventDefault(); $.magnificPopup.close(); }); });
下記のAjaxで2つの条件で検索に行き、画像を一覧表示させます。
【javascript Ajaxによる検索】
$.ajax({ type: "POST", url: "/PhotoSearchList", data: {"userId":userId, "blockTitle":blockTitle}, dataType: 'text', success: function(request){ var json = JSON.parse(request); var res = ''; res = '<ul class="photoList">'; for (var i = 0; i < json.length; i++){ res += '<li class="photoList"><a class="popup-modal" href="#inline-wrap"><img src="/PhotoSearchOneBlob?photoId=' + json[i].photoId + '"></a></li>'; ※※ } res += '</ul>'; var obj = document.getElementById("imgSrcList"); obj.innerHTML = res ; }, error: function(msg){ alert( "Data Saved: " + msg ); } });
【html部分】
<body> <div id="container"> <!-- ▼▼▼▼▼▼ここからダイアログフォーム --> <div id="inline-wrap" class="mfp-hide"> <div id="imgSrcOne"> <!-- ここに検索結果(1件)を表示 --> </div> <br /> <table> <tr> <td>対象図ID</td><td id="dPhotoId"></td><td>登録日</td><td id="dPhotoDate"></td> </tr> <tr> <td>ブロックタイトル</td><td id="dBlockTitle"></td><td>対象図のタイトル</td><td id="dPhotoTitle"></td> </tr> </table> <input type="button" value="戻る" onClick="dispPrevious()" /> <input type="button" value="進む" onClick="dispNext()" /> </div> <!-- ▲▲▲▲▲▲ここまでダイアログフォーム --> <!-- ▼▼▼▼▼▼ここからメインフォーム --> <div id="content"> <FORM id="fm"> ブロックタイトル:<input type="text" id="blockTitle" name="blockTitle" /><br /> <input type="button" value="クリア" onclick="clear();" /> <input type="button" value="検索" onclick="search();" /> </FORM> <div id="imgSrcList"> <!-- ここに検索結果(一覧)を表示 --> </div> </div><!--contentの終了 --> 以下省略
###試したこと
問題を単純化するために※※の所を
res += '<li class="photoList"><a class="popup-modal" href="#inline-wrap">ダイアログ表示</a><br /></li>';
としてみて、表示された文字列「ダイアログ表示」をクリックしてみてもモーダルダイアログを開くことができませんでした。
また、単純に
<a class="popup-modal" href="#inline-wrap">ダイアログ表示</a>
をメインフォームに記述してクリックするとモーダルダイアログを開くことができました。
いろいろ調べてみたのですが、innerHTML でhtmlとして書き換える文字列の中に "<script>" などがあると期待している動作ができないようです。
ですが、今回はそれに該当しませんし、動的に内容が異なるので、innerHTML で html として書き換える方法しか思い浮かびません。
###補足情報(言語/FW/ツール等のバージョンなど)
Ajaxの先のバックヤードは java で動いています。
ブラウザは通常 Firefox を使用していますが、この件に関しては Chrome , Edge も試してみましたが変わりませんでした。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー