使用jQuery在Rails应用程序中调用Ajax

我已经有一个正常的HTTP post的表单。现在，我想重写这个表单使用jQuery Ajax请求。以下是我有：使用jQuery在Rails应用程序中调用Ajax

register_user.html.erb

<%= form_tag :action=> "register_user" %> 
           <label for="user_id_1">user_id_1:</label><br/> 
           <%= text_field "user", "user_id_1", :size => 20 %> 
           <label for="user_id_2">user_id_2:</label><br/> 
           <%= text_field "user", "user_id_2", :size => 20 %> 
<%= submit_tag "Submit" %>

users_controller.rb

def register_user 

    #do something 

end

所以，我试图按照this教程，但无法遵循我的应用程序中的相同说明。那么有什么建议？我怎样才能使用上述形式的jQuery Ajax调用？

据我所知，在的application.js（包含在register_user.html.rb的头文件）文件将

jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
}) 

jQuery.fn.submitWithAjax = function() { 
    this.submit(function() { 
    $.post(this.action, $(this).serialize(), null, "script"); 
    return false; 
    }) 
    return this; 
}; 

$(document).ready(function() { 
    $("#new_review").submitWithAjax(); #WHAT SHOULD REPLACE #new_review? 
})

但是，我怎么能关联的提交操作的形式？我是JS，jQuery和Rails的新手。

UPDATE 1条

的Rails 2.3.8

UPDATE 2

<%= form_tag :action=> "register_user" , :html => {:id => "register_user" }%>

该请求不会在jQuery.fn.submitWithAjax = function() { }方法去。
如何在同一页面上显示@final_value数据？

现在，这是我的代码，以显示值（register_user.html.erb）：

<%= 
    if @final_value != nil 
     "<h2>The Output is " + @final_value.to_s</h2>" + 
    end 
    %>

感谢真棒帮助家伙！

来源

2010-09-10 zengr

你在轨道3吗？ Rails3支持不显眼的JavaScript（UJS）。看看文件public/javascripts/rails.js

它是如何工作的？

要创建一个远程的形式，这样做：

<%= form_tag :action=> "register_user", :remote => true %>

这增加了数据的远程属性窗体。

现在轨道内置UJS挂钩并为您提供onsubmit的东西。它触发事件等：

AJAX：之前，阿贾克斯：完整，AJAX：成功，阿贾克斯：失败，AJAX：后

的Rails默认使用的原型，而不是jQuery的，所以你可以（不必）用jQuery替换原型。阅读http://www.railsinside.com/tips/451-howto-unobtrusive-javascript-with-rails-3.html

现在重要的部分是，你可以在你的表单上捕获这些事件！给你的形式的ID来标识它：

<%= form_tag :action=> "register_user", :remote => true, :html => { :id => 'myform' } %>

现在挂钩的事件（用jQuery）是这样的：

jQuery(document).ready(function() { 
    jQuery('#myform').bind('ajax:complete', '', function(request) { 
     alert("I got: " + request.responseText); 
    }); 
});

你也可以连接其他的事件，如AJAX：故障等

编辑

对于Rails的2.3.8（确保你已经包括了轨道默认js文件）

注意，如果你想的jQuery只使用拖放预设包括原型库，你可以使用jRails（取代原型使用jQuery）：http://github.com/aaronchi/jrails

我不知道你是@final_value什么，所以我做一个普通的例子：

在你看来：

<h2 id="myoutput"> 
    <% if @final_value != nil %> 
    <%= @final_value.to_s %> 
    <% end %> 
</h2> 


<% form_remote_tag :url => { :action=> "register_user" } do %> 

    <label for="user_id_1">user_id_1:</label><br/> 
    <%= text_field "user", "user_id_1", :size => 20 %> 
    <label for="user_id_2">user_id_2:</label><br/> 
    <%= text_field "user", "user_id_2", :size => 20 %> 

    <%= submit_tag "Submit" %> 

<% end %>

在你的控制器：

def register_user 

    form_data = params['user'] 

    if form_data.is_a?(Hash) 
    @final_value = form_data['user_id_1'] 
    end 

    respond_to do |format| 
    format.html 
    format.js do 

     render :update do |page| 
     page.replace_html 'myoutput', @final_value 
     page.visual_effect :highlight, 'myoutput' 
     end 

    end 
end

来源

2010-09-10 22:09:27 sled

我有Rails 2.3..8 – zengr 2010-09-10 23:11:04

我已经为Rails 2.3.8添加了一个示例 – sled 2010-09-11 09:56:53

给您形式的ID，像这样：

<%= form_tag :action=> "register_user", :html => {:id => "form_name" } %>

，然后在你的application.js，你与表单ID替换#new_review：

$(document).ready(function() { 
    $("#form_name").submitWithAjax(); 
})

[更新：视图]

您应该添加一个名为register_user.js.erb的文件，该文件应包含呈现您想要显示的内容所需的JavaScript。所以这个JavaScript将被执行并将改变页面。而在JavaScript中，您使用现在的视图。

所以你应该是这样的：

!= "$('#placeholder').replaceWith('#{escape_javascript(render :partial => 'render_user')}')"

为了使这项工作，你应该有一些HTML元素，就像id=placeholder一个DIV（您选择一个合适的名字，当然）。

来源

2010-09-10 22:08:55 nathanvda

它没有工作:( – zengr 2010-09-10 22:55:39

我需要将register_user.html.erb重命名为register_user.js.erb吗？ – zengr 2010-09-11 01:04:17

是的。我更新了我的答案。 – nathanvda 2010-09-11 06:11:42

使用jQuery在Rails应用程序中调用Ajax

回答

相关问题