2

我将不胜感激让 JQuery UI Datepicker 能够处理动态创建的行。

用户可以向表中添加额外的行（部分视图）以启用更多数据输入（取自 Steven Sanderson 的博客）。这是通过 AJAX 实现的。添加行完美，但我想启用 jQuery UI Datepicker（http://www.asp.net/mvc/tutorials/javascript/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with- aspnet-mvc/using-the-html5-and-jquery-ui-datepicker-popup-calendar-with-aspnet-mvc-part-4）用于这些动态创建的行中的一些输入。我已经让 Datepicker 在没有动态添加行的情况下工作，但我只是无法弄清楚如何让它在我的 AJAX 中工作。提前致谢。

这是创建新行的代码：

$("#addItem").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) {
            $("#editorRows").append(html);
        },

    }); return false;


});

这是部分视图的新行：（我已将 [DataType(DataType.Date)] 添加到相应的视图模型字段中）

@model ef_tut.ViewModels.LineViewModel
@using ef_tut.Models
@using ef_tut.ViewModels
@using ef_tut.WebUI.Helpers

@using (Html.BeginCollectionItem("LineViewModels"))

{


<table class="editorRow">
<tr>
<td>
ClaimID: @Html.EditorFor(model => model.ClaimID)</td>
<td>
ClaimLineID: @Html.EditorFor(model => model.ClaimLineID)</td>
     <td>

ClaimantUserID: @Html.DropDownListFor(model => model.Selecteduserid, new SelectList(Model.users, "UserID", "FirstName"))</td>
    <td >
CatID: @Html.DropDownListFor(model => model.Selectedcatid, new SelectList(Model.categories, "CatID", "CatName"))</td>
<td >
SubCatID: @Html.TextBoxFor(model => model.SubCatID)</td>
<td>
Comments: @Html.EditorFor(model => model.Comments)</td>
<td>
HoursCost: @Html.EditorFor(model => model.HoursCost)</td>
<td >
MeetingDate: @Html.TextBoxFor(model => model.MeetingDate )</td>
<td>
MileageCost: @Html.EditorFor(model => model.MileageCost)</td>
<td>
ProxyClaim: @Html.EditorFor(model => model.ProxyClaim)</td>
<td>
TotalCost: @Html.EditorFor(model => model.TotalCost)</td>
<td>
TravelCost: @Html.EditorFor(model => model.TravelCost)</td>
    <td>
Venue: @Html.EditorFor(model => model.Venue)</td>
<td>
Hours: @Html.EditorFor(model => model.Hours)</td>

    <td>
<a href="#" class="deleteRow">delete</a>
</td>
</tr></table>



}

这是连接日期选择器的 .js。

$(document).ready(function () { $('.date').datepicker({ dateFormat: "dd/mm/yy" }); });
4

2 回答 2

3

You are going to have to hook up the datepicker for the new row(s) in the success event.

$("#addItem").click(function () {
                $.ajax({
                    url: this.href,
                    cache: false,
                    success: function (html) {
                        $("#editorRows").append(html);
                        $('#editorRows .date').datepicker({ dateFormat: "dd/mm/yy" });
                    },

                }); return false;


            });

});

于 2013-10-15T13:30:32.330 回答
1

你应该考虑的事情：

  1. 确保在文档准备好时应用 datepicker。在document.getready函数下做

  2. textbox在您必须应用 datepicker的所有地方应用通用类。然后像这样

    $('.DatepickerClass').datepicker()

我用过另一个jquery datepicker，但这个东西也应该在你的 ajax 上工作datepicker。

于 2013-10-15T13:23:55.010 回答