提交用戶腳本后清除 Rails 遠程表單

Question

我正在使用 Tampermonkey 修改 POS（銷售點）表單以加載用戶腳本。 到目前為止，我已經為元素添加了 accesskey 和 remote-data 並且工作正常。 我正在嘗試使條形碼掃描儀在沒有交互的情況下在頁面上工作。 訪問鍵關注表單，遠程數據通過 ajax 帖子提交。 到目前為止，這很好用，只是表單一旦提交就不會清除。 我找到了這個答案：

提交后清除 Rails 遠程表單

答案看起來應該可以工作，但是我需要使用用戶腳本來暗示它，這就是我卡住的地方。 我想使用 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 不是 function 是我得到的錯誤，顯然它不起作用。 如果我知道我需要用於在那里提交的 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 object 。 在您的代碼中：

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

...您沒有將form包裝為 JQuery object。 這意味着該form只是 HTML 的 blob，因此.bind不是 function。 你可以試試：

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

這可能會起作用，具體取決於您的 JQuery 版本。 如文檔中所述：

從 jQuery 3.0 開始，.bind() 已被棄用。 自 jQuery 1.7 起，它被用於將事件處理程序附加到文檔的 .on() 方法取代，因此不鼓勵使用它。

所以，你可能會這樣做：

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