Views/Shared/EditorTemplates に DateTime.cshtml テンプレートがあり、TimePicker Addonを使用して jQuery DateTime ピッカーを実装しています。これまでは正常に動作していました.....
最近、チェックアウト ページにインライン jQuery を追加して、ショッピング カートからのアイテムの削除を処理しました。これにより、日付/時刻の編集時に jQuery DateTime ピッカーが表示されなくなりました。テンプレートの MVC 日付フォーマット部分 (以下を参照) はまだ適用されていますが、インライン jQuery に関する何かがテンプレート jQuery とうまく機能していません。
チェックアウト ビューのインライン jQuery をコメント アウトすると、クリックして日付/時刻フィールドを編集すると、DateTime ピッカーが表示されます。
インライン jQuery のどの部分がテンプレート jQuery と競合しているのか、誰にもわかりますか?
DateTime.cshtml テンプレート
@model Nullable<System.DateTime>
@if ( Model.HasValue ) {
@Html.TextBox( "" , String.Format( "{0:dd/MM/yy HH:mm tt}" , Model.Value ) , new { @class = "textbox" , @style = "width:200px;" } )
}
else {
@Html.TextBox("", String.Format("{0:dd/MM/yy HH:mm tt}", DateTime.Now), new { @class = "textbox", @style = "width:200px;" })
}
@{
string name = ViewData.TemplateInfo.HtmlFieldPrefix;
string id = name.Replace( ".", "_" );
}
<script type="text/javascript">
$(document).ready(function () {
$("#@id").datetimepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
ampm: true,
hour: 12,
minute: 0,
stepMinute: 5,
hourMin: 6,
hourMax: 16,
showOptions: {
origin: ["top", "left"]
}
});
});
</script>
チェックアウト ビュー jQuery
<script type="text/javascript">
$(function () {
// Document.ready -> link up remove event handler
$(".RemoveLink").click(function () {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// Perform the ajax post
$.post("/ShoppingCart/RemoveFromCart", { "id": recordToDelete },
function (data) {
// Successful requests get here
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data.DeleteID).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteID).text(data.ItemCount);
}
//Hide the 'Checkout' button if there is no items in the cart.
if (data.CartTotal == 0) {
$('#checkout-button').fadeOut('slow');
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
});
</script>
関連する生成された HTML
<div class="editor-label">
<label for="Order_PickUpDateTime">Pick up Date and Time</label>
</div>
<div class="editor-field">
<input class="textbox" data-val="true" data-val-required="Pick up date and time is required" id="Order_PickUpDateTime" name="Order.PickUpDateTime" style="width:200px;" type="text" value="30/04/12 16:38 PM" />
<script type="text/javascript">
$(document).ready(function () {
$("#Order_PickUpDateTime").datetimepicker
({
dateFormat: 'dd/mm/yy',
showStatus: true,
showWeeks: true,
highlightWeek: true,
numberOfMonths: 1,
showAnim: "scale",
ampm: true,
hour: 12,
minute: 0,
stepMinute: 5,
hourMin: 6,
hourMax: 16,
showOptions: {
origin: ["top", "left"]
}
});
});
</script>
<span class="field-validation-valid" data-valmsg-for="Order.PickUpDateTime" data-valmsg-replace="true"></span>
</div>