使用jQuery和Ajax提交Rails表单
编辑:想出来了,所以问了一个相关的问题 这是我的Javascript使用jQuery和Ajax提交Rails表单,jquery,ruby-on-rails,ajax,forms,Jquery,Ruby On Rails,Ajax,Forms,编辑:想出来了,所以问了一个相关的问题 这是我的Javascript jQuery.ajaxSetup({ 'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") } }) jQuery.fn.submitWithAjax = function() { this.submit(function() { $.post(this.actio
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();
这是表格下面的表格
<div id="unapproved">
<table width="650" align="center" cellpadding="6" cellspacing="0">
<tr>
<td width="150"><a class="Contact<%=h @business.id %>" href="#"><%=h @business.name %></a></td>
<td width="150"><%=h @business.address %></td>
<td width="100"><%=h @business.business_category.name %></td>
<td width="200"><%=h @business.description %></td>
<td width="50"><%= link_to(image_tag('/images/accept.png', :alt => 'Approve'), :id =>@business.id, :action => 'approve') %>
<a class="Edit<%=h @business.id %>" href="#"><img src="/images/pencil.png" alt="Edit" /></a>
<%= link_to(image_tag('/images/bin.png', :alt => 'Remove'), @business, :confirm => 'Are you sure?', :method => :delete) %></td>
</tr>
</table>
</div>
“批准”),:id=>@business.id,:action=>“批准”)%%>
'删除',@business,:confirm=>'确定吗?',:method=>:delete)%>
现在我唯一的问题是表单下面的表没有得到动态刷新。它可以很好地将数据添加到数据库中,并且所有的验证工作都很好。但是我必须刷新页面。我试着添加一些类似于
$("#unapproved").append("<%= escape_javascript(render(:file => 'business')) %>");
$(“#未批准”)。追加(“‘业务’)%%>”;
但这恰恰打破了它。我的猜测(因为您的“提交”按钮不在上面的HTML中)是您的“业务提交”按钮只是一个输入,而不是一个提交按钮
此代码:
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this; };
不告诉表单提交。它说当“提交”发生时,去做点什么
从,
提交(fn)用于“绑定函数”
提交每个匹配的事件
元素。提交事件在
已提交一份表格。”
你从来没有真正提交过表单。我敢打赌(我不确定,因为我没有所有的代码),你将submitWithAjax方法更改为:
jQuery.fn.submitWithAjax = function() {
$.post(this.action, $(this).serialize(), null, "script");
return false; };
它应该可以工作。它至少更接近您正在尝试的操作。是一个。是否只需将该文本字符串添加到您的#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;
});
工作!我只是试着模仿railscast 136。我将我的表放入一个名为_unapproved.html.erb的文件中。在我的索引中,我将表替换为:
<div id="unapproved">
<%= render :partial => "unapproved" %>
</div>
“未批准”%>
然后在我的create.js.erb中,我有:
$("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>");
$(“#未批准”)。追加(““未批准”)%%>”;
比赛结束了。GG -游戏结束了。游戏打得好喜欢刺激!