jQuery的Rails中異步表單提交

我想上傳使用異步提交表單的圖像，這是我的Rails HTML：jQuery的Rails中異步表單提交

<%= form_for(:image, :url => {:controller=> 'questions',:action => 'upload_Qimage'}, :html => {:id=>'qimage_upload'}) do |f| %> 
<%= f.file_field :image, :onchange => " return uploadImage() ; " %> 
<%= f.hidden_field :id , :value => Digest::MD5.hexdigest((current_user.id + Time.now.to_i).to_s)[0,7] %> 
<% end %>

這是我的js函數uploadImage（）：

function uploadImage() 
    { 
     $('#qimage_upload').submit() ; 
    $('#qimage_upload').submit(function() { 
        return false ; 
     }

忽略提交函數中的ajax代碼，即使在註釋掉後我也無法獲得第二個提醒。我一整天都在研究這個問題，並且無法弄清楚它有什麼問題。

UPDATE：請注意上面代碼中的更新，使用簡單的submit（）而沒有回調工作，但它不能滿足我的目的，因爲它試圖呈現操作的視圖。這是一個jQuery版本問題？

二更新

這是我的控制器操作是這樣的：

def upload_Qimage 

     @image = Image.new(params[:image]) 
     @image.save 

    end

無論什麼我嘗試用jQuery和HTML，它仍然會嘗試渲染視圖。該文件被保存與當前版本的JS，但它仍然試圖渲染視圖時，我想它什麼也不做，而只是返回一些數據（而不是局部的渲染，只是數據）

來源

2013-05-07 Superq

你嘗試過：在標籤的form_for遠程=>真的嗎？ – Deepika 2013-05-07 11:33:42

是的，什麼都不做。我的問題是在提交功能提醒。它應該觸發，而不管在那裏還有什麼。 – Superq 2013-05-07 11:38:10

提交事件將在您提交表單時被調用。但在你的表格中沒有提交。 – Deepika 2013-05-07 11:46:38

瞭解.submit()和.submit(handler)之間的區別：第一種方法提交表單，而第二種方法只是將事件處理程序綁定到事件。因此，不會出現警報，因爲您綁定了事件處理程序，但實際上並未提交表單。嘗試運行$('#qimage_upload').submit()結合後的處理程序：

$('#qimage_upload').submit(function() { 
    alert(1); 
    $.ajax({ 
     // blah-blah-blah 
    }); 
    return false; 
}); 
$('#qimage_upload').submit();

來源

2013-05-07 11:58:10

謝謝，這讓事情變得清晰。但我是從這個問題的答案：http://stackoverflow.com/questions/6723334/submit-form-in-rails-3-in-a-ajax-way-with-jquery 使用.submit（）rails會嘗試呈現操作的視圖。我想靜靜地上傳圖像異步。我怎麼做？ – Superq 2013-05-07 12:04:59

嘿，我想我明白了。謝謝！！ – Superq 2013-05-07 12:10:08

嘿，提及後提交實際上並沒有因爲活頁夾調用提交，唯一的選擇似乎是寫一個Ajax請求上傳圖像文件，這是一個混亂的任務。在綁定器之前調用提交使綁定器無效（檢查我的第二個更新） – Superq 2013-05-07 13:25:14

要觸發警報不管AJAX發生了什麼？

http://api.jquery.com/jQuery.ajax/#jqXHR

jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });

這將在任何情況下觸發，AJAX調用的失敗無論成功。

你還缺少捕獲事件，並進一步執行停止。看看events（這對vanilla JavaSCript也是有效的）。

$('#qimage_upload').submit() ; //This triggers and submitts the form 
$('#qimage_upload').submit(function() { //therefore, you will never reach this when the new page has been loaded 
    ... }

因此，從發生

$('#qimage_upload').submit(function(event){ 
event.preventDefault(); 

.... 

return false; 
});

我知道return false就足以阻止事件，但這是處理它的正確方法。

來源

2013-05-07 11:44:53 DrColossos

請注意上面的更新，警報正在用於調試。看來問題在於使用submit來描述回調函數。請告知。 – Superq 2013-05-07 11:46:18

@Superq檢查我的編輯，也許這會更有幫助。 – DrColossos 2013-05-07 11:54:37

我沒有說清楚，我使用第一次提交作爲調試的一部分。原始代碼不會有兩個提交。只是第二個回調。我想用回調提交工作。但目前只有沒有回調的提交正在工作。我不是一起使用它們，而是在使用另一個時註釋掉它們。 – Superq 2013-05-07 12:00:10

jQuery的Rails中異步表單提交

回答

相關問題