jquery bind datepicker to ajax loaded content

Question

Hi,

I'm binding the jquery datepicker to an input field. This works fine with static context. But if I reload parts of the page with ajax, call again the bind method, then the newly loaded content is not found, and thus I can not bind my datepicker to the newly loaded fields.

<script type="text/javascript">
    function ajax_get_hour_record_form()
        {
           $.get(url, function(results){
              var form = $("form.ajax_form_result", results);
              var h3 = $("h3", results);
              //update the ajax_form_result div with the return value "form"
              $('#ajax_form_result').html(form);ajax_form_h3
              $('#ajax_form_h3').html(h3);
            }, "html");
        }

    //ajax for capturing the href link and show the resulting form
    $( document ).ready( function() {
       $( '.add_hour_record' ).click( function(e) {
            e.preventDefault();
            url = $(this)[0].href;
            ajax_get_hour_record_form();
            //here I'm calling the bind_datepicker_to_date_fields to bind the ajax loaded fields to the datepicker. This does not work.
            bind_datepicker_to_date_fields();
        });
        bind_datepicker_to_date_fields();
    });
</script>

<script type="text/javascript">
    //regular expression function to select nodes based on regular expressions
    //got it from: http://james.padolsey.com/javascript/regex-selector-for-jquery/
    jQuery.expr[':'].regex = function(elem, index, match) {
        var matchParams = match[3].split(','),
            validLabels = /^(data|css):/,
            attr = {
                method: matchParams[0].match(validLabels) ? 
                            matchParams[0].split(':')[0] : 'attr',
                property: matchParams.shift().replace(validLabels,'')
            },
            regexFlags = 'ig',
            regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
        return regex.test(jQuery(elem)[attr.method](attr.property));
    }

    $(function()
    {
        //choose each field with a date string in its name and add the jquery datepicker to it
        $("input:regex(name, .*date*)").datepicker({dateFormat: 'yy-mm-dd'});
    });

    function bind_datepicker_to_date_fields()
    {
        //choose each field with a date string in its name and add the jquery datepicker to it
        $("input:regex(name, .*date*)").datepicker({dateFormat: 'yy-mm-dd'});
         alert("bye");
    }
</script>

Thus I guess I have to hook somewhere into the ajax call and run my bind_datepicker_to_date_fields method on the return values of the ajax call. But the question is how?

Answer 1

The .get is an asynchonous call (as in it will return and continue to execute surrounding code before the load is done, hence why they have the callback function), so the problem is the content might not have been loaded by the time you're calling the bind_datepicker_to_date_fields() method inside the .click event. Move that call into the callback function for the ajax load and you should be ok:

function ajax_get_hour_record_form()
{
   $.get(url, function(results){
      var form = $("form.ajax_form_result", results);
      var h3 = $("h3", results);
      //update the ajax_form_result div with the return value "form"
      $('#ajax_form_result').html(form);ajax_form_h3
      $('#ajax_form_h3').html(h3);
      bind_datepicker_to_date_fields();
    }, "html");
}

//ajax for capturing the href link and show the resulting form
$( document ).ready( function() {
   $( '.add_hour_record' ).click( function(e) {
        e.preventDefault();
        url = $(this)[0].href;
        ajax_get_hour_record_form();
    });
    bind_datepicker_to_date_fields();
});

I'd also recommend, to make things faster, to not use regex to figure out what inputs to add the datepicker too. Add a class to those input fields instead, like class="datepicker", and then change your bind method to:

function bind_datepicker_to_date_fields()
{
    $("input.datepicker").datepicker({dateFormat: 'yy-mm-dd'});
}

Querying like that will be much faster for the browser.