在rails throughajax

时间：2015-12-18 09:50:16

标签： javascript ruby-on-rails validation activerecord

我需要知道如何通过javascript显示用于在rails中创建帖子的验证错误消息

我正在使用remotipart gem异步上传图像

帖子模型

class Post < ActiveRecord::Base
  belongs_to :topic
  has_many :comments
  has_many :ratings
  belongs_to :user
  has_and_belongs_to_many :users , join_table: :posts_users_read_status
  has_and_belongs_to_many :tags
  has_attached_file :image
  validates_presence_of :name, :presence => true
  validates_attachment_size :image, :less_than => 1.megabytes
  validates_attachment_content_type :image, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]
  validates_length_of :name,:maximum => 20

end

验证是名称不应超过20个字符

我正在索引页面中呈现表单

帖子的索引是

<p id="notice"><%= notice %></p>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;

}
th, td {
    padding: 5px;
text-align: center;
}
</style>
<h1>Listing Posts</h1>
<table style='width:100%' id="posts">
  <thead>
    <tr>
      <th>Name</th> 
      <th>Email</th>
      <th>Message</th>
      <th>Topic</th>
      <th>Status</th>
      <th>No of<br> comments</th>
      <th colspan="3">Edit_options</th>
    </tr>
  </thead>
  <tbody>

    <%= render @posts%>

  </tbody>
</table>

<br>
<%= will_paginate @posts%>
<% if @topic %>
<%= link_to 'New Post', "#" ,id: "posts-link"%> |
    <section id ="new-posts">
<%= render 'form'%>
    </section>
<%= link_to 'Back to Topics', topic_path(@topic) %>
<% else %>
<%= link_to 'Topics', topics_path %>
<%end%>

用于创建帖子的javascript是

<%if @posts.save%>
$("#posts").append('<%= j render @posts%>');
alert("Post Created")
$("#post_name").val("")
$("#post_message").val("")
<%else%>
alert(<%=@posts.save!%>)
<%end%>

当我提供超过20个字符的名称时，我需要在使用控制台时显示错误消息，我可以通过 .save显示它。 但它不适用于javascript

请任何人帮助我......！

1 个答案:

答案 0 :(得分：1)

我怀疑你使用的是以下模式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="remote.css">

  </head>
  <body>
    <div class="col-xs-offset-4 col-xs-5 col-sm-6 col-md-4 col-lg-offset-5 col-lg-3" id="shadow">
      <div class="row_outermost">
        <div class="row" id="row_1">
          <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
            <button type="button" id="btn_key_on" class="btn btn-circle btn-default" data-keycode="116">
              <span class="glyphicon glyphicon-off"></span>
              <!-- On -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-5 col-lg-3 keypad">
            <!-- Empty1 -->
          </div>
          <div class="col-xs-1 col-sm-2 col-md-1 col-lg-3 keypad">
            <button type="button" id="btn_key_off" class="btn btn-circle btn-default" data-keycode="142">
              Off
              <!-- Off -->
            </button>
          </div>
        </div>
        <div class="row" id="row_2">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_1" class="btn btn-circle btn-default" data-keycode="">
              <span class="glyphicon glyphicon-plus"></span>
              <!-- PageUp-->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_2" class="btn btn-circle btn-default" data-keycode="103">
              <span class="glyphicon glyphicon-menu-up"></span>
              <!-- Up -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_3" class="btn btn-circle btn-default" data-keycode="14">
              <span class="glyphicon glyphicon-repeat"></span>
              <!-- BackSpace -->
            </button>
          </div>
        </div>
        <div class="row" id="row_3">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_4" class="btn btn-circle btn-default" data-keycode="105">
              <span class="glyphicon glyphicon-menu-left"></span>
              <!-- Left -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_5" class="btn btn-circle btn-default" data-keycode="28">
              Ok
              <!-- OK -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_6" class="btn btn-circle btn-default" data-keycode="106">
              <span class="glyphicon glyphicon-menu-right"></span>
              <!-- Right -->
            </button>
          </div>
        </div>
        <div class="row" id="row_4">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_7" class="btn btn-circle btn-default" data-keycode="109">
              <span class="glyphicon glyphicon-minus"></span>
              <!-- PageDown-->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_8" class="btn btn-circle btn-default" data-keycode="108">
              <span class="glyphicon glyphicon-menu-down"></span>
              <!-- Down -->
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_9" class="btn btn-circle btn-default" data-keycode="1">
              <span class="glyphicon glyphicon-share"></span>
              <!-- ESC -->
            </button>
          </div>
        </div>
        <div class="row" id="row_5">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f1" class="btn btn-circle btn-default keypad-btn" data-keycode="59">
              F1
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f2" class="btn btn-circle btn-default keypad-btn" data-keycode="60">
              F2
            </button>
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f3" class="btn btn-circle btn-default keypad-btn" data-keycode="61">
              F3
            </button>
          </div>
        </div>
        <div class="row" id="row_6">
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <!-- Empty2-->
          </div>
          <div class="col-xs-1 col-sm-2 col-md-3 col-lg-3 keypad">
            <button type="button" id="btn_key_f4" class="btn btn-circle btn-default keypad-btn" data-keycode="62">
              F4
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

你应该真的想要修改你的#app/controllers/posts_controller.rb class PostsController < ApplicationController respond_to :js, only: :create def create @post = Post.new post_params @post.save end end #app/views/posts/create.js.erb <% if @post.save %> alert("Post Created"); $("#posts").append("<%=j render @post %>"); // make sure you have the partial for this $("#post_name").val(""); $("#post_message").val(""); <% else %> <% if @post.errors.any? %> <% @post.errors.each do |name,message| %> $("#<%=j name %>").append(<%=j message %>); <% end %> <% end %> <% end %> 模型：

Post
Paperclip验证

Ref

相关问题
最新问题