[RESOLVED] jQueryUI DatePicker In Partial View Not Showing After Ajax Call

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

Here's how I managed to solve the issue.

1. Make sure that the id's of the textbox of which the datepicker has been initialized are unique.
2. Remove the referencing of jquery and jquery UI library in partial views and transferred them to Index.cshtml page.

- kgc