Avoir un sélecteur datetime dans une vue partielle à l'intérieur d'un modèle de bootstrap JQuery

Question

Je veux avoir un modèle bootstrap avec un sélecteur de date. Lequel j'ai copié tout de cet exemple et a fonctionné bien.

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

Le problème est, mon contenu du dialogue sont des vues partielles et mis en place avec JQuery. Il semble ne jamais montrer le sélecteur de date. J'ai copié les sections pertinentes de mon code.

donc à l'écran il y a un bouton comme

<button type="button" class="btn btn-primary" id="btnEdit" 
     data-itemId=@item.ItemId 
     data-toggle="modal" 
     data-target="#myModal"> 
     Edit 
</button> 

qui a un événement click 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); 
    }); 
}); 

}); Cela passe ensuite au contrôleur MVC appelé ItemController et appelle Edit qui obtient la vue partielle public ActionResult Edit (Guid itemId) { return PartialView ("_ Edit", GetByItemID (itemId)); }

La Modifier vue partielle ressemble à ceci, et cela est ce qui ne montre pas l'entrée avec l'identifiant 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") 
} 

Il y a JS se dit que donner tout à la classe datepicker un datepicker. Il fonctionne lorsque la zone de texte est partout ailleurs, attendez-vous quand sur une boîte de dialogue

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

J'ai aussi le CSS faisant

.clsDatePicker { z-index: 100000; } 

Answer 1

le problème est votre JS pour le plugin DateTimePicker est de se charger avant ajoutent du contenu modal à partir de votre vue prartielle, dans ce cas, quand DOM est déjà prêt, le plugin ne trouvera pas l'élément ajouté dynamiquement à la vue.

essayez l'initialisation de votre datetimepicker après avoir ajouté du contenu de votre vue dynamique

$(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(); 
    }); 
}); 

espérons que cette aide :)