JQuery datepicker внутри модального всплывающего диалога теряет значок календаря при втором выборе MVC - PullRequest
Новая
       9

JQuery datepicker внутри модального всплывающего диалога теряет значок календаря при втором выборе MVC

0 голосов
/ 03 ноября 2011

У меня есть указатель даты в модальном всплывающем диалоге.На первой итерации все в порядке.Когда я открываю всплывающее окно во второй раз, значок clandar в DatePicker отсутствует, общий DatePicker не отвечает.Я предполагаю, что это неправильный экземпляр.

Сильфон - это разница между проектом по умолчанию 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>

Заранее спасибо, Лешек

РЕШЕНИЕ 

<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>

1 Ответ

0 голосов
/ 03 ноября 2011

Я думаю, что вы должны использовать диалог. ("Закрыть"), а не уничтожать.

и

Используйте кнопки Jquery Dialog для добавления кнопки «Перейти» к вашему частичному представлению. 

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

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

...