0

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>'
 ?>
2
Contributors
1
Reply
2
Views
5 Years
Discussion Span
Last Post by JJenZz
0

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;});
}

Edited by JJenZz

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.