導軌UJS的link_to：遠程不AJAX GET和正常<a href> GET

EDIT:導軌UJS的link_to：遠程不AJAX GET和正常<a href> GET

In addition to the helpful comments below, two excellent articles by Steve Schwartz explain everything clearly:

滑軌3.2.2/jQuery的導軌2.0.1 （使用的jquery 1.7.1）

我有連結其發送一個AJAX請求以將其他文件上傳字段添加到表單。 與頁面相關的所有工作都能正常工作 - 新的表單字段HTML片段從服務器中檢索並附加到表單內的div上。

但是，

服務器收到兩個GET請求。一個是AJAX請求;另一個似乎是「正常的」錨元素GET。我預計「正常」的GET將被Rails UJS阻止。

我應該自己禁用正常的鏈接操作嗎？有人可以解釋我誤解了什麼，而我應該做什麼，而不是[阻止第二次請求]？

我看到這個問題：Rails 3 UJS - controller gets called twice by link_to :remote。因此，我試着改變資產管道編制config.assets.debug = false，但它沒有效果。此外，這不是一個雙AJAX GET請求，所以我認爲這是一個不同的問題。

感謝您的幫助！

服務器日誌片斷：

Started GET "/files/new?asset_number=2" for 127.0.0.1 at 2012-03-23 15:23:27 +0100 

Started GET "/files/new" for 127.0.0.1 at 2012-03-23 15:23:27 +0100

瀏覽器HTML：

<a href="/files/new" data-remote="true" id="add_another_file" position="after" update="files">Add another file</a>

查看：

<%= link_to 'Add another file', new_file_path, :remote => true, 
               :update => 'files', 
               :position => 'after', 
               :id  => 'add_another_file' %>

控制器的CoffeeScript的：

$(-> 
    $('a#add_another_file').click(-> 
    url = '/files/new?asset_number=' + $('#files input').length 
    $.get(url, ((data) -> $('#files').append(data)), 'html')))

來源

2012-03-23 Richard Michael

如果要添加一個click事件a#add_another_file，那麼你就需要使用:remote => true，因爲你手動使Ajax請求。

此外，click事件應該防止發生默認操作。這可以通過將event.preventDefault();添加到點擊事件的回調開始來完成。請注意，回調需要接受event參數。

來源

2012-03-23 15:11:06 nickh

我跟着在Rails 3 In Action中提供了代碼。我認爲使用'：remote'是正確的。如果不應該有一個手動'$ .get（）'，那麼我對它的工作原理感到困惑，我會調查一下。並感謝事件提示！ – 2012-03-23 15:47:24

這個答案完全保存了我， - >使用骨幹事件+ jQuery綁定，瀏覽器處理它確定，ie8雖然沒有，因爲你的解釋。偉大的見解！ – 2014-05-26 10:25:10

它其實很簡單，你的遠程link_to發送一個請求（沒有參數），你已經在該鏈接上添加了一個點擊事件來發送另一個請求（使用params）。

你應該簡化link_to爲：

<%= link_to 'Add another file', new_file_path, :id => 'add_another_file' %>

然後在你的click事件中，你應該返回false，以便它不遵循URL。

它看起來像你在你的咖啡腳本中使用了很多不必要的括號。

$ -> 
    $('a#add_another_file').click -> 
    url = '/files/new?asset_number=' + $('#files input').length 
    $.get url, ((data) -> $('#files').append(data)), 'html'

來源

2012-03-23 15:11:08 James

'event.preventDefault（）;'應該用來代替'return false;'。看到這篇文章的更多信息：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ – nickh 2012-03-23 15:34:54

如下，我想用'：remote'做到這一點。也感謝咖啡標記的反饋，我會清理風格。 – 2012-03-23 15:53:54

如果你想使用:remote => true選項，您應該刪除您添加的自定義點擊事件。這是因爲:remote => true選項告訴* jquery_ujs *庫劫持a#add_another_file上的點擊。因此，您不需要製作自己的HTTP請求。

接下來，以決定什麼是與響應完成，綁定到將在a#add_another_file發生的各種事件，如成功和錯誤。

這是full list of Ajax events that you can bind to。

來源

2012-03-24 02:46:10 nickh

導軌UJS的link_to：遠程不AJAX GET和正常<a href> GET

回答

相關問題