帶有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動態創建行

回答

相關問題