У меня есть форма, которая создает сообщения для отправки получателям, к которым я пытаюсь добавить некоторый jQuery, чтобы сделать его более привлекательным. Первое, что я хотел бы сделать, это отправить форму и отобразить сообщение без перезагрузки страницы, когда пользователь нажимает клавишу "Enter", но только тогда, когда эта конкретная текстовая область сфокусирована. У меня теперь есть скрипт, который делает это, но только при нажатии на кнопку "отправить" на странице.
Я добавил код ниже (я новичок в jQuery и javascript, так что это может быть неправильно), но он не реагирует на странице. Затем я попытался с более простыми действиями, такими как изменение CSS, как контур текстового поля, но ничто не происходит ни с чем.
Поэтому проблема, которую я вижу, заключается в том, что ничего не происходит с моим кодом jQuery
Вот код в файле "show.js" в файле /javascript/
$(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
Спасибо заранее, парни :)
Я думаю, вы слишком усложняете это. Это должно работать:
$("#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("");
}
});