jQuery datepicker does not work after Ajax call

Question

Here is the situation: I'm using jQuery to dynamically load a form. In that form, there is a datepicker from jQueryUI. The problem is that the datepicker loads the first time, but if the form is loaded again, the datepicker doesn't work. I know I need to rebind the datepicker function each time the page is loaded, but all of my attempts have failed. Any help would be appreciated!

Code snippet below:

function makeMyDay() 
{
    $(".datepicker").datepicker(
    {
        inline: true
    });
}

function getNewPage(id,idTwo)
{
    $.ajax(
    {
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) 
        {
            $('.bar' + idTwo).html(data);
            makeMyDay();
        }
    });
}

Just in case it needs clarifying, foo.php gets loaded into .bar. The datepicker itself is in foo.php, and the external JS files are in the main file, not foo.php.

Edit

Updated code below, but the problem still persists:

$(function()
{
    $('.datepicker').datepicker({inline: true});
});

function getNewPage(id,idTwo)
{
    $.ajax(
    {
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) 
        {
            $('.bar' + idTwo).html(data).find(".datepicker").datepicker(
            {
                inline: true
            });
        }
    });
}

Solution

Switch $(makeMyDay); to makeMyDay(); should do the trick because makeMyDay is a function and not a selector.

Or try to bind the datepicker() directly after the ajax-call as far as .datepicker is in the .bar container this should work:

function getNewPage(id,idTwo)
{
    $.ajax({
        type: "GET",
        url: 'foo.php',
        data: "id=" + id,
        success: function(data) {
             $('.bar' + idTwo).html(data).find(".datepicker").datepicker({
                   inline: true
              });
        }
    });
}

A working example that simulates the process can be found here: http://jsfiddle.net/7wBWB

Comments

[t q]

this looks strange $(makeMyDay);

[OneAndTwo]

You were right, just fixed it, but the problem remains.

[Ricardo Souza]

Maybe you will have to destroy the datepicker before trying to create it again.

[OneAndTwo]

Can you give an example of what you were thinking of? I quickly tried to destroy the datepicker, but it didn't seem to do anything.

[OneAndTwo]

Oops, it's inline. :)

[Salman A]

Seems to work with .html() without destroying jsfiddle.net/salman/Vd5Sa/1 and with destroying jsfiddle.net/salman/Vd5Sa/2

[OneAndTwo]

I am getting the following error: TypeError: $(...).html(...).find(...).datepicker is not a function

[OneAndTwo]

Nevermind, the issue was there were two jQuery file calls.

[OneAndTwo]

That's what I thought was the problem, but unfortunately I just tried your code and the result is the same: the datepicker loads the first time, but fails to load subsequent times.

[wildhaber]

Looks strange. Do you get any errors? I will try to create a jsfiddle for that to help you.

[wildhaber]

I just tried this process here and it works properly jsfiddle.net/7wBWB - what is stored in your "idTwo" variable? because that changes your class-selector. Can you provide a part of your html-code?

[OneAndTwo]

I can get datepicker to work if there are multiple instances on the same page, but for some reason it breaks with an Ajax call. In idTwo, it's just a variable from a db query: <div class="bar<?php echo $idtwo;?>">

[OneAndTwo]

The way it's working is I have a foreach loop, each of which carries with it a .bar + (ID). That particular .bar + (ID) loads foo.php with the original "id", which then dynamically loads content from foo.php.

[OneAndTwo]

I get the following error: TypeError: $(...).html(...).find(...).datepicker is not a function

[OneAndTwo]

Turns out it was because I was calling jQuery files twice... doh! Thank you!