[Solved] Modal dialog flashes then disappears

[Dan]

Hello.  I am having a problem opening a modal prompt dialog and keeping it open.  The window creation code is below and the prompt, which replaces the entire window with new content and opens it.  What happens is that the dialog opens then quickly disappears.  If I uncomment out the alert right before the open(), then it acts as it should.  I have tried explicitly setting z-index and messing with css display attributes, but nothing alters this behavior.  Any idea how to get this dialog to stick on its own?

MVC PartialView:
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OMS.Web.Models.JobViewModel>" %>
<%@ Import Namespace="OMS.Domain" %>

<%  Html.Telerik().Window()
        .Name("dlgAuditPrompt")
        .Title("Job Change Audit")
        .Icon("../../Content/new_window_16x16.png")
        .Content(() =>
        { %>
            <% Html.BeginForm("SaveAuditRecord", "Job");
               { %>
                    <div class="oms-inputLabel"><label for="Username">Name: </label><%= Html.TextBoxFor(x => x.AuditRecord.Username, new { @readonly = "readonly" })%></div>
                    <div class="oms-inputLabel"><label for="JobID">Job ID: </label><%= Html.TextBoxFor(x => x.AuditRecord.JobID, new { @readonly = "readonly" })%></div>
                    <div class="oms-inputLabel"><label for="Modification">Modification: </label><%= Html.TextAreaFor(x => x.AuditRecord.Modification, 10, 50, new { @readonly = "readonly" })%></div>
                    <div class="oms-inputLabel"><label for="Reason">Reason: </label><%= Html.TextAreaFor(x => x.Reason, 4, 50, new { id = "txtAuditReason" })%></div>
                <br /><br />
                <div><input id="SaveAuditRecord" type="submit" value="Save" /> <input type="button" value="Cancel" onclick="var window = $('#dlgAuditPrompt').data('tWindow');window.close();return false;"/></div>
                <% Html.EndForm();
               } %>
         <% })
        //.HtmlAttributes(new { style="z-index:1000000" })
        .Draggable(true)        
        .Scrollable(false)
        .Resizable()
        .Width(490)
        .Height(470)
        .Visible(false)
        .Modal(true)
        .Render();
%>


Calling javascript:
function promptForAudit() {
    $.ajax({
        url: '/Job/SetAuditPromptData',
        type: 'post',
        data: $('#frmJob').serialize(),
        dataType: 'html',
        success: function (htmlData) {
            //if you don't remove the dialog, you will never see the data is it will always be behind the uninitialized one
            $('#dlgAuditPrompt').remove();
            //use the partial view to replace the original
            $('#AuditPromptDiv').html(htmlData);
        }
    });
    //alert('Before you leave the page, you need to enter a reason for the changes you made. [Remove this]'); //NOTE: WITHOUT THIS DIALOG, THE PROMPT NEVER OPENS.
    $('#dlgAuditPrompt').data('tWindow').center().open();
    $('#txtAuditReason').focus();
}


Thanks,

Michael

[Hristo Germanov]

Hi Dan,

Thank you for contacting us.

Depending on the given information it is hard to determine where could be the issue. Could you send us a simple test project which reproduces. Thus I will be able to observe the problem locally and advice you further.

Greetings,
Hristo Germanov
the Telerik team

[Dan]

Hristo,

Thank you for the reply.  I have been trying to get the time together to extract the pertinent parts, but in the meantime, I have discovered the source of the problem and the solution.  The problem is that the ajax call is asyncronous, which means it rarely ever returned before the command to open the dialog was invoked.  The alert dialog always gave it time to return and populate the dialog.  The solution is just to add an async parameter to the ajax call to force it to be synchronous, e.g.

$.ajax({<br>

        url: '/Job/SetAuditPromptData',<br>

        type: 'post',<br>
<i>        async: false,</i><br>

        data: $('#frmJob').serialize(),<br>

        dataType: 'html',<br>

        success: function (htmlData) {<br>

            //if you don't remove the dialog, you will never see the data is it will always be behind the uninitialized one<br>

            $('#dlgAuditPrompt').remove();<br>

            //use the partial view to replace the original<br>

            $('#AuditPromptDiv').html(htmlData);<br>

        }<br>

    });

Thanks.  This question can be closed.

~Michael