JqueryUI Dialogが二回以上openできない

Question

わからないこと

いつもお世話になっております。
この度JqueryUIDialogを用い、ajaxでダイアログ内のviewを出力しようとしています。
しかし、おそらくajaxが原因で、ダイアログを一度閉じ、再び開こうとするとエラーが出ます。

エラー
「Uncaught TypeError: $(...).dialog is not a function」

目的は、エラーを解消し、ajax実行時にダイアログ内を表示させ、かつデータを飛ばすことにあります。

ご教授いただければ幸いです。

###コード

<label style="padding-top: 10px; margin-bottom: 10px;" id="open-cv-dialog" class="bt-photo01 ui-bt-nomal ui-opaimg">
写真
</label>
<div class="dialog" id="addImagesDialog" style="overflow: hidden;display: none; outline: 0px; height: auto;"  data-dialog="true">
        @include('portal.cv-upload-dialog')
    </div>

<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" language="javascript">

portal.cv-upload-dialog(blade)

<div class="dialog-content">
</div>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
$(function()
        {
            $("#open-cv-dialog").on("click", function(){
                $("#addImagesDialog").dialog({
                    title: "登録",
                    width: 372,
                    modal: true,
                    buttons: [
                        {
                            text: '送付する',
                            id: 'yes-sending',
                            click: function() {
                                $(this).dialog('close');
                            }
                        },
                        {
                            text: 'キャンセル',
                            id: 'no-sending',
                            click: function() {
                                $(this).dialog('close');
                                $.ajax({
                                    url: "{{action('PortalController@cancelImage')}}",
                                    type: 'post',
                                    dataType: 'html',
                                    // data: fd,
                                    // processData: false,
                                    // contentType: false
                                })
                            }
                        }
                    ],
                    open: function() {
                        imgDialogContent();
                    }
                })
                <?// ダイアログの表示位置をオプションで修正しても変更できなかったので、力技で変更?>
                $("#addImagesDialog").parent("div.ui-widget").css('top','98px');
            });
            // ダイアログ内読み込み
            function imgDialogContent(){
                $.ajax({
                    type : "POST",
                    url  : "{{action('PortalController@ajaximg')}}",
                    data: {
                        'book': 'cv',
                        'id': "{!!$input['id']!!}"
                    }, 
                    dataType: "html",
                    success : function(re) {
                        $("#addImagesDialog").html(re);
                    },
                    error : function() {
                        alert('失敗しました。');
                    }
                });
            }
        });
</script>

public function ajaximg() {
       
return view('portal.cv-upload-dialog');
    }

※laravelのバージョンは5.1です。

何卒よろしくお願い申し上げます。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

[退会済みユーザー]

ご指摘ありがとうございます。押した気になっていました

Answer 1

$(this).dialog('close');

おそらくこのthisはダイアログ内で生成されたボタンを指しており、$("#addImagesDialog").dialog()を指していません。$(this)ではなく$("#addImagesDialog")に変えてみてください。

Comments

[退会済みユーザー]

masaya_ohashi様
何度もご助力いただきまして、ありがとうございます。

ご指摘の通り、そもそもボタンをダイアログを閉じることができないという問題もありますが、仮に右上の✕ボタンで閉じて、再度ダイアログを開こうとしても開くことができておりません。

return viewが影響しているところまではわかっているのですが、ダイアログ内を表示させるために必要だと思うのですが、書き方そのものが誤っているのでしょうか？

[masaya_ohashi]

うーん…読めば読むほどあなたの意図している動作がコードから汲み取ることが出来ません。これはどういう動作を望んでいるダイアログなんですか？

疑問点
1. <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>がportal.cv-upload-dialogに書かれているのはなぜですか？
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>の上に書くべきだと思います。portal.cv-upload-dialogの内容はincludeだけでなくajaximgでも返す内容なんですよね？これだと.htmlで埋め込むと2回jqueryが読み込まれてバグになります。

2. そもそもこのダイアログは「何が表示されるもの」なんでしょうか？

3. $("#open-cv-dialog") はどこにあるのでしょうか？

[退会済みユーザー]

ご指摘ありがとうございます。

1.jqueryファイルについては、私が理解せずにおいてしまっただけです。

2.このダイアログでは、画像ファイルのアップロード画面が表示され、アップロードした画像がサムネイルで表示されるものになります。また仮に閉じたとしても画像が任意のディレクトリに保存されていれば再度サムネイルで表示されるようにしようとしています。

3.失礼いたしました。質問のコードに追記しました。

ご不明点がありましたら、ご指摘頂ければ幸いです。

[退会済みユーザー]

※画像ファイルのアップロード部分につきましては、今回の質問内容から外れると思い、意図的に削除しております。

[退会済みユーザー]

masaya_ohashi様
上記のご指摘箇所を修正したところ、無事開くことができるようになりました！
仰る通り、includeとajaxでのhtmlの送信のバグが影響していたようでした。
ありがとうございました