Multi Select DropDown in row disappears on page change or filter

nroeder07

I have a form inside each row of my datatable to select different printing options passing the row id to a print page. The multi select dropdown works fine however, when I change pages or filter the dropdown disappears. However all other buttons remain.

                     $(document).ready(function () {
                            $('#workorder').DataTable({
                                //display columns
                                "columns": [
                                    //display action buttons
                                    {"mData": "idWorkOrder",
                                        "mRender": function ( data, type, row ) {
                                            return '<form method="POST" action="print.php">' +
                                                '<select multiple class="selectpicker" data-width="80px" data-style="btn-info"  data-actions-box="true" id="multipleSelect" name="pages[]"> ' +
                                                '<option disabled selected> Pages </option> ' +
                                                '<option value="1" selected>Haight Cover Sheet</option> ' +
                                                '<option value="2" selected>Set Cover Sheet</option> ' +
                                                '<option value="3" selected>Roofing Work Order</option>' +
                                                '<option value="4" selected>Roofing Subcontractor Pay Request</option> ' +
                                                '<option value="5" selected>Job Site Hazard Assessment Roofing</option> ' +
                                                '<option value="6" selected>Job Site Checklist Roofing</option> ' +
                                                '<option value="7" selected>Subcontractor Checklist Roofing</option> ' +
                                                '<option value="8">Siding Work Order</option> ' +
                                                '<option value="9">Siding Subcontractor Pay Request</option> ' +
                                                '<option value="10">Job Site Hazard Assessment Siding</option> ' +
                                                '<option value="11">Job Site Checklist Siding</option> ' +
                                                '<option value="12">Subcontractor Checklist Siding</option> ' +
                                                '<option value="13">Gutters Work Order</option> ' +
                                                '<option value="14">Gutter Subcontractor Pay Request</option> ' +
                                                '<option value="15" selected>Magnet Sheets</option> ' +
                                                '</select><a href=print.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a></form> '+
                                                '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a> ' +
                                                '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                                        }
                                    },
                                    {"data": "cFirstName"},
                                    {"data": "cLastName"},
                                    {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
                                ],
                                "processing": true,
                                "serverSide": true,
                                "responsive": true,
                                "ajax": {
                                    url: 'datatables.php',
                                    type: 'POST'
                                }
                            });
                        });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

interesting - thanks for your question. I'm afraid I don't have an immediate answer for you - I've not come across this issue before.

Are you able to give me a link to the page showing the issue so I can try to debug it? You can private message it to me by clicking my name above and then "Send message" if you would like to keep it private!

Regards,
Allan

nroeder07

sent you a direct message

nroeder07

This solution works, not sure if it's ideal coding however.

 <script type="text/javascript">
                        function datatableHandler ( sel)
                        {
                            $('#workorder').DataTable().destroy();

                            var table = $('#workorder').DataTable({
                                //display columns
                                "columns": [
                                    //display action buttons
                                    {"mData": "idWorkOrder",
                                        "mRender": function (data,  type,  row) {
                                            return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
                                                '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
                                                '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                                        }
                                    },
                                    {"data": "cFirstName"},
                                    {"data": "cLastName"},
                                    {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
                                ],
                                "processing": true,
                                "serverSide": true,
                                "responsive": true,
                                "ajax": {
                                    url: 'datatables.php',
                                    type: 'POST'
                                }
                            });
                            table.draw( false );
                        }
                        $(document).ready(function () {
                            $('#multipleSelect').on('change', function() {
                                sel = $(this).val();
                                console.log(sel);

                                datatableHandler (sel);
                            });
                            $('#workorder').DataTable().destroy();

                            var table = $('#workorder').DataTable({
                                //display columns
                                "columns": [
                                    //display action buttons
                                    {"mData": "idWorkOrder",
                                        "mRender": function (data,  type,  row) {
                                        sel=$('#multipleSelect').val();
                                            return  '<a href="print.php?idWorkOrder='+row.idWorkOrder+'&pages='+sel+'" data-toggle="tooltip" title="PRINT" target="_blank"><button class="btn btn-info btn-sm"><span class="glyphicon glyphicon-print" aria-hidden="true"></span></button></a>'+
                                                '<a href=update.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="EDIT"><button class="btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></button></a>'+
                                                '<a href=delete.php?idWorkOrder='+row.idWorkOrder+' data-toggle="tooltip" title="DELETE"><button class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button></a>';
                                        }
                                    },
                                    {"data": "cFirstName"},
                                    {"data": "cLastName"},
                                    {"data": "wRoofContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wSidingContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )},
                                    {"data": "wGutterContract", render: $.fn.dataTable.render.number( ',', '.', 0, '$' )}
                                ],
                                "processing": true,
                                "serverSide": true,
                                "responsive": true,
                                "ajax": {
                                    url: 'datatables.php',
                                    type: 'POST'
                                }
                            });
                            table.draw( false );

                        });
                    </script>