Onsen UI ダイアログを二回目に表示する時 備忘録

MonacaでOnsen UI を使ってダイアログを二回目以降表示する際にajaxでデータが取得できないとき

ons.createDialogをつかってダイアログを表示させて、その中でajaxを使用してデータをこねくり回す際に、初回時はajaxが回るが二回目は起動しないときの対処法を書き残す備忘録

  ons.ready(function() {
    ons.createDialog('dialog.html').then(function(dialog) {
      dialog.show();
    });
  });

    <ons-template id="arekorePop.html">
        <ons-dialog style="width:90%; height:75%" var="arekoreDlg" cancelable animation="none">
            <ons-toolbar inline>
                <div class="center">あれこれダイアログ</div>
            </ons-toolbar>
            <div id="arekorePop" style="padding:10px; font-size:; height:85%; overflow-y:scroll; text-align:center;">
                <ons-button modifier="large" onclick="arekoreDlg.hide();">閉じる</ons-button>
            </div>
        </ons-dialog>
    </ons-template>

function arekorePop() {
    ons.createDialog('arekorePop.html').then(function (dialog) {
        arekoreDlg = dialog;
        arekoreDlg.show();
        arePop();
	});
}

function arePop(){
    waitmodal.show(); /*ロード中のぐるぐる*/
    $.ajax({
        type: 'GET',
        url: 'http://arekore.ac.jp/sore.php',
        dataType: 'text',
        success: function(data) {
                waitmodal.hide();
            $("#arekorePop").html(data);
            alert("成功したぜ");
        },
        error:function() {
            alert('問題がありました。');
        }
    });
    arekoreDlg.on("posthide", function(){
        arekoreDlg.destroy();
    });
}

arekoreDlg.destroy()を使うのがみそ
それでだめならajax通信の前にダイアログがあるか判定してある時と無い時の両方に同じ処理を書く

備忘録として簡略化し要点だけ

※参考
ons-dialog リファレンス - Onsen UIフレームワーク
https://ja.onsen.io/v1/reference/ons-dialog.html