Question

In my Index view I have a Create and Open template link:

@Html.ActionLink("Create Template", "JsonCreate", "Template", new { id = "CreateTemplate" })
@Html.ActionLink("Open Template", "JsonOpen", "Template", new { id = "OpenTemplate" })

<script type="text/javascript">

   $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 300,
            resizable: false,
            title: 'Create Template',
            hide: "fade",         
            show: "fade",
            modal: true,
            open: function(event, ui) {               
                $(this).load("@Url.Action("Create")");
            },
            buttons: {
             "Save": function () {                      
                        var form = $('form', this);
                        $(form).submit();
                     },
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        }); 

        $('#OpenTemplate').click(function ()
        {
            $('#dialog').dialog('open');
            return false;
        });

        $('#CreateTemplate').click(function ()
        {
            $('#dialog').dialog('open');
            return false;
        });
    });

</script>

For the Open template link I want a pretty different dialog:

• other buttons
• other size
• other title
• etc…

What do I have to change that my open template link can open its own dialog using the same dialog div “#dialog”?

Answer 1

I’ve tried re-using a single div for multiple different dialogs in the past and I highly recommend just creating a new div and a new instance of ui.dialog. It adds additional html at the bottom of the body tag, but this is a small price to pay for the benefit of clearly separating the javascript code. If you need different HTML inside the dialog div then there is absolutely no reason not to use two completely separate divs. Doing so will save you significant time and mental anguish.

Should you choose not to heed this advice, I would recommend creating two config objects and destroying the dialog instance on close. Something like this:

$(function () {
    var baseConfig = {
        autoOpen: false,
        resizable: false,
        hide: "fade",
        show: "fade",
        modal: true,
        close: function(event, ui) {
            $(this).dialog('destroy');
        },
        buttons: {
            "Save": function () {
                var form = $('form', this);
                $(form).submit();
            },
            "Close": function () {
                $(this).dialog("close");
            }
        }
    }
    var createConfig = {
        width: 300,
        title: 'Create Template',
        open: function(event, ui) {               
            $(this).load("@Url.Action("Create")");
        }
    }
    var openConfig = {
        width: 500,
        title: 'Open Template',
        open: function(event, ui) {               
            $(this).load("@Url.Action("Open")");
        }
    }

    $('#OpenTemplate').click(function ()
    {
        var config = $.extend(baseConfig, openConfig);
        $('#dialog').dialog(config);
        return false;
    });

    $('#CreateTemplate').click(function ()
    {
        var config = $.extend(baseConfig, createConfig);
        $('#dialog').dialog(createConfig);
        return false;
    });
});

This is just one solution. There may be other ways to do this without destroying the dialog, but trust me when I say this will be much cleaner. Again, this div re-use solution assumes that the HTML inside the div does not change at all.