RoR how to submit form with :remote=>true and then execute javascript code

Question

I want to be able to submit a form remotely (so the page does not refresh) and then have some javascript code get executed. Here's what I got so far

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

If I change the name of my javascript function "#new_message" to anything else, the form submits properly into my database, but I lose the chatroom functionality. (The code that transmits the message to all clients in that chat room, via FAYE, and clears the text_box will not get called.)

If I keep the name of my javascript function "#new_message", the message will get transmitted to all clients in the chatroom, and the textbox will get cleared, but nothing will get stored into my database.

What can I do so that I can accomplish both the data storage and the chatroom functionality?

EDIT:Attempted this to no avail

$('#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;
});

});

score 2 · Answer 1 · answered Feb 19 '14 at 23:14

2

I think you just need to hook into one of the ajax callbacks for the form submit:

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

answered Feb 19 '14 at 23:14

steakchaser

5,198
1
26
34

would I need to add anything to my controller to accomplish this? – user2943464 Feb 20 '14 at 01:46
Not really; this is purely a JavaScript callback. In the future, you might want to handle errors though - in which, case you could have your controller return some sort of JSON error and then you hook into the `ajax:error` callback. – steakchaser Feb 20 '14 at 01:54
I tried using what you suggested and nothing happens. Check the post edit – user2943464 Feb 20 '14 at 01:55
Is it being called? Put a `console.log("ajax success callback fired!");` in there to make sure it's being called. And...look for console errors. – steakchaser Feb 20 '14 at 01:58
added it and checked the terminal. here's what I got. User Load (0.5ms) SELECT "users".* FROM "users" WHERE "users"."id" = 2 ORDER BY "users"."id" ASC LIMIT 1 (0.1ms) begin transaction SQL (0.6ms) INSERT INTO "messages" ("message", "receiver_id", "sender_id", "sent_at") VALUES (?, ?, ?, ?) [["message", "sd"], ["receiver_id", 1], ["sender_id", 2], ["sent_at", Thu, 20 Feb 2014 02:05:16 UTC +00:00]] (49.4ms) commit transaction Rendered messages/create.js.erb (0.1ms) Completed 200 OK in 69ms (Views: 7.6ms | ActiveRecord: 50.6ms) – user2943464 Feb 20 '14 at 02:04
You'll need to check your browsers console. That's all client-side. – steakchaser Feb 20 '14 at 02:21

RoR how to submit form with :remote=>true and then execute javascript code

1 Answers1