Jquery datepicker does not work in ajax

[code739]

Hi guys i got a problem,

I have a page requesting rows from the other page via ajax
the data that will be return includes a field for date, then use datepicker,
my problem is the return data doest read datepicker from jquery cause it is retrieved via ajax
heres my code:

html file

<table id="job-assign">
<tr>
    <!--date picker will work inline html--!>
    <td><input type="text" id="sdate1" name="sdate1" class="datepicker"/></td>
</tr>
<tr>
    <td>
        <input type="button" value="Add Row" onclick="load_row('job-assign','job-assign-len',3)"/>
    </td>
</tr>
<table>

js file

 #js file
     $(function() {
            $(".datepicker" ).datepicker();
     });
    function load_row(cont,len,type){
        var suffix = parseInt($('#'+len).val())+1;
        var request = $.ajax({
                        type: "POST",
                        url: "request_rows.php",
                        async:false,
                        data: {row : type, suf : suffix}
                    });

        request.done(function(msg) {
                    $('#'+cont).append(msg);
        });
        $('#'+len).val(function(){ return suffix;});
    }

request_rows.php

 <?php
    $type = $_POST['row'];
    $suffix = $_POST['suf'];

    echo '
        <tr>
        <!--date picker doest work here --!>
        <td><input type="text" id="sdate1" name="sdate1" class="datepicker"/></td>
        </tr>'
 ?>

[JJenZz]

You need to re-initialise the datepicker plugin on that markup for it to work because your DOM ready call only initialises it on elements that already exist within the markup on DOM ready (so not on future additions to the markup).

request.done(function(msg) {
    msg = $(msg).appendTo('#' + cont);
    msg.find('.datepicker').datepicker();
});

I tend to use PubSub for this sort of thing though... that way you're not repeating yourself within DOM ready and all your ajax calls. Something like:

// this requires a pubsub plugin (such as https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js) and is called everytime '/ui/update' is published
$.subscribe('/ui/update', function(context) {
    context = $(context);

    // initialise all your plugins here

    // initialise datepicker
    context.find('.datepicker').datepicker();

    // for example, initialise autocomplete
    context.find('.autocomplete').autocomplete();
});

// your JS
$(function() {
    // will initialise plugins within body 
    // on DOM ready
    $.publish('/ui/update', ['body']);
});

function load_row(cont,len,type){
    var suffix = parseInt($('#'+len).val())+1;
    var request = $.ajax({
        type: "POST",
        url: "request_rows.php",
        async: false,
        data: {row : type, suf : suffix}
    });

    request.done(function(msg) {
        msg = $(msg).appendTo('#' + cont);

        // will initialise plugins within msg
        $.publish('/ui/update', [msg]);
    });

    $('#'+len).val(function(){ return suffix;});
}