checkbox Click event is not working from second page in datatable?

Question

I have a datatable and populating with Ajax response. I have a submit button at top and i want to handle click event for submit, I have input text boxes in each row and The below code is working only for first 10 rows, if is click next button in data table the submit ($('#createOrderId').click) event is not working. I tried creating on change event in fndrawcallback, but that is also not working. Can anyone help me on this.

function showCheckoutResults(obj) {
oTable = $('#checkoutTable').DataTable({
    bDestroy : true,
    "autoWidth": false,
    columnDefs : [ {
        width: "2%", 
        targets : 0,
        className : 'dt-body-center select-checkbox',
        'checkboxes': {
               //'selectRow': true
            }
    },
    {
        "targets": [ 10 ],
        "visible": false
    }
    ],
    select : {
        style : 'multi',
        selector: 'td:first-child'

    },
    order : [ [ 1, 'asc' ] ],
    "fnDrawCallback": function() {
        loadDatePicker();
         $('.commonOrderQty').on('change', function () {
             var dataArr = [];

                var rows_selected =  oTable.column(0).checkboxes.selected();
                if (typeof rows_selected != 'undefined') {
                    $.each(rows_selected, function(index, rowId){
                         dataArr.push(rowId);
                    });
                }
                for(var i=0;i<dataArr.length;i++) {
                    $( "#ordQty" + dataArr[i] ).change(function() {
                        alert($("#ordQty" + dataArr[i]).val);
                        validateOrderQty( dataArr[i]);
                    });
                }
         });
    }

});
oTable.rows().remove().draw();
$.each(obj, function(index, key) {
    var ordrSrchResultData = [];
    var finalLeadTime = calculateLeadTime(key.fopLeadTime);
    var unitPrice = key.quote;
    if(key.um == 'CPC') {
        unitPrice = key.quote/100;
    }
    ordrSrchResultData.push(index);
    ordrSrchResultData.push('<input id="po' + index
                + '" type="text" maxlength="12" class="checkoutText" value="' + key.poNo + '"/>');
    ordrSrchResultData.push('<input id="ordQty' + index
            + '" type="text" class="checkoutText commonOrderQty" value="' + key.orderQty + '"/>');
    ordrSrchResultData.push('<input id="boxQty' + index
            + '" type="text" class="checkoutText" value="' + key.boxQty + '"disabled/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
                + '" value="'  + key.dueDate + '" readonly="readonly"/>');          
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="datePicker' + index
                + '" value="'  + finalLeadTime + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input id="partNo' + index
            + '" type="text" class="checkoutText" value="' + key.partNo + '"disabled/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="suppPartNo' + index
                + '" value="' + key.suppPartNo + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="extPrice' + index
            + '" value="' + key.extPrice + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="customerCd' + index
            + '" value="' + key.customerCd + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="text" class="checkoutText" id="quote' + index
            + '" value="' + unitPrice + '" readonly="readonly"/>');
    ordrSrchResultData.push('<input type="hidden" value="'+key.dueDate+'" id="existDatePicker'+index+'"');
    oTable.columns.adjust().draw();
    oTable.row.add(ordrSrchResultData).draw();
    localStorage.setItem('_selectedStartDate', finalLeadTime);
    updateDatepicker(index, finalLeadTime);
    $('#checkoutTable tr:last').attr('id', 't' + index);
    $("#" + 't' + index).removeClass('selected');
    $( "#ordQty" + index ).change(function() {
        validateOrderQty(index);
    });
});}
$('#createOrderId').click(function (){      
    var dataArr = [];
    var rows_selected =  oTable.column(0).checkboxes.selected();
    $.each(rows_selected, function(index, rowId){
      dataArr.push(rowId);
      });       
    var rowsCount = dataArr.length;
    var errMsg = $("#noSelectedDataErrMsg").val();      
    if(rowsCount == 0) {
        jQuery("label[for='ordlabelvalue']").html(errMsg);
        $('#orderErrorModal').modal('show');
        return;
    }
    createOrder(dataArr);
});

@ramsbh, If my answer helped you then please mark it accepted to close this thread or put comments related to your problems. Thanks, — Abhay Maurya
– Abhay Maurya, Commented Dec 13, 2016 at 9:15

Abhay Maurya · Accepted Answer · 2016-12-12 17:30:48Z

2

Instead of:

$('#createOrderId').click(function (){

Use this:

 $(document).on('click','#createOrderId',function (){

answered Dec 12, 2016 at 17:30

Abhay Maurya

12.3k9 gold badges50 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ramsbh Over a year ago

No, that is not working i want to validate po no too, so if i pickup the second page value $('po10').val() , it is throwing as undefined. My requirement is when i click submit all the validations should be done across all pages.

Collectives™ on Stack Overflow

checkbox Click event is not working from second page in datatable?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related