我正在为用户制作可视化背后的所有数据的原型。基本上,他们将单击一个点,将弹出一个模式,而模式中的表将由字符串提交动态过滤。到目前为止,几乎所有功能都可以正常运行,但是我无法让过滤器提交有关价值变化的信息。

我正在使用的表库是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>


我无法直接访问输入,因为它是由DataTables库创建的,没有唯一的ID,但这可以解决问题。单击按钮后,将打开模态,并将相关输入更改为包含的字符串。但是由于某种原因,它没有提交。因此,基本上,当我想以固定搜索打开表时,无论是执行还是在执行过程中,都可以使用固定搜索打开。

我试过了:

 <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>

最佳答案

您需要在form元素而不是input元素上调用.submit()函数。

关于javascript - 更改<input>值并通过jquery自动提交,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50917967/

10-12 14:03
查看更多