RoR如何提交表单:remote => true然后执行javascript代码

时间:2014-02-19 23:02:07

标签: javascript ruby-on-rails forms chat faye

我希望能够远程提交表单(因此页面不刷新),然后执行一些javascript代码。这是我到目前为止所得到的

 <script>
  $(function() {
    // Subscribe to receive messages!
    var client = new Faye.Client('http://localhost:9292/faye');

    // Our own private channel
    var private_subscription = client.subscribe('<%=request.path + @id1.to_s + @id2.to_s%>',   

    function(data) {

      $('<p></p>').html(data.username + ": " + data.msg).appendTo('#chat_room');

    });

    // Handle form submission to publish messages.
    $('#new_message').submit(function(){            // THIS LINE GIVING TROUBLE
        client.publish('<%=request.path + @id1.to_s + @id2.to_s%>', {
          username: '<%= @user.fname+' '+@user.lname%>',
          msg: $('#message_message').val()

        });
      // Clear the message box
      $('#message_message').val('');
      return false;
    });
  });
</script>

<div class="chat_container">
  <div id="chat_room">
    <p>Chat with <%= @other.fname+' '+@other.lname%> </p>
  </div>

  <%= simple_form_for Message.new, :id => "new_message",:controller => "messages", :action => "create", :remote => true do |f| %>
  <%= f.text_field :message, :autocomplete => "off" %>
  <%= f.hidden_field :sender_id, :value => @user.user_id %>
  <%= f.hidden_field :receiver, :value => @other.user_id %>
  <%= f.hidden_field :sent_at, :value => Time.now %>
  <%= f.submit "Send", class: "btn btn-medium btn-primary" %>  
  <% end %>

</div>

如果我将我的javascript函数“#new_message”的名称更改为,则该表单会正确提交到我的数据库中,但我会丢失聊天室功能。 (通过FAYE向该聊天室中的所有客户端发送消息并清除text_box的代码将不会被调用。)

如果我保留我的javascript函数“#new_message”的名称,该消息将被传输到聊天室中的所有客户端,文本框将被清除,但什么都不会存储到我的数据库中。

我能做些什么才能完成数据存储和聊天室功能?

编辑:尝试这无济于事

$('#new_message').bind('ajax:success', function() {
    client.publish('<%=request.path + @id1.to_s + @id2.to_s%>', {
      username: '<%= @user.fname+' '+@user.lname%>',
      msg: $('#message_message').val()

    });
  // Clear the message box
  $('#message_message').val('');
  return false;
});

});

1 个答案:

答案 0 :(得分:2)

我认为你只需要挂钩表单提交的一个ajax回调:

$("#new_message").bind("ajax:success", function(evt, data, status, xhr) {
  // Your client code and message clearing code
});