How to make JQuery DatePicker work after dynamically loaded in a partial view?

Question

I have lost jquery datepicker functionality in this scenario...

1- Originally I had a normal view, which worked fine, having this code for date input...

<input type="text" name="date_start" id="date_start"
                       value="@(Model.TimeStart)" />
<script language="javascript" type="text/javascript">
    $("#date_start").datepicker();
</script>

2- Then, I converted that view in a partial view which is dynamically loaded with...

$('#TargetEmptyDiv').load("/MyController/MyAction");

3- The partial view loads ok, the data can be (manually) entered and all its fine. The only problem is that the jquery datepicker is no longer working. I tryed to assign it after the loading, using this...

$('#TargetEmptyDiv').load("/MyController/MyAction",
                          function () { $("#date_start").datepicker(); });

That did not work.

4- Later I've learned that jquery provides the live() and delegate() functions which are capable of attach javascript code to elements loaded "now and in the future". So, I tryed this in the document initialization...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").live("click", function () { $(this).datepicker(); });
    });
</script>

and later also...

<script type="text/javascript">
    $(document).ready(function () {
           $("#date_start").delegate("click", function () { $(this).datepicker(); });
    });
</script>

none of which worked, maybe because they directly reference to the "click" event, but the datepicker is "attached" (if that is the proper term) to the whole element.

So, question is: How to make the jquery datepicker work on elements loaded after dynamic load???

Thanks for your time!

SOLVED: The problem was that at the bottom of _Layout.cshtml there is this line...

@Scripts.Render("~/bundles/jquery")

..which loads the minified version of jquery libraries (already referenced by myself). So, the libraries were loaded twice and got invalid, producing the error "datepicker() is not a function".

Just commenting or deleting that line, makes all work fine!

Answer 1

Put the following jQuery in the base view, not the partial view

<script>
  $(document).ready(function () { 
      $(document).on('focus', '.datefield', function () {
          $(this).datepicker();
      });
  });
</script>

This will work when a partial view is dynamically loaded and on page load.

Answer 2

Your approach in #3 looks to me like it should have worked, so it seems like you need to do some debugging. Try this:

1. Get the Firebug extension, if you use Firefox (Chrome has dev tools built in)
2. Add a debugger line to your code (see below for example)
3. Load your page up with Chrome or Firebug/Firefox (or any other browser's dev tools)

What should happen is that your browser will pause at that point. However, if things aren't working as you expect, it might not be hitting that code at all, and then you'd get no pause.

If you do get a pause, use the console to inspect the value of $("#date_start"); it's possible that jQuery selector isn't grabbing what you think it is.

Here's a debugger example with your code:

$('#TargetEmptyDiv').load("/MyController/MyAction", function () {
    debugger;
    $("#date_start").datepicker();
});