JQuery Dialog + Renderpartial, contents getting repeated

Question

Following is the link button which launches contents in dialog:

<a href="#" class="details-trigger">Show Dialog</a>

Following are the contents which should be displayed in JQuery dialog:

    <div class="dayblockdetails-modal" data-dialog-title="My Dialog" >
        @{ Html.RenderPartial(MVC.MyController.Views._MyPartialView, myModal); }
    </div>

Following is the JQuery code that launches dialog box:

$(".details-trigger").off("click");
$(".details-trigger").on("click", function (e) {
    e.preventDefault();
    var dialogtitle = $(".details-modal").attr('data-dialog-title');
    $(".details-modal").dialog("option", "title", dialogtitle);
    $(".details-modal").dialog("open");
});
$(".details-modal", this).dialog({ modal: true, autoOpen: false });

When I first click on the link "Show Dialog" it displays dialog box properly. But when I close and reopen the dialog box the contents are getting repeated. That means, all contents of the partial view "_MyPartialView" are showing twice, and they keep getting repeated N number of times as I close and re-open.

What could be wrong here? and how to sovle this issue?

Answer 1

Try this code

    <a href="#" class="details-trigger" onclick="ShowDialog()">Show Dialog</a>

function ShowDialog()
{
      $('<div>').dialog({
            modal: true,
            open: function () {
                $(this).load("/Controller/PartialView/?AnyParam=" + id);
            },
            height: 250, width: 400, title: 'My Dialog', buttons: {
                "OK":function(){
                          //whatever
                               }
                     }, 
                close: function(){
                         $(this).html("");
                                 }
    });
}