JQueryUIHelpers for MVC5 - DatePicker not rendering in Partial View - jquery-ui

Question

I have a current page which uses JqueryUIHelpers to render JQuery UI DatePicker.
I've followed the tips on:
JqueryUIHelpers - Getting Started
Everything was working fine until I started moving the codes to a partial view.
The datepicker is no longer rendering on click.
I've read around that the same issue happens with normal JQueryUI usage, and I should move the JavaScript that renders the datepicker to the base view (something like $('#date').datepicker()).
However, the JQueryUIHelpers code is like:
#Html.JQueryUI().Datepicker("date")
Can I know if there's anyway to get it working?

Answer 1

Thanks to Kartikeya's suggestion, managed to get the datepicker working.
First I have the DatePicker defined:
#Html.JQueryUI().Datepicker("date")
and in the partial view's document.ready() function, I re-initialized the DatePicker once more:
$('#date').datepicker();
and now everything's working fine.
edit:
thanks to Kartikeya's suggestion again. Including the JQueryUI file in the partial view will eliminate the need to re-initialize the DatePicker once more in the document.ready() function block.
What I did was to include the line:
#Scripts.Render("~/bundles/jqueryui")
in my partial view and then everything clicks.
By the way, now I know "what to do to get it work", can I know "why does it work this way"?

Answer 2

Well i m explaining your problem in answer section because there is no proper space in comments section.
Yes many people think that this might be a bug in partial view in asp.net mvc but it is not so if we write #Html.JQueryUI().Datepicker("date") then somewhere internally the datepicker initialize same way as :
$(document).ready(function(){
$('#date').datepicker();
});
even if we are not required to write above jquery code but datepicker initialize this way only,so this is the case if we use datepicker in views but if we use datepicker in partial view then scenario changes because partial views are generally used for dynamic content for ex :- if we want to change some html dynamicaly then we use partial view and the dynamic html returned by partial view is displayed inside view,so here the problem arises because for partial view no document.ready() event fire to initialise the datepicker so this problem occurs and my two comments and your two answers can solve it.In above lines i m again and again writing dynamic html because this problem is because of this dynamic html only in order to overcome this we can also use event delegation i.e .on() in jquery or intialize datepicker as(give all datepicker textboxes a class say 'textbox') :
$('body').on('focus',".textbox", function(){
$(this).datepicker();
});​
Thanks..!!