Select and save datatables dropdown selection

austin5577 · December 2017

I have a node.js program that I am working on but have not been able to get my dropdown column to work properly. I query a sql server database and populate the datatable. The last column is my "Format" column with a dropdown list where the user can select a format number (1-10). I need to be able to save whatever format selection is made and update the database after. I haven't been able to even get the correct selection to console.log.

//Here is where I have tried to console.log the selection after a selection is made.
//I only get whatever value is selected in the first row, not the row that was actually changed.

$('#Slapper').on('change', function(){
var value = $('#Slapper option:selected').val();
console.log(value);
});

//Here is where I create the datatable. The dropdown list looks fine visually but doesn't function at all:

        });
        $.each(formats, function(k,v){
               var $option = $('<option></option>', {
                'text': v,
                'value': v
            });
            if(d === v){
                formatArray[r.barcodeID] = r.Format;                    
                $option.attr('selected', 'selected')
            }
            $select.append($option);              
        });
        return $select.prop('outerHTML');
    }
  },  
],

jvretamero · December 2017

It would be nice if you show the complete code, but by reading the desired behaviour and the partial code, it seems that you are assigning the change event to the table rather than the select.

You can use the createdRow do assign the change event to the select on every row. This way you'll be able to get the correct "Format" for every row.

austin5577 · December 2017

Thanks for the reply, I will see if I can get that to work. Also, here is the complete javascript file.

var socket = io('localhost:82'),
mainTable,
printArray = [],
formatArray = [],
print,
editor;
formats = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10
];

$(document).ready(function() {

socket.emit('getBarcodeList');
socket.emit('updateXml');


$('#updateButton').click(function(){
    console.log('updateButton pressed');
    socket.emit('updateXml');
    mainTable.fnDestroy();
    socket.emit('getBarcodeList');
});
$('#cancelButton').click(function(){
    socket.emit('sendCancel');
    console.log('Cancel pressed');
});

$('#Slapper').on( 'change', 'input.editor-print', function () {        
      socket.emit('updatePrint', print = { printA: printArray[this.id], id: this.id } );                 
});
$('#Slapper').on('change', function(){
      var value = $('#Slapper option:selected').val();
      console.log(value);
 });

});

socket.on('getBarcodeList', function(currentData){
console.log(currentData);
createBarcode(currentData);
})
socket.on('refreshJava', function(){
socket.emit('getBarcodeList');
socket.emit('updateXml');
})

        });
        $.each(formats, function(k,v){
               var $option = $('<option></option>', {
                'text': v,
                'value': v
            });
            if(d === v){
                formatArray[r.barcodeID] = r.Format;                    
                $option.attr('selected', 'selected')
            }
            $select.append($option);              
        });
        return $select.prop('outerHTML');
    }
  },  

],
rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-print', row).prop( 'checked', data.printYesNo == 1 );
    }
 });

};

jvretamero · December 2017

So, yes, createdRow may help in this case, you'll also be able to access the row data.

Select and save datatables dropdown selection

Select and save datatables dropdown selection

Answers

Howdy, Stranger!

Categories

DataTables

Select and save datatables dropdown selection

Select and save datatables dropdown selection

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables