Select dropdown in table cell not firing

cce1911

I have a DataTable (1.10) and I've added a select (dropdown) element in the last column of each row using the following:

 render: function (data, type, row) {
     return divList;
},
className: 'sel_div_dd',
     ...

Where divList is a string built from an Ajax call.

<select>
   <option value='1'>One</option>
    ...
</select>

I searched for a better way to do this, but it's all I could come up with. The select dropdown appears in my table just fine, but for the life of me, I can't build a jquery selector that will catch the 'change' event of the element.

Here is what I have so far:

      $("#my_table").on("change", "select", function() {
            console.log('fired');
      });

This fires, but I can't find the selected option of the element. I've got to be missing something. Can anyone point me in the right direction?

ThomD

$("#my_table .sel_div_dd").on("change", "select", function() {
      console.log('fired');
});

Mind the space in the jQuery selector.

or

$("#my_table select.sel_div_dd").on("change", "", function() {
      console.log('fired');
});

cce1911

Thanks for the response ThomD, but neither of the selectors above work either. In fact, when I add this to my .js, the select element doesn't even render in the column. Seems like there is some sort of conflict going on but I'm not sure how to resolve it.

Should I be adding this element via the DataTables API instead via render?

ThomD

Why do you have a select element in the table? the only time I've done what was when I was using the Editor library.

ThomD

Oh, and we're going to need to see some more sample code. The code I posted should is not really part of the DataTables configuration - it is additional jQuerty code. it should be called after the table is done rendering, so it should be in the InitComplete option.

cce1911

In my document ready function, I make an Ajax cal to get a JSON message with a list of divisions. Then I loop over the JSON to create a single string:

<select data-width="100%" id="" name="division_dd"><option>Select One</option><option value="1">Factory 9</option><option value="2">Custom 9</option><option value="3">Factory 38</option><option value="4">Custom 38</option></select>

Here is my DataTable initialization: Note that arrayRows is a jquery array of arrays. I also get it from an Ajax call and convert it from an array of objects to an array of arrays. (The reason I do this is because the platform is Wordpress and I have to pass a nonce value with the Ajax request and could not figure out how to do this using the datatables Ajax support.)

        myTable = $("#my_table").DataTable({
            data: arrayRows,
            dom: 'lfrtip',
            columnDefs: [
                {
                    targets: 0,
                    render: function (data, type, row) {
                        return '<button type="button" class="btn btn-default btn-lg pl_row_btn" id="' + row[1] + '">Add</button>';
                    },
                    orderable: false,
                    className: 'stages_table_btn'
                },
                {
                    targets: 1,
                    title: 'ID',
                    className: 'all'
                },
                {
                    targets: 2,
                    title: 'First Name',
                    className: 'all'
                },
                {
                    targets: 3,
                    className: 'all',
                    title: 'Last Name'
                },
                {
                    targets: 4,
                    render: function (data, type, row) {
                        return divList;
                    },
                    orderable: false,
                    className: 'sel_div_dd'
                }
            ],
            responsive: true
        })

The table renders fine and I get a table with 5 columns. The last column contains the select dropdown.

Finally, in the document ready function I have the following code, but when I select an option, this code never gets executed. I've tried all sorts of variations on the selector for th is function, to no avail.

$("#my_table select.sel_div_dd").on("change", "", function() {
        console.log('fired');
    });

cce1911

I forgot to mention that there is a button in column 0. When the user presses this button, a function runs to add the row to another table. The button should be disabled until the user selects an option from the dropdown.

I had this working on a Bootstrap html table. Now I'm converting all of my tables to datatables and want to reproduce this functionality.

cce1911

I ended up using a different method than putting a select dropdown in the last column.

ThomD

You need to move that On Cilck assignment. It is firing too early - the doc may be ready then, but datatables isn't. Put it in the InitComplete option of the dataTables declaration.