JQuery не реагирует в приложении Rails

0

У меня есть форма, которая создает сообщения для отправки получателям, к которым я пытаюсь добавить некоторый 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

Спасибо заранее, парни :)

  • 0
    А что вы видите в консоли разработчика в вашем браузере?
  • 0
    такое show.js в каталоге ресурсов? Пожалуйста, покажите код вашего контроллера.
Показать ещё 1 комментарий

1 ответ

0

Я думаю, вы слишком усложняете это. Это должно работать:

$("#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/

  • 0
    Теперь это выглядит намного лучше! TY! Я также добавил небольшой «тест» CSS для изменения цвета фона, который работает сейчас! Однако по какой-то причине форма все еще не отправлена, и это сообщение отображается в консоли, когда я нажимаю клавишу ВВОД: «Не удалось загрузить ресурс: сервер ответил со статусом 404 (не найдено)». У вас есть предположения? откуда это могло взяться?
  • 0
    Сообщение об ошибке может быть не связано с тем, что форма не отправлена, то же самое сообщение появляется, когда я нажимаю кнопку «Отправить», которая отправляет форму и отображает сообщение.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню