Question

I have a remote form that is populated by jQuery with an AJAX request. Then, I am binding this form to an AJAX callback but the callback is not being triggered.

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
});

The code for the form:

<%= 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 % >

I have tried to bind with bind() or on() but it does not work. The code is executed but when I submit the form the callback is not executed.

Answer 1

ok i found a solution.
the remote form not triggering the callback for unknown reason, so what i did is change the
submit button behaviour:

     <%= f.button :submit, "Update",:class=>"submitbt",:id=>"submitnewpass",:onclick=>"return false;" %>

and bind the button to manually submit the form

 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;
});