模式弹出对话框中的JQuery datepicker在第二次选择MVC时丢失了日历图标

Question

我在模态弹出对话框中有日期选择器。在第一次迭代中一切正常。当我第二次打开弹出窗口时，日历图标在日期选择器中丢失，一般日期选择器没有响应。我认为它没有正确实例化。

下面是与默认项目MVC 2.0相比的差异:

Index.aspx:

<asp:content id="Content2" contentplaceholderid="MainContent" runat="server">
<link href="../../Content/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.6.4.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script type="text/javascript">
    function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();
        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();
        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);
        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>
<%: Ajax.ActionLink("Show popup", "Popup", new AjaxOptions { UpdateTargetId = "popup", OnSuccess = "updatePlaceholder" })%>
<div id="popup" style="visibility: hidden">
</div>

HomeController.cs

public ActionResult Popup() {
        return PartialView("PopupControl");
    }

PopupControl.ascx

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>    
<script src="../../Scripts/jquery.bgiframe-2.1.2.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.draggable.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.position.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.resizable.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.dialog.js" type="text/javascript" />
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.ui.datepicker.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#dialog:ui-dialog").dialog("destroy");
        $("#dialog-modal").dialog({
            height: 250,
            width: 450,
            modal: true
        });
        $("#dateFrom").datepicker({
            showOn: "button",
            buttonImage: "../../Content/Images/calendar.gif",
            buttonImageOnly: true,
            showButtonPanel: true
        });
        $("#dateTo").datepicker({
            showOn: "button",
            buttonImage: "../../Content/Images/calendar.gif",
            buttonImageOnly: true,
            showButtonPanel: true
        });
    });
</script>
<div id="dialog-modal" title="My popup">
    <% using (Html.BeginForm("PopupClosed", "Home")) { %>
    <div class="search-table">
        <table>
            <tr>
                <td class="col1">
                    <p>
                        Valid from:
                    </p>
                </td>
                <td>
                    <input type="text" id="dateFrom" name="From" style='width: 100px;' />
                </td>
            </tr>
            <tr>
                <td class="col1">
                    <p>
                        Valid to:
                    </p>
                </td>
                <td>
                    <input type="text" id="dateTo" name="To" style='width: 100px;' />
                </td>
            </tr>
            <tr>
                <td class="col1">
                </td>
                <td align="right">
                    <input class="search-button" name="" type="submit" value="Go" />
                </td>
            </tr>
        </table>
    </div>
    <% } %>
</div>

提前感谢，Leszek

曾

溶液

<script type="text/javascript">
    $(function () {
        $("#dialog-modal").dialog({
            height: 300,
            width: 450,
            modal: true,
            resizable: false,
            create: function(event, ui) {
                $("#dateFrom").datepicker({
                    showOn: "button",
                    buttonImage: "@Url.Content("~/Content/Images/calendar.gif")",
                    buttonImageOnly: true,
                    showButtonPanel: true
                });
                $("#dateTo").datepicker({
                    showOn: "button",
                    buttonImage: "@Url.Content("~/Content/Images/calendar.gif")",
                    buttonImageOnly: true,
                    showButtonPanel: true
                });
            },
            close: function(event, ui) {
                $("#dateFrom").datepicker("destroy");
                $("#dateTo").datepicker("destroy");
                $("#ui-datepicker-div").remove();
                $(".ui-dialog").remove();
                $("#dialog-modal").remove();
            }
        });
    });
</script>

Answer 1

我认为你应该使用dialog.("close")而不是destroy。

和

使用Jquery对话框按钮为你的局部视图添加一个"Go"按钮。

$( "#dialog-message" ).dialog({
    modal: true,
    buttons: {
        Ok: function() {
            $( this ).dialog( "close" );
         }
    }
});

http://jqueryui.com/demos/dialog/modal-message