带有AJAX的jQuery UI Datepicker动态创建行

我希望得到一些帮助，让JQuery UI Datepicker能够与动态创建的行一起工作。带有AJAX的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; 


});

这是局部视图新行：（I已经添加了[数据类型（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" }); });

来源

2013-10-15 mattbloke

您将不得不在连接成功事件中的新行的日期选择器。

$("#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-15 13:30:32 PJM

谢谢先生，这对我来说非常合适 – mattbloke

事情你应该考虑：

确保您所申请日期选择器时的文件已准备就绪。在document.getready下执行功能
在所有需要应用datepicker的textbox上应用公共类。然后做到像

$（”。DatepickerClass'）。日期选择器（）

我用另一个jquery datepicker但这种事情应该在你的Ajax datepicker工作了。

来源

2013-10-15 13:23:55

我以为文档就绪只适用于页面最初加载时。我的问题是动态创建的行。所有输入都有.date类。 – mattbloke

带有AJAX的jQuery UI Datepicker动态创建行

回答

相关问题