jQuery在Rails应用中没有反应

Question

我有一个正在创建要发送给收件人的消息的表单，我正在尝试向其中添加一些jQuery以使其更易于使用。 我想做的第一件事是提交表单并显示消息，而无需在用户按下Enter键时重新加载页面，而仅当该特定文本区域被聚焦时才重新加载页面。 我现在有一个脚本可以执行此操作，但是仅当单击页面上的“发送”按钮时才可以。

我在下面添加了代码（我是jQuery和javascript的新手，所以可能不正确），但是它在页面上没有任何反应。 然后，我尝试了一些更简单的操作，例如仅更改css（例如textarea的轮廓），但是什么都没有发生。

所以我看到的问题是我的jQuery代码什么也没有发生

这是资产/ javascript /中我的“ show.js”文件中的代码

$(document).ready(function() {
  $('#input_to_be_loaded').focus(function(){
    $('#input_to_be_loaded').css('outline-color','#ff0000');
  });

  $('#input_to_be_loaded').focus(function(){
    $(document).keydown(function(key) {
      switch(parseInt(key.which,10)) {

          // Enter key pressed
          case 13:
          /* get some values from elements on the page: */

          var $form = $("#message-form"),
          $submit = $form.find( 'button[type="submit"]' ),
          message_value = $form.find( 'input[name="micropost[content]"]' ).val(),
          recipient_value = $form.find( 'input[name="recipient[recipient_id]"]' ).val(),
          url = $form.attr('action');

          /* Send the data using post */
          var posting = $.post( url, { 
            recipient_id: recipient_value, 
            message: message_value 
          });
          $('#input_to_be_loaded').html("");
          break;
        }
      });
  });
});

我认为这是表格：

<%= form_for(@micropost, remote: true, :method => :POST, id: "micropost_form_id") do |f| %>
<%= f.hidden_field :recipient_id, :value => @user.id %>
<%= f.hidden_field :is_note, value: false %>

<%= render 'shared/error_messages', object: f.object %>
<div class="field">
    <%= f.text_area :content, placeholder: "Press enter to send message", value: "",class: "form-control-messages",  id: "input_to_be_loaded" %>
</div>
<%= f.submit "Send", class: "btn btn-info", style: "float: right;" %>
<% end %>

这是在我的application.html.erb文件的开头：

<%= javascript_include_tag "show" %>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= javascript_include_tag :defaults %>

我的gemfile：

source 'https://rubygems.org'
ruby '2.0.0' 
#ruby-gemset=railstutorial_rails_4_0
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.2'
gem 'bootstrap-sass', '2.3.2.0'
gem 'bcrypt-ruby', '3.1.2'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'
gem 'websocket-rails'
gem 'jquery-turbolinks'

group :development, :test do 
    gem 'sqlite3', '1.3.8'
    gem 'rspec-rails', '2.13.1'
    gem 'pry'
    gem 'pry-rails'
end

group :test do
    gem 'selenium-webdriver', '2.35.1' 
    gem 'capybara', '2.1.0'
    gem 'factory_girl_rails', '4.2.1'
end

gem 'sass-rails', '4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.1'
gem 'jquery-rails', '3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
    gem 'sdoc', '0.3.20', require: false
end

group :production do
    gem 'pg', '0.15.1'
    gem 'rails_12factor', '0.0.2'
end

edit1：这是我的控制器代码：

class MicropostsController < ApplicationController
  protect_from_forgery except: :show
  before_action :signed_in_user, only: [:create, :destroy]
  before_action :correct_user,   only: :destroy
  skip_before_action :verify_authenticity_token

  def create
    @micropost = current_user.microposts.build(micropost_params)
    @user= User.find_by_id(@micropost.recipient_id) 
    if @micropost.is_note
      @old_notes= current_user.notes(@user).first
      if @old_notes
        @old_notes.destroy
      end
      @old_notes= current_user.notes(@user).first
    end
    if signed_in?
      @conversation_items = current_user.conversation(@user).paginate(page: params[:page], :per_page => 7)
    end
    @micropost.new = true
    if @micropost.save
      #flash[:success] = "You just sent a message to #{User.find_by_id(@micropost.recipient_id).name}"
      respond_to do |format|
        format.html { redirect_to @user }
        format.js
      end

    else
      @feed_items = []
      redirect_to @user
    end
  end

  def destroy
    @user=User.find_by_id(@micropost.recipient_id)
    @micropost.destroy
    redirect_to @user
  end

  private

  def micropost_params
    params.require(:micropost).permit(:content, :recipient_id, :new, :is_note)
  end

  def correct_user
    @micropost = current_user.microposts.find_by(id: params[:id])
    redirect_to root_url if @micropost.nil?
  end
end

浏览器控制台显示： http : //s29.postimg.org/teg87878n/Screen_Shot_2014_03_20_at_14_18_51.png

预先谢谢你们:)

Answer 1

我认为您过于复杂了。 这应该工作：

$("#input_to_be_loaded").keydown(function (event) {
    if (event.which == 13) {
        event.preventDefault();
        var $form = $("#message-form"),
            $submit = $form.find('button[type="submit"]'),
            message_value = $form.find('input[name="micropost[content]"]').val(),
            recipient_value = $form.find('input[name="recipient[recipient_id]"]').val(),
            url = $form.attr('action');

        /* Send the data using post */
        var posting = $.post(url, {
            recipient_id: recipient_value,
            message: message_value
        });
        $('#input_to_be_loaded').html("");
    }
});

http://jsfiddle.net/Gms5d/1/