DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

select can't input in search box with 6 field after validation error

select can't input in search box with 6 field after validation error

cyroncyron Posts: 5Questions: 2Answers: 0
in Select

using select2 plugin with editor.
when the field is over 5,say 6,
and let editor validation fail by input nothing,
then the select2's search box can't be inputed.
I think it maybe the z-index issue, but can't resolve it.

Answers

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    Are you able to link to the page showing the issue so I can debug it problem please.

    Thanks,
    Allan

  • cyroncyron Posts: 5Questions: 2Answers: 0

    i don't have online version, but the simple sample is like below.
    if you delete the name5, select2 works fine.

    <html>
    <head>
        <meta charset="utf-8" />
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="css/dataTables.bootstrap.min.css" rel="stylesheet" />
        <link href="css/editor.dataTables.min.css" rel="stylesheet" />
        <link href="css/editor.bootstrap.min.css" rel="stylesheet" />
        <link href="css/buttons.dataTables.min.css" rel="stylesheet" />
        <link href="css/buttons.bootstrap.min.css" rel="stylesheet" />
        <link href="css/select.dataTables.min.css" rel="stylesheet" />
        <link href="css/select.bootstrap.min.css" rel="stylesheet" />
        <link href="css/select2.min.css" rel="stylesheet" />
        <link href="css/select2-bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="dataTable_wrapper">
                            <table class="table table-striped table-bordered table-hover" id="dataTables">
                                <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>name1</th>
                                        <th>name2</th>
                                        <th>name3</th>
                                        <th>name4</th>
                                        <th>name5</th>
                                    </tr>
                                </thead>
                             </table>
                         </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
        <script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="js/dataTables.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.editor.min.js" type="text/javascript"></script>
        <script src="js/editor.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.buttons.min.js" type="text/javascript"></script>
        <script src="js/buttons.bootstrap.min.js" type="text/javascript"></script>
        <script src="js/dataTables.select.min.js" type="text/javascript"></script>
        <script src="js/select2.min.js" type="text/javascript"></script>
        <script src="js/editor.select2.js" type="text/javascript"></script>

        <script type="text/javascript">

        $(document).ready(function() {
            var editor = new $.fn.dataTable.Editor({
                table: "#dataTables",
                idSrc: 'id',
                ajax: function(method, url, d, successCallback, errorCallback) {
                    var output = {data: []};
                    
                    if (d.action !== 'remove') {
                        $.each(d.data, function(index, value) {
                            output.data.push(value);
                        });
                    }
         
                    successCallback(output);
                },
                fields: [
                    {
                        label: "id:",
                        name: "id",
                        type: "select2",
                        opts: {
                            theme: 'bootstrap',
                            data: [{id: 1, text: 'demo1'},{id: 2, text: 'demo2'},{id: 3, text: 'demo3'}],
                            minimumInputLength: 1
                        }
                    }, {
                        label: "name1:",
                        name: "name1"
                    }, {
                        label: "name2:",
                        name: "name2"
                    }, {
                        label: "name3:",
                        name: "name3"
                    }, {
                        label: "name4:",
                        name: "name4"
                    }, {
                        label: "name5:",
                        name: "name5"
                    }
                ]
            });

            var table = $('#dataTables').DataTable({
                serverSide: false,
                ordering: false,
                dom: "Brt",
                select: {
                    style: 'single'
                },
                ajax: null,
                columns: [
                    {"data": "id"},
                    {"data": "name1"},
                    {"data": "name2"},
                    {"data": "name3"},
                    {"data": "name4"},
                    {"data": "name5"}
                ],
                buttons: [
                    { extend: "create", editor: editor },
                    { extend: "edit", editor: editor },
                    { extend: "remove", editor: editor }
                ]
            });

            editor.on('preSubmit', function (e, o, action) {
                if (action !== 'remove') {
                    console.log(editor.inError());
                    var name1Field = editor.field('name1');
                    if (!$.trim(name1Field.val())) {
                        name1Field.error('required!');
                    }
                    if (editor.inError(['name1'])) {
                        return false;
                    }
                }
            });
        });
        </script>
        
    </body>
</html>
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin

    I had to add {id: '', text: ''}, to the options list to be able to get the field into the error state (otherwise Select2 wouldn't let me have no item selected), but once I'd done that and attempt to submit the form, with the error message showing for that field, I had no problem clicking the input and being able to then input something else.

    Are there any errors shown in the console? I presume you can see the search box before the error? If so, that would suggest that it isn't a z-index issue.

    Allan

  • cyroncyron Posts: 5Questions: 2Answers: 0

    Thanks for your testing.
    I figured it out why the problem can't be reproduced.
    I am always using firefox to test the app, and the problem appeared.
    when I use chrome or ie, everything is ok.
    and the demo has slight differt problem between my real app,
    it need not to cause validation error, select2 can't be inputed at all.
    and the app's problem is, when fields other than select2 has validation error,
    select2 can't be inputed.
    but I think it maybe the same issue.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.