使用不带AJAX的Form从Bootstrap表中提取JS变量。更好的方法？

Question

我用Form元素包装了一个Bootstrap（BST）表。 BST在客户端的Javascript中自动使用json文件填充表数据，表和表单如下所示：

<form id="info" role="form" action="#" method="post" accept-charset="utf-8">
    <table data-toggle="table" 
           data-url="tables/sharedMem/jsonTickerList"  
           data-show-refresh="true" 
           data-show-toggle="true" 
           data-show-columns="true" 
           data-search="true" 
           data-select-item-name="toolbar1" 
           data-pagination="true" 
           data-sort-name="name" 
           data-sort-order="desc" 
           data-page-size="15" 
           data-single-select="true" 
           id="table">
        <thead>
            <tr>
                <th data-field="state" data-radio="true" >Report ID</th>
                <th data-field="cik" data-sortable="true">CIK</th>
                <th data-field="ticker"  data-sortable="true">Ticker</th>
                <th data-field="company" data-sortable="true">Name</th>                 
            </tr>
        </thead>
    </table>

    <button type="submit" class="btn btn-small" name = "button">
        Submit
    </button>
</form>

如您所见，BST不会在服务器端定义表行或TD（因为它的客户端JS已启用）。因此，通过单击表单中的提交按钮来捕获我可以找到返回行数据的数据的唯一方法是：

$(function () {   
    $('#events-table').next().click(function () {
        $(this).hide(); 

        var $result = $('#result');

        $('#table').bootstrapTable({})
            .on('click-row.bs.table', function (e, row, $element) {
                $result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
                var url = "confirm.php?cik=" + row.cik;
                document.getElementById("info").setAttribute('action', url);
            });
    });
});

上面两行非常棒。他们使一切顺利。我的问题是BST代码需要一个消息元素。它看起来像这样：

<div class="alert alert-success" id="result" ></div>

当此警报在代码中时，除非我先单击警报，然后单击表中的行，否则表不会向警报对象发送事件。没有代码中的警报，我无法得到任何工作。一旦我做了先发制人的点击，一切都很好，但这很奇怪。我希望有人能看出出了什么问题。我对Javascript太蹩脚了。我希望我可以加载页面，单击一行，JS更新表单元素中的action属性，这样当我单击提交按钮时，一切正常。

BST很棒！我可以在大约100毫秒内从/ dev / shm加载10000条记录，它的搜索功能只是快速尖叫，所以我希望只调试最后一点，这样就可以获得更流畅的客户体验。

Answer 1

我解决了这个问题并找到了解决方案。正确的JavaScript现在是：

    $(function () {   
    $('#events-table').click(function () {

    $('#table').bootstrapTable({})
        .on('click-row.bs.table', function (e, row, $element) {
        var url = "confirm.php?cik=" + row.cik;
        document.getElementById("info").setAttribute('action', url);
        });
    });
    });

HTML：

    <div class="alert alert-success" id="result" > </div>

完全删除了。净结果是表加载时，它可以通过页面或搜索完全导航。单击一行，（或带有微小更改的单选按钮）捕获行数据，以便当您单击表单提交按钮时，使用客户端javascript和json创建的表单数据将以正常方式传递到php的$ _POST。

我刚用110万条记录（每组3个字段）测试了该表。它在一秒钟内加载，您可以在1/2秒内导航到最后一行。虽然在1 Gb内联网上，并且数据文件在测试中是77MB，但我认为它显示BST非常酷，看起来很棒，并且在将大型json文件存储在/ dev / shm上时也相当快。前面提到的所有Form和BST html都是正确的。

关键是删除了JS中的“next（）”方法，因为它实际上忽略了我想要选择的表行的第一次单击。我猜想JS会接受“.click”而不是......在经过相当多的试错之后，结果证明是正确的。