I am creating a dropdown on my page which cascades information from one column to another. Everything works fine however, the browser throws the following error. How do I fix this? Any help appreciated.
Incorrect use of The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field.
Please see my code below.
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
searching: true,
columnDefs: [
{
target: 6,
visible: false,
searchable: true,
}
],
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
orientation: 'landscape',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
// 'colvis'
],
});
buildSelect(table);
table.on('draw', function() {
buildSelect(table);
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
});
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select><option value="">select me</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// ** MY CHANGE **
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox">
<p>Name:
<span id="dropdown1">
</span>
</p>
<p>Postion: <span id="dropdown2">
</span>
</p>
<p>Office: <span id="dropdown3">
</span>
</p>
<button type="button" id="test">Clear Filters</button>
</div>
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
<th> </th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Hidden Column</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Test1</td>
<td>test2</td>
<td>test3</td>
<td>test4</td>
<td>2011/04/25</td>
<td>$3,120</td>
<td>Sys Architect</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director: fgghghjhjhjhkjkj</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
<td>Director:</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Authorjkjkjk fdfd h gjjjhjhk</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
<td>Tech author</td>
</tr>
</tr></tbody></table>
</div>
