jQuery datepicker returns "inst is null" error when loaded via AJAX
        Posted  
        
            by Robert
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Robert
        
        
        
        Published on 2010-03-03T21:53:08Z
        Indexed on 
            2010/03/25
            0:23 UTC
        
        
        Read the original article
        Hit count: 710
        
jQuery
|jquery-datepicker
I'm loading content via an AJAX call into a table row added to the DOM on the fly. I'm calling the datepicker functionality in my callback function and the calendar shows fine. However, when I click on the date, I get an error: inst is null. Here's my code:
$(document).ready(function() {
    $(".edit").live("click", function() {
        //Delete previously loaded edit row
        $("#tempEditRow").remove();
        //Get the record id of the row to be edited
        var recordID = $(this).parent("td").parent("tr").attr("id");
        //Add the new row to the document
        $(this).parent("td").parent("tr").after("<tr id=\"tempEditRow\"><td id=\"tempEditCell\" colspan=\"100\"></td></tr>")
        //Get a reference to the new row
        var container = $("#tempEditCell");
        //Populate the container
        populateContainer("/wpm/includes/ajax_editApplication.cfm?id=" + recordID, container);
    });
});
function populateContainer(ajaxUrl, container) {
    //Populate the container
    $.ajax({
        url: ajaxUrl,
        cache: false,
        success: function(html){
            $(container).html(html);
            $('.datepicker').datepicker();
        }
    }); 
}
I've tried deleting the hasDatepicker class, deleting any references to the datepicker, etc. but nothing is working. Thanks in advance for helping!
© Stack Overflow or respective owner