duddosai duddosai - 7 months ago 53
Javascript Question

Binding datetimepicker to the textbox that is created dynamically - jQuery

I'm creating a dataTable where one row will contain five columns. The third and fourth column will have a text-box which is dynamically created with unique id. The fourth row is for providing date. I want to bind datetimepicker with each and every text-box in the fourth column. This is what I've done:

table = jQuery("#table_billing").dataTable({
"sAjaxSource": "includes/inc-billing2-db.php?mode=billing_dataTable",
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": [
{
"aTargets": [2],
"mRender": function(data, type, row) {
return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ a +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';


}
},
{
"aTargets": [3],
"mRender": function(data, type, row) {
return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ b +'" placeholder="Invoice Date" required="required" onblur="getdate(this)">';

}
},
{
"aTargets": [4],
"mRender": function(data, type, row) {
return '<input type="button" class="btn-group btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[3] + ', ' + row[4] + ');">';
}
}
],
"fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
jQuery("#invoice_date_'+b+'").datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
a = a + 1;
b = b + 1;
//c = c + 1;

}
});


I tried to bind the datetimepicker tp the dynamically generated text-box, but I couldn't do it. How can I do it? What should I do to display that?

Answer

The problem here is, I define the datetimepicker before the rendering completes. So, the code does not get executed. We have to define it once the rendering is complete. Hence, the answer is:

jQuery("#table_billing").dataTable({
    "sAjaxSource": "billing-db.php?mode=billing_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false,
    "aoColumnDefs": [
        {
            "aTargets": [0],
            "mRender": function(data, type, row) {
                return '<a href="contract-form.php?contract_id=' + row[2] + '" target="_blank" title="' + row[0] + '">' + row[0] + '</a>';
            }
        },
        {
            "aTargets": [2],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ row[3] +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';
            }
        },
        {
            "aTargets": [3],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ row[3] +'" placeholder="Invoice Date" required="required" onblur="getdate(this)" >';
            }
        },
        {
            "aTargets": [4],
            "mRender": function(data, type, row) {
                return '<input type="button" class="btn btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[2] + ', ' + row[3] + ');">';
            }
        }
    ],
    "initComplete": function(settings, json) {
        $('.date').on('focus', function() {
            $(this).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
        });
      }  
});