javascript - 提交用户脚本后清除 Rails 远程表单

Question

我正在使用 tampermonkey 修改 POS(销售点)表单来加载用户脚本。到目前为止，我已将 accesskey 和远程数据添加到元素中并且可以工作。我正在尝试使条形码扫描仪在页面上工作而无需交互。访问键聚焦表单，远程数据通过 ajax post 提交它。到目前为止，效果很好，只是提交后表格不清晰。我找到了这个答案:

Clear Rails remote form after submitting

答案看起来应该有效，但是我需要使用用户脚本来实现它，这就是我陷入困境的地方。我想使用 beforeSend 以便尽快清除表单，以便我可以重复扫描。

$("#new_message").bind("ajax:beforeSend", function(event,xhr,status){
  $('#message_content').val('');
}

在我的例子中，表单是#scan-wrap下的#new_line_item。有两个#new_line_item，可以同时应用于两个。一种用于条形码，另一种用于手动(具有自动完成)输入。这是我的尝试:

    HTMLElement.prototype.findId = function(_id) {
        var childs = this.childNodes;

        for (var i = 0; i < childs.length; i++) {
            if(childs[i].nodeType == Node.ELEMENT_NODE) {
                if(childs[i].id == _id) {
                    return childs[i];
                }
            }
        }

        return null;
    }

    // Usage Example
    var parent = document.getElementById("scan-wrap");
    var form = parent.findId("new_line_item");
    parent.findId("new_line_item").setAttribute("data-remote", "true");
    form.findId("line_item_upc_code").setAttribute("accesskey", "b");
    form.bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

form.bind is not a function 是我得到的错误，显然它不起作用。如果我明白我需要用于在那里提交的功能？

这是表格:

<div id="scan-wrap">
      <form class="simple_form form-inline" id="new_line_item" novalidate="novalidate" action="/sales/16291478/add_item" accept-charset="UTF-8" method="post" data-remote="true"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="tJHddPfCM5zkB5YFBYtC4zWp1DZSLDHcNKylmG0hVrrS7EhaDjh2N96m0dwprdU/TMAU78xNVZHstXmgm2P1Vw==">
          <input class="string optional form-control" id="line_item_upc_code" name="line_item[upc_code]" size="25" type="text" style="width: 100px;font-size: 10px;" placeholder="Scan a barcode" autofocus="" accesskey="b">
          <input class="numeric decimal optional" id="line_item_quantity" name="line_item[quantity]" step="any" type="number" value="1" style="width: 8ex;font-size: 10px;height:34px;">
          <input class="btn btn-default form-control" name="commit" type="submit" value="Scan UPC">
</form>    </div>

Answer 1

在此代码中:

$("#new_message").bind("ajax:beforeSend", function(event,xhr,status){
  $('#message_content').val('');
}

"#new_message" 使用 $() 包装为 JQuery 对象。在您的代码中:

form.bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

...您没有将 form 包装为 JQuery 对象。这意味着 form 只是一个 HTML block ，因此 .bind 不是一个函数。您可以尝试:

$(form).bind("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});

这可能会起作用，具体取决于您的 JQuery 版本。如 docs 中所述:

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

所以，你可能会这样做:

$(form).on("ajax:beforeSend", function(event,xhr,status){document.getElementById("line_item_upc_code").val('')});