Get selected item value using a server side add button in datatables jquery library

Question

Datatables Jquery server-side Sample Project Link:

Similar to this article but not using C#.

This code below correctly gets the correct price in the correct row.

   $(document).on('click','.add_btn',function (){
     var id = $(this).attr("id");

   var dataRow = $('#example').DataTable().row( id ).data();
   var price = dataRow[2];

So, I'd expect the answer to look something like:

 var qtd = dataRow[3];  //[3] because the select options is the next column
   var qtd_num = document.getElementById(qtd).selectedOptions[0].value;

A confusing part is getting the element ID to plug it into the above formula. Because the id as of right now is meta.row using the datatables library (which may have to change?). Here is my full code:

<script type="text/javascript"> 
var numbers= [1, 2 , 3, 4];
$(document).ready(function() {
   var table=  $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        ajax: {
        url: 'server.php',
        type: 'POST',
        },
     columnDefs: [ 
         {  targets: -1,
         render: function (data, type, row, meta) {
            return '<button type="submit" class="add_btn btn btn-success btn-md active" data-id="' + meta.row + '"  id=" ' + meta.row + ' " value="add">  <span class="glyphicon glyphicon-plus"></span> </button>';
         }
         },
         {
            targets: -2,
            render: function (data, type, row, meta){
                                    var $select = $('<select data-id="' + meta.row + '"  id="' + meta.row + ' " ></select>', {
                                    });
                                    $.each(numbers, function (k, v, row, meta) {

                                        var $option = $("<option></option>", {

                                            "text": v,
                                            "value": v
                                        });
                                        if (data === v) {
                                            $option.attr("selected", "selected")
                                        }
                                        $select.append($option);
                                    });
                                    return $select.prop("outerHTML");
         }
        } ],
    })
} ); // end ready
</script>

would it work? my project https://sampleajax.000webhostapp.com/ is connected to a backside sql database where it gets the element IDs and such. So a client-side snippet may not fully work...I do need to learn how to create a snippet let me google search... — , Jan 16 '19 at 04:32
after looking at amazon's website, it might be easier just to add the select options feature within the checkout cart process as a separate step. Even ebay uses an input instead of a select options probably because its too complex... This might not be possible as Juri said in the previous article https://stackoverflow.com/questions/13320761/how-to-get-dropdown-selecteditem-value-in-server-side-when-i-created-option-in-c "doing this solely with javascript is not possible". The link works for me when i click it. — , Jan 16 '19 at 04:41

Cue · Accepted Answer · 2019-01-16T04:48:15.800

0

var qtd = dataRow[3]; amounts to nothing because there is no [3] index in the data returned which is throwing an error.

An easier route to accessing the select in that row:

$(document).on('click','.add_btn',function (){
  var id = $(this).attr("id");
  var dataRow = $('#example').DataTable().row( id ).data();
  var price = dataRow[2];
  var qtd_num = $(this).closest('tr').find('select').val()
  ...
})

edited Jan 16 '19 at 04:48

answered Jan 16 '19 at 04:43

Cue

2,699
1
12
13

Get selected item value using a server side add button in datatables jquery library

1 Answers1

Linked