使用jQuery和Ajax提交Rails表单

编辑：想出来，所以问一个相关的问题。

这是我的Javascript

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; }; $('.error').hide(); $("#business_submit").click(function() { // validate and process form here $('.error').hide(); var name = $("input#business_name").val(); if (name == "" || name == "Required Field") { $('#namelabel').show() $("#business_name").focus(); return false; } var address = $("#business_address").val(); if (address == "" || address == "Required Field") { $('#addresslabel').show(); $("#business_address").focus(); return false; } var city = $("#business_city").val(); if (city == "" || city == "Required Field") { $('#citylabel').show(); $('#business_city').focus(); return false; } var state = $("#business_state").val(); if (state == "" || state == "Required Field") { $('#statelabel').show(); $("#business_state").focus(); return false; } var zip = $("#business_zip").val(); if (zip == "" || zip == "Required Field") { $('#ziplabel').show(); $("#business_zip").focus(); return false; } var phone = $("#business_phone").val(); if (phone == "" || phone == "Required Field") { $('#phonelabel').show(); $("#business_phone").focus(); return false; } var category = $("#business_business_category_id").val(); if (category == " - Choose one - ") { $('#categorylabel').show(); $("#business_business_category_id").focus(); return false; } $.ajax ({ type: "POST", data: form.serialize() }); return false; }) 

.ajax代码触发包含的create.js.erb文件

 $("#new_business").submitWithAjax(); $("#new_business")[0].reset(); $("#new_business").hide(); 

这是表格下面的表格。

 
 
 
 
<a class="Contact" href="#">
 
 
 
 
 'Approve'), :id =>@business.id, :action => 'approve') %> <a class="Edit" href="#">  'Remove'), @business, :confirm => 'Are you sure?', :method => :delete) %>
 
 
  

现在我唯一的问题是我的表单下面的表格没有动态刷新。 它将数据添加到数据库中，并且所有validation都很有效。 但我必须刷新页面。 我尝试添加类似的东西

 $("#unapproved").append(" 'business')) %>"); 

但那就是打破它。

Answer 1

我的猜测（因为你的“提交”按钮不在上面的HTML中，你的“business_submit”按钮只是一个输入而不是一个提交按钮。

这段代码：

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

不告诉表格提交。 它说当“提交”发生时，去做一些事情。

从jQuery文档中 ，submit（fn）用于“将函数绑定到每个匹配元素的submit事件。提交表单时会触发提交事件。”

你实际上从未提交过表格。 我愿意打赌（不能确定，因为我没有所有的代码），你将submitWithAjax方法更改为：

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

它应该工作。 它至少更接近你想要做的事情。

Answer 2

工作！ 我只是试图模仿railscast 136.我把我的表扔进了一个名为_unapproved.html.erb的文件中。 在我的索引中，我将表替换为：

 
 <%= render :partial => "unapproved" %>  

然后在我的create.js.erb中，我有：

 $("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>"); 

游戏结束。 GG！

Answer 3

.append是否只是将这个文字字符串添加到#unapproved div中？

.append想要追加渲染的html而不是你想要使用的ERB代码。 我为这类事情做的是在我的控制器中使用render函数，以便AJAX调用获取呈现的HTML。

例如在控制器中;

 respond_to do |format| format.js { render :partial => "menu", :layout => false and return } end 

在视图中;

 $("a.show_menu").click(function() { var url = $(this).attr('href'); $.ajax({ beforeSend : function(request) { request.setRequestHeader("Accept", "text/javascript"); }, /* Included so Rails responds via "format.js" */ success : function(response) { $("#menu").empty().append(response); }, type : 'GET', url : url }); return false; });