how to reopen modal dialog in jquery after closing it?

Question

I have an Asp.Net MVC application, where in 1 View, I have a list with every record showing Edit icon. Clicking the edit icon opens a modal dialog popup to update the record .

I face problem in reopening the dialog or clicking other edit icon for popup after closing the dialog . Following is my jquery code to open the dialog :

var singltym;

$(function () {

    $('#addSingleTimeDialog').dialog({
            cache: false,
            autoOpen: false,
            width: 450,
            height: 450,
            closeOnEscape: true,
            resizable: true,
            modal: true});

    $('#singletymlink').on('click', function () {
            singltym = $(this);
            var dialogDiv = $('#addSingleTimeDialog');
            var viewUrl = singltym.attr('href');
            $.ajax({
                cache: false,
                url: viewUrl,
                dataType: 'html',
                success: function (data) {
                    dialogDiv.html(data);
                    dialogDiv.dialog('open');
                }
            });
            return false;
        });
});

Solution 1

    var singltym;

    $(function () {

        $('#addSingleTimeDialog').dialog({
                cache: false,
                autoOpen: false,
                width: 450,
                height: 450,
                closeOnEscape: true,
                resizable: true,
                modal: true});

        $('#singletymlink').on('click', function () {
                singltym = $(this);
                var dialogDiv = $('#addSingleTimeDialog');
                var viewUrl = singltym.attr('href');
                $.ajax({
                    cache: false,
                    url: viewUrl,
                    dataType: 'html',
                    success: function (data) {
                        dialogDiv.html(data);
                       dialogDiv.dialog('open');

//I work in this method

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

                }
            });
        });
});

Or

$.ajax({
                    cache: false,
                    url: viewUrl,
                    dataType: 'html',
                    success: function (data) {
                        dialogDiv.html(data);
                       $("#dialogDiv").dialog("open");

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

                }

If $( this ).dialog( "close" ); not working because not try this specific sentence??

$('#addSingleTimeDialog').dialog("close");

Solution 2

The above issue can be solved by including the below scripts in parent view from where the dialog popup is clicked & initiated :

<script type="text/javascript" src="../../Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>

As well as insert the below scripts in child view which is the UI for modal dialog popup :

<script type="text/javascript" src="../../Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.validate.unobtrusive.min.js"></script>

By scripting in such way, the jquery script conflict is avoided & reopening of dialog can be swiftly done.

Solution 3

Came across this older question, found a simpler solution not listed here.

Add an event listener for the close event, and call destroy when the dialog is closed.

close: function(event, ui) {$(this).dialog("destroy");}

Solution 4

You could use the open method:

$('#addSingleTimeDialog').dialog('open');

View more solutions

Comments

[Shalin Jirawla]

I know I can, but I have to load the dialog with dynamic data which comes from server side controller action, for which I need to build the dialog with url & pass the data as html for the dialog UI

[Shalin Jirawla]

I even tried intercepting the script with $( this ).dialog( "close" ); , but no success.

[Shalin Jirawla]

The strange thing is that the same script I am using in other view, & it is working fine. I analysed & found that it is not refreshing the dialog. I did the following to forcibly refresh it . $('#updateMstrTaskDialog').dialog({ cache: false, autoOpen: false, width: 300, height: 230, resizable: true, modal: true, close: function () { location.reload(); } }); It works but with an unwanted postback.

[Mirko Cianfarani]

and ´$('#addSingleTimeDialog').dialog("close");´ you tried?? @ShalinJirawla

[Shalin Jirawla]

ya even tried $('#addSingleTimeDialog').dialog("close"); , but to no success

[Mirko Cianfarani]

Please copy your code and paste on jsfiddle.net because miss the code in html (div)

[Shalin Jirawla]

thanx @Mirko for your help in solving the above issue

[JayKandari]

$( this ).dialog( "close" ); WORKED PERFECTLY. (y)