質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

ajaxを使用した入力フォームでエラー

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 519

Masskaz

score 32

前提・実現したいこと

お世話になっております。
ajax初心者になります。
現在下記URLを参考に自習をしており、ajaxを使用して入力フォームを作ろうとしております。

https://www.sejuku.net/blog/28967

こちらのコントローラ名をposts、モデル名をPostにして、
あとは名前以外にもメールやメッセージの入力フォームなども追加で入れてみようとして作っているのですが、
画面表示までは言ったものの、最後のデータを追加するでエラーが出てしまいます。
未定義のメソッドがあると言われているのですが、どこのことが分からず困っております。

最終的には画面のデータを追加するを押したら名前、メール、メッセージ入力のフォームが出てくるようにしたいです。

ご教示いただけると大変助かります。
宜しくお願い致します。

発生している問題・エラーメッセージ

ブラウザ上の検証画面のエラー文
GET http://localhost:3000/posts/new 500 (Internal Server Error)
Rails.ajax @ rails-ujs.self-2b8935521e2301b06b45bd42e623eb0c0acf76c3a6ba383b7429c6a2884f8c23.js?body=1:217
Rails.handleRemote @ rails-ujs.self-2b8935521e2301b06b45bd42e623eb0c0acf76c3a6ba383b7429c6a2884f8c23.js?body=1:573
(anonymous) @ rails-ujs.self-2b8935521e2301b06b45bd42e623eb0c0acf76c3a6ba383b7429c6a2884f8c23.js?body=1:174

ターミナル上のエラー文
ActionView::Template::Error (undefined method `model_name' for nil:NilClass):
    1: <%= simple_form_for @posts, remote: true do |f| %>
    2:   <%= f.input :name %>
    3:   <%= f.input :mail %>
    4:   <%= f.input :massage %>

app/views/posts/_form.html.erb:1:in `_app_views_posts__form_html_erb__693774503921719658_70250801467280'
app/views/posts/new.js.erb:1:in `_app_views_posts_new_js_erb__1893543175132787156_70250934638140'

該当のソースコード

routes.rb---------------
Rails.application.routes.draw do

    resources :posts
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
-----------------

posts controller-----------------
class PostsController < ApplicationController
  def index
      @posts = Post.all
  end

  def new
      @post_new = Post.new
      respond_to do |format|
      format.html
      format.js
      end
  end

  def create
      @posts = Post.all
    @post = Post.new(post_params)
    respond_to do |format|
      if @post.save
        format.html
        format.js
      else
        format.js {render :new}
      end
      end
  end

private
  def post_params
    params.require(:post).permit(:name,:mail,:massage)
  end

end
-----------------------

index.html.erb--------------
<h1>フォーム画面</h1>
<table class="table" id="posts">
  <%= render @posts %>
</table>
<%= link_to "データを追加する", new_post_path, remote: true %>
<div id="post-form"></div>
------------------------

_index.html.erb-----------------
<%= render @posts %>
-------------------------

_post.html.erb---------------
<%= render @posts %>
-----------------------

new.js.erb---------------------
$('#post-form').html("<%= j (render 'form') %>");
$('#post-form').fadeIn(800);
-----------------------------

_form.html.erb----------------
<%= simple_form_for @posts, remote: true do |f| %>
  <%= f.input :name %>
  <%= f.input :mail %>
  <%= f.input :massage %>
  <%= f.button :submit ,"追加" %>
<% end %>
-----------------------------

create.js.erb------------------
$('#posts').html("<%= j (render 'index') %>");
$('#post-form').fadeOut(600);
----------------------------

試したこと

スペルチェックや文面の確認も行いましたが、何が未定義なのかが分かりません。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

<%= link_to "データを追加する", new_post_path, remote: true %> の記述がおかしい気がします。これは登録フォームに遷移するためのリンクなので、Ajaxでない普通のリンク(remoteを指定しない)で表示すべきではないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る