Question

我在对话框模式中使用数据贴纸。

@Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { @class = "datepicker" })

我从主视图调用datepicker而不是加载partialview：

<script src="/Scripts/dialog.js" type="text/javascript"></script>
<script type="text/javascript">
    $().ready(function () {

    jQuery.validator.methods.date = function (value, element) {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
        if (isSafari || isChrome) {
            var d = value.split("/");
            return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
        } else {
            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };

        $('.datepicker').datepicker({ dateFormat: "dd/mm/yy", minDate: 2 });
    });
</script>

    <div id="modal" title="Requestnow">
    <div id="modal-dialog-content">
        @Html.Partial("MyController/_Request", new RequestModel())
    </div>
</div>

在我的主模板中，我有所有名为：

的库

<!-- Javascripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<script src="/scripts/fanoe.js"></script>
<script src="~/Scripts/jquery.cycle2.min.js"></script>

<script src="/Scripts/scripts.js"></script>

然后，在body结束标记之前，将部分插入页面底部。

视图呈现效果良好，而datepicker适用于第一次渲染。

当我然后用ajax回发模态的形式时，datepicker停止工作。在源代码中它似乎根本不呈现，文本字段丢失了hasDatepicker类等。

我试图将datepicker调用放在partialview中，并且postpicker在回发后正确渲染但是如果我再次回发它，则partialview会替换我的父视图并返回javascript错误：

Uncaught ReferenceError: $ is not defined

因为很明显所有jquery脚本都在未显示的父视图中。

试图寻找解决方案因为我看到类似的帖子，但现在没有运气。

我使用Umbraco并且部分视图是强类型的：

@inherits Umbraco.Web.Mvc.UmbracoViewPage<RequestModel>

Dialog js：

$(function () {

    // Don't allow browser caching of forms
    $.ajaxSetup({ cache: false });

    var dialog = $('#modal').dialog({
        autoOpen: false,
        resizable: true,
        height: 'auto',
        width: 600,
        modal: true,
        title: $('#modal').attr('title'),
        buttons: {
            "Close": {
                click: function () {
                    $(this).dialog("close");
                },
                text: 'Close',
                class: 'ui-icon-close'
            }
        }
    });

    if ($(".btn-get-quote").length > 0) {
        $(".btn-get-quote").button().on("click", function () {
            dialog.dialog("open");
        });
    }

});

部分视图内容是标准内容：

@using (Ajax.BeginForm("Request", "MyController", new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "quote-form", InsertionMode = InsertionMode.Replace }))
{
    <div id="quote-form">
        <p class="validateTips">All form fields are required.</p>

        [all form fields in razor]
            <div class="form-group">
                @Html.LabelFor(m => m.StartDate)
                @Html.TextBoxFor(m => m.StartDate, "{0:dd/MM/yyyy}", new { @class = "datepicker text ui-widget-content ui-corner-all" })
                @Html.ValidationMessageFor(x => x.StartDate)
            </div>
    </div>
}

部分视图中的JQuery datepicker在ajax调用后无法正常工作

0 个答案: