Results 1 to 2 of 2

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

  1. #1

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Resolved [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
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

  2. #2

    Thread Starter
    Frenzied Member KGComputers's Avatar
    Join Date
    Dec 2005
    Location
    Cebu, PH
    Posts
    2,020

    Re: jQueryUI DatePicker In Partial View Not Showing After Ajax Call

    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
    CodeBank: VB.NET & C#.NET | ASP.NET
    Programming: C# | VB.NET
    Blogs: Personal | Programming
    Projects: GitHub | jsFiddle
    ___________________________________________________________________________________

    Rating someone's post is a way of saying Thanks...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width