Prevent modal from updating datatable

Prevent modal from updating datatable

jamiedewitzjamiedewitz Posts: 29Questions: 5Answers: 0

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?


This question has an accepted answers - jump to answer


  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816
    Answer ✓

    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();; $('#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; 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.


  • jamiedewitzjamiedewitz Posts: 29Questions: 5Answers: 0

    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.

Sign In or Register to comment.