我正在设计一种方法原型(prototype),供用户查看可视化背后的所有数据。基本上他们会点击一个点,弹出一个模态,模态内的表格将通过字符串提交动态过滤。到目前为止,我几乎所有的东西都运行良好,但我无法让过滤器在值更改时提交。
我正在使用的表库是 DataTables , 所以我一直在尝试用一个小的 jquery 脚本和一些 html 按钮来测试它。
目前,我的脚本是在单击特定按钮时触发的,然后它会打开模式,找到表的唯一 ID,然后找到作为输入元素的最接近的子元素,然后写入一个字符串作为该输入的值。
示例脚本:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
})
</script>
相关的 HTML:
<div class="modal fade" id="x-data-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="moday-body">
<div class='row'>
Search:<input type="search" class="form-control form-control-sm" placeholder=""
aria-controls="x-data-table">
</div>
<table id='x-data-table'>table stuff</table>
</div>
</div>
</div>
</div>
我无法直接访问输入,因为它是由没有唯一 ID 的 DataTables 库创建的,但这可以解决问题。单击按钮后,模式将打开,相关输入将更改为包含的字符串。但由于某种原因,它没有提交。所以基本上,当我想用已执行或正在执行的固定搜索打开表格时,表格会以固定搜索打开。
我试过:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
search_input.submit();
})
</script>
同样(使用内置的 DataTables 搜索模块):
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('Apr 27, 2018');
var table = $('#x-data-table').DataTable();
search_input.on('change', function () {
table.search(this.value).draw();
console.log(('This was the search') + this.value);
});
console.log('Ran Whole Function');
});
</script>
最佳答案
您需要在表单元素而不是输入元素上调用 .submit() 函数。
关于javascript - 更改 <input> 值并通过 jquery 自动提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50917967/