[英]Submitting a Rails form with jQuery and Ajax
編輯:弄清楚了,所以問一個相關的問題。
這是我的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();
這是表格下方的表格。
<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>
現在,我唯一的問題是表格下方的表格無法動態刷新。 它將數據很好地添加到數據庫中,並且所有驗證工作都很好。 但是我必須刷新頁面。 我嘗試添加類似
$("#unapproved").append("<%= escape_javascript(render(:file => 'business')) %>");
但這打破了它。
我的猜測(因為您的“提交”按鈕不在上面的HTML中,是您的“ business_submit”按鈕只是輸入而不是提交按鈕。
這段代碼:
jQuery.fn.submitWithAjax = function() {
this.submit(function() {
$.post(this.action, $(this).serialize(), null, "script");
return false;
})
return this; };
不告訴表單提交。 它說,當“提交”發生時,去做一些事情。
從jQuery文檔中 ,submit(fn)用於“將函數綁定到每個匹配元素的commit事件。當提交表單時,將觸發commit事件。”
您實際上從未提交過表單。 我願意打賭(不確定,因為我沒有所有代碼)是您將submitWithAjax方法更改為:
jQuery.fn.submitWithAjax = function() {
$.post(this.action, $(this).serialize(), null, "script");
return false; };
它應該工作。 至少與您要執行的操作更接近。
工作! 我只是試圖模仿railscast136。我將表格扔到了一個名為_unapproved.html.erb的文件中。 在索引中,我將表替換為:
<div id="unapproved">
<%= render :partial => "unapproved" %>
</div>
然后在我的create.js.erb中,我有:
$("#unapproved").append("<%= escape_javascript(render(:partial => "unapproved")) %>");
游戲結束。 GG!
.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;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.