Ajax更新箇所をクリックしてjQuery UI のdialogを表示する方法を知りたいです。

Question

ajaxを使って更新している箇所に記述されているid属性やclass属性をトリガーとして、jQuery UIのdialogを表示する方法をご教示いただけたら幸いです。

下記のようにformを使ってビュー(index.cshtml)全体を更新する方式だと①をクリックすることでdialogメッセージを表示することができました。****

---

@model IEnumerable<hoge.Models.hogeViewModel>

@using (Html.BeginForm("hoge", "hoge"))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<input id="search" type="button" value="一覧表示" />
</div>
}

<table class="table"> @foreach (var item in Model) { <tr> <td> <h5><a href="#" class="showdialog">@item.hoge</a></h5>**←①クリックすることでdialogメッセージを表示する** </td> </tr> } </table> <div id="showDialogDef" style="display: none;"> ダイアログメッセージ表示成功 </div>

// ↓↓Javascriptコード

@section scripts {
    <script type="text/javascript">
        $(function() {
              $("#showDialogDef").dialog({
                     autoOpen: false,
                     modal: true,
                     buttons: {
                           "閉じる": function () {
                           $(this).dialog('close');
                           }
                     },
                     show: { effect: "clip" },
                     hide: { effect: "clip" }
            });

            $('.showdialog').click(function () {
                $('#showDialogDef').dialog('open');
            });
        })
    </script>
}

---

上記の<table></table>の範囲を部分ビュー(_ShowList.cshtml)に転記し、Ajaxを使って部分更新する方式に変えたところ
①をクリックしても何も起こらない状況です。

---

//↓↓index.cshtml

@model IEnumerable<hoge.Models.hogeViewModel>

@using (Ajax.BeginForm("hoge", "hoge", new AjaxOptions {
UpdateTargetId = "result",
}))
{
@Html.AntiForgeryToken()
<button id="Search" type="submit" value="Search">一覧表示</button>
}
<div id="result"></div>

下記コードをindex.cshtmlのjavascriptに追加しました。

            $('#search').click(function () {
              $('#result').load('/hoge/hoge',);
            });

//↓↓_ShowList.cshtml
@model IEnumerable<GGPediaSystem.Models.SearchResultViewModel>

<table class="table"> @foreach (var item in Model) { <tr> <td> <h5><a href="#" class="showdialog">@item.hoge</a></h5>←①クリックしても何も起こらない(dialogメッセージを表示したいです) </td> </tr> } </table> ---

最終的に展開されるindex.cshtmlにjavascriptやdialog表示内容(<div></div>)が記載されていればよいと思っておりましたが、試しに部分ビュー側(_ShowList.cshtml)にjQueryのインポート、javascriptのコード、dialog表示内容(<div></div>)を書いても状況は変わりませんでした。

Ajaxを使って部分更新させた場合でもdialogメッセージを表示する方法をご教示いただけたら幸いです。

宜しくお願い致します。

Answer 1

$('#search').click(function () { 
    $('#result').load('/hoge/hoge',); 
}); 

上記を見る限り、後からloadされた<a class='showdialog'></a>には、ダイアログをopenするクリックイベントが登録されていないように思われます。

なので、ダイアログ表示のクリックイベント登録は、click()ではなく

$(document).on('click', '.showdialog', function () {
    $('#showDialogDef').dialog('open');
});

というように将来追加される要素にも対応するようにするのはいかがでしょうか？

Comments

[ssyk]

返信が遅れてしまい大変申し訳ございません(><)ご教示頂いた内容で実現したいことが叶いました！本当にありがとうございました！