Question

I’m having a problem with a JQuery dialog being empty when displayed. I know what the problem is but can’t figure out how to fix it. I hope to find some help here.

Issue:

I have a page with a simple list of users. Every item/user on the list has an EDIT link. When clicked edit a dialog box pops up with details for that user. Great! Sounds simple enough.

So the user list initializes the partial view that’ll be a dialog box:

@Html.Partial("EditUser", new User())

That pre-loads the partial view and the dialog is initialized with a regular:

$(function () {
    $("#edit-user-dialog").dialog({
        title: "Edit User",
        autoOpen: false,
        height: 500,
        width: 600,
        modal: true
    });
});

So far so good…

The partial view itself is a regular page with Ajax form submit that allows me to submit modified user info. Everything associated to that popup, such as its DIV, connected JScripts must be contained within just so information could be easily found later. Here is the sample code of the Partial View that will be displayed as a dialog:

@model MyNamespace.User
<script src="@Url.Content("~/myUserEditScriptScripts.js")" type="text/javascript"></script>

<div id="edit-user-dialog" style="display: none">

@using (Ajax.BeginForm("SaveUserJson", "User", new { id = Model.Id }, new AjaxOptions
        {
            HttpMethod = "post",
            OnSuccess = "editUserSuccess()",
        }))
    {

        <div class="display-field">
            @Html.DisplayFor(model => model.Name) 
        </div>
    .
    .
    .
    Various controls go here...
    .
    .
    .

        <p>
            <input type="submit" value="Detach" />
        </p>
    }

 </div>

Standard stuff so far…

So when the initial list of users is loaded the “Edit users” partial view gets pre-loaded on the page but it’s not visible because the div is set to display: none and it’s initialized as being a dialog popup.

Next when an “edit” link is clicked next to a specific user I would like that popup to be populated with the information of that selected user.
Ajax to the rescue!

On “Edit” link click I load the partial view with the selected user data:

function editUserLoad(userId) {
    $.ajax({
        url: '/User/EditUser/',
        data: { id: userId },
        type: 'post',
        datatype:'html',
        success: function (data) {
            $("#edit-user-dialog").html(data);
            $("#edit-user-dialog").dialog('open');
        }
    });
}

Works great! It grabs the selected userId, jumps to my action method that returns the partial view populated with the User data I want to display.

The problem is that the dialog is displayed empty ! Well I know why. It’s empty because the dialog DIV is set to “display: none”. But why ? Doesn’t .dialog(‘open’); override display: none and doesn’t it suppose to show the content of the dialog even if it was hidden ?

I tried to have .show separately but it didnt work.
Help ?

Answer 1

Could you try this approach. Just create an empty div like following

<script type="text/javascript">
    $(function () {
        $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            title: 'Edit User',
            modal: true,
            open: function(event, ui) {
                //Load the Edit User partial View
                $(this).load("@Url.Action("action","controller",new {ID = user_id})");
            },
            buttons: {
                "Close": function () {
                    $(this).dialog("close");
                }
            }
        });

        $('#my-button').click(function () {
            $('#dialog').dialog('open');
        });
    });
</script>
<div id="dialog" title="Edit User" style="overflow: hidden;">

//return partial view
public ActionResult EditUserView(int id)
{
    UserModel um = new UserModel(id);
    return PartialView(um);
}

THERE is a very nice example here, which you can use to