Hi All,
I encountered this problem. The first time the page loads, the jquery datepicker shows. However, after the ajax calls which is to load the partial view to a div,
the jquery datepicker doesn't show up. I've tried several approaches but to no avail, all of them didn't work. Here's the codes so far.
Main View of where the partial view will be loaded inside the div.
Code:
<a id="menuEmployee" href=""><span class="glyphicon glyphicon-plus"></span> Dashboard Entry</a>
<div id="divReportContent" class="col-md-8">
</div>
$('#menuEmployee').click(function (e) {
e.preventDefault();
$.ajax({
type: "GET",
url: "/TempProject/EmployeeEntry",
contentType: "application/json; charset=utf-8",
success: function (data, status, xhr) {
$('#divReportContent').html(' ');
$('#divReportContent').html(data);
},
error: function (xhr, status, error) {
alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText);
}
});
});
Partial view
Code:
<div class="form-group">
<div class="SelectYear">
<label>Start Date:</label><input id="txtStartDate" type="text" class="form-control" />
<label>End Date:</label><input id="txtEndDate" type="text" class="form-control" />
<button id="btnRunReport" type="button" class="btn btn-primary">Run Report</button>
</div>
</div>
<script src="~/Scripts/query-ui-1.12.1.js"></script>
<script src="~/Scripts/EmployeeInfo.js"></script>
<script type="text/javascript">
$(document).ready(function () {
debugger;
$('#txtStartDate').datepicker();
$('#txtEndDate').datepicker();
});
</script>
Controller action.
Code:
[HttpGet]
public ActionResult EmployeeEntry()
{
return PartialView("~/Views/Reports/EmployeeEntryForm.cshtml");
}
Hope someone has encountered this issue before.
- kgc