Prevent modal from updating datatable

jamiedewitz

Hello, I have a modal linked in my navigation that has a form inside of it which is interfering with the datatable on the page underneath. I'm not sure if this is a bootstrap modal issue or a dataTables issue, so I am posting here and on stackoverflow for help. As you see in the example below, after clicking on New and opening the modal, when you type in a name and tab off the field, the datatable underneath changes along with your input. How can I stop this from happening?

Example: http://live.datatables.net/tologizu/1/edit?html,output

kthorngren

Its not clear to me what you are trying to do. But what I do see is this event is executed with each input on the modal:

            $('input').on('change', function () {
                var val = $(this).val();
                table.search(val).draw();

                $('#list-panel').show();
                $('#new-user').show();
                table.columns.adjust().responsive.recalc();
                $('#search').hide();
            });

Each character I type is showing in the search field because it is executing table.search(val).draw(); thus changing the table. Maybe you need to make a more specific jQuery selector for your input event so its not executed with the modal inputs.

Kevin

jamiedewitz

Ok gotcha. What I'm doing is allowing a user to type into a search bar which will dwindle down results into a datatable, then hide the search bar while showing the datatable after the input.

If a user wants to open the modal on the same page as the datatable, the form fields in the modal would interfere with the datatable and change the results.

I updated the snippet of code you mentioned to use the id of the search box, instead of the generic input and it works perfectly.

Thanks a ton for continuing to help me with this! I swear with every change of scope, I find new things that break or weren't written with the future in mind.