2017-02-14 11 views
0

Я хочу, чтобы в нем была модель начальной загрузки и выбор даты. Который я скопировал все из этого примера и отлично работал.Наличие сборщика datetime в частичном представлении внутри модели начальной загрузки JQuery

http://jsfiddle.net/sudiptabanerjee/93eTU/

Проблема заключается в том, мои диалоговые содержимое представляют собой частичные и установить с JQuery. Кажется, он никогда не показывает выбор даты. Я скопировал соответствующие разделы моего кода.

Так что на экране есть быть кнопка, как

<button type="button" class="btn btn-primary" id="btnEdit" 
     [email protected] 
     data-toggle="modal" 
     data-target="#myModal"> 
     Edit 
</button> 

Который есть щелчок событие JQuery

$(document).on("click", "# btnEdit", function (e) { 
    $.ajax({ url: "/Item/Edit", 
      datatype: "text", 
      data: { itemId: $(this).attr('data-ItemId) }, 
      type: "GET", 
      }).done(function (partialViewResult) { 
      $(".modal-content").html(partialViewResult); 
    }); 
}); 

}); Это затем переходит к контроллеру MVC под названием ItemController и вызывает Edit, который получает частичный вид public ActionResult Edit (Guid itemId) { return PartialView ("_ Edit", GetByItemID (itemId)); }

Частичный вид Edit выглядит следующим образом, и это то, что не отображает вход с идентификатором DatePicker

@model Project.Models.Item 
@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 
    <div class="form-horizontal"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria- label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel"> Item</h4> 
    </div> 
    @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 
    <p>Date: <input type="text" id="datepicker" class="datepicker"></p> 
</div> 
} 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

Существует JS вызывался, что выложиться с классом DatePicker Datepicker. Это работает, когда текстовое поле где-нибудь еще, ожидать, когда его в диалоговом

$(".datepicker").datepicker(); 

У меня также есть CSS делает это

.clsDatePicker { z-index: 100000; } 
+0

где ваша модель ... во-вторых, кажется, вы инициализации модели, прежде чем она получает вернуться на просмотр ... Взгляните внимательно и убедитесь, что ваша модель загружается до инициализации .... – user7417866

+0

Пользователь вы спрашиваете о модели mvc, ее только что получили 3 свойства, поле идентификатора направляющих, поле имени строки и дату поле. Его отображение было снято с частичного обзора, когда я злился на неработающий код. –

+0

Я постараюсь ответить завтра с рабочим кодом :) – user7417866

ответ

1

проблема ваш JS для DateTimePicker плагин становится загружен перед вами добавляют модальный контент, который формирует ваше предварительное представление, в этом случае, когда DOM уже готов, плагин не найдет элемент, динамически добавленный из представления.

попробовать инициализировать свой DateTimePicker после добавления контента из динамического представления

$(document).on("click", "# btnEdit", function (e) { 
    $.ajax({ url: "/Item/Edit", 
      datatype: "text", 
      data: { itemId: $(this).attr('data-ItemId) }, 
      type: "GET", 
      }).done(function (partialViewResult) { 
      $(".modal-content").html(partialViewResult); 
$(".datepicker").datepicker(); 
    }); 
}); 

надеюсь, что это помогает :)

+0

ура, это работало как шарм. Я даже мог избавиться от Z-индекса css, который всегда является запахом кода. –

+0

рад помочь :) – user7417866