我有一个由jQuery填充并带有AJAX请求的远程表单。然后,我将此表单绑定到AJAX回调,但回调没有被触发。
var msgSuccess=function(evt, data, status, xhr){
alert('ok!!!');
console.log(evt);
console.log(data);
console.log(status);
console.log(xhr);
}
var bindMsg = function() { // BIND IT TO THE CALLBACKS
$("#composeMsgPopup")
.live('ajax:beforeSend', loadingCallback)
.live('ajax:success', msgSuccess)
.live('ajax:error', failureCallback)
.live('ajax:complete',completeCallback);
}
$.ajax({ // GETTING THE FORM CODE
url: link,
type: "get",
success: function(response, textStatus, jqXHR) {
ans=response;
$("#popup_content").html(ans);
$("#popup").bPopup();
bindMsg();
},
error: function(jqXHR, textStatus, errorThrown) {
failureCallback(errorThrown, textStatus, jqXHR);
},
complete: function(jqXHR, textStatus) {
completeCallback("", jqXHR, textStatus);
},
beforeSend: loadingCallback
});
表单的代码:
<%= form_for(:conversation, :remote => true,
:url=> {:controller=>:conversations,:action=>:create},
:html=>{:id => 'composeMsgPopup' }) do |f| %>
<div id="founder-name" class="field"><b>Recipient: <%= @user.name %></b></div>
<div class="field">
<%= f.label :subject,"Subject" %>
<%= f.text_field :subject,:class=>"composeMsgField" %>
</div>
<div class="field">
<%= f.label :content,"Message Content" %>
<%= f.text_area :content,:class=>"composeMsgField" %>
</div>
<%= f.hidden_field :to_user, :value => @user.id %>
<%= f.submit "Send", :class=>"submitbt",:id=>'sendMessage' %>
<% end % >
我试图用bind()或on()绑定但是它不起作用。代码被执行但是当我提交表单时,不执行回调。
答案 0 :(得分:1)
好的,我找到了解决方案。 远程表单不会因未知原因触发回调,所以我所做的就是更改 提交按钮行为:
<%= f.button :submit, "Update",:class=>"submitbt",:id=>"submitnewpass",:onclick=>"return false;" %>
并绑定按钮以手动提交表单
var action=$('#composeMsgPopup')[0].action; // action url
$("#sendMessage").click(function() { // bind submit button
$.ajax({
type: "POST",
url: action,
data: $("#submitnewpass").serialize(), // serializes the form's elements.
success: function(data)
{
// do my stuff
},
error: failureCallback,
beforeSend: loadingCallback,
complete: completeCallback
});
return false;
});