Using AJAX to dynamically load posts after form submission in Rails view

Encountering issues with loading/viewing posts after submitting via AJAX. While the form successfully inserts posts into the database, I'm struggling to display them below the post using JQuery slideDown. There's a standard post/shared post/commented post partial render in the index action.

index.html.erb

<div class="col-md-5">
      <div class="posts-feed-bg">
        <div id="post-index-form">
          <%= render 'posts/form' %>
        </div>
        <div class="post-textarea-bottom-border"></div>
        <div class="post-feed-container" id="posts-items">
          <% @posts.each do |post| %>
              <%= render partial: "posts/#{post.post_type}", locals: {post: post} %>
          <% end %>
        </div>
      </div>
    </div>

create.js.erb

<% if @post.save
      @post = Post.new
%>
    $('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>');
    $('#post-text-area').val('');
    $('#post-items').html('<%= escape_javascript(render 'posts/post') %>');
    $('#post-items').slideDown(350);
    <% end %>

_post.html.erb

  <div class="post-container">
    <%= post.user.username %>
    <%= link_to post.title, post %>
    <%= post.body %>
    </div>

posts_controller.rb

def index
        following_ids = current_user.following_users.map(&:id)
        following_ids << current_user.id
        @posts = Post.where(user_id: following_ids).order('created_at DESC').paginate(page: params[:page])
        @users = User.same_background_focus_as(current_user).paginate :page => params[:page], :per_page => 5
        @post = Post.new
      end

 def create
    @post = current_user.posts.build(post_params)

    respond_to do |format|
      if @post.save
        format.html { redirect_to @post, notice: 'Post was successfully created.' }
        format.json { render :show, status: :created, location: @post }
        format.js
      else
        format.html { render :new }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
    end
  end

_form.html.erb

<div class="container">
    <%= simple_form_for(@post, id: '', multipart: true, remote: true) do |f| %>
        <%= f.error_notification %>
        <div class="row">
          <div class="col-6 emoji-picker-container post-textarea">
            <%= f.input :body_text, class: 'form-control', label: false, id: 'post-text-area' %>
          </div>
        </div>
        <div class="row">
          <div class="col-md-5">
            <%= f.button :submit, class: 'btn btn-outline-success' %>
          </div>
        </div>
    <% end %>
</div>

Server Log After Submitting Form

Started POST "/posts" for 127.0.0.1 at 2017-08-16 13:25:25 -0400
Processing by PostsController#create as JS
  Parameters: {"utf8"=>"✓", "post"=>{"body_text"=>"AJAX"}, "commit"=>"Create Post"}
  User Load (1.0ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2  [["id", 4], ["LIMIT", 1]]
   (1.0ms)  BEGIN
  SQL (174.6ms)  INSERT INTO "posts" ("body_text", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["body_text", "AJAX"], ["user_id", 4], ["created_at", "2017-08-16 17:25:26.201583"], ["updated_at", "2017-08-16 17:25:26.201583"]]
   (0.5ms)  COMMIT
  Rendering posts/create.js.erb
   (1.0ms)  BEGIN
   (0.0ms)  COMMIT
  Rendered posts/_form.html.erb (8.0ms) [cache miss]
  Rendered posts/_post.html.erb (1273.9ms)
  Rendered posts/create.js.erb (1366.9ms)
Completed 500 Internal Server Error in 2282ms (ActiveRecord: 178.1ms)



ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x18937128>:0x1a9f6688>
Did you mean?  @post
               post_url):
    2:   <div class="media" style="padding-bottom: 2em;">
    3:     <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/60x60">
    4:     <div class="media-body post-user-name">
    5:       <h5><%= fa_icon 'user' %> <%= post.user.user_full_name%><%= link_to 'Delete', post_path(post), remote: true, method: :delete, data: {confirm: "You sure?"} if current_user == post.user %> </h5>
    6:       <p><%= post.body_text %> </p>
    7:     </div>
    8:   </div>

app/views/posts/_post.html.erb:5:in `_app_views_posts__post_html_erb__960034244_222460104'
app/views/posts/create.js.erb:9:in `_app_views_posts_create_js_erb__1048995870_223328388'

New Error After making changes

ActionView::Template::Error (undefined method `user_full_name' for nil:NilClass):
    2:   <div class="media" style="padding-bottom: 2em;">
    3:     <img class="d-flex align-self-start mr-3 purple-rounded rounded" src="http://via.placeholder.com/60x60">
    4:     <div class="media-body post-user-name">
    5:       <h5><%= fa_icon 'user' %> <%= post.user.user_full_name%><%= link_to 'Delete', post_path(post), remote: true, method: :delete, data: {confirm: "You sure?"} if current_user == post.user %> </h5>
    6:       <p><%= post.body_text %> </p>
    7:     </div>
    8:   </div>

app/views/posts/_post.html.erb:5:in `_app_views_posts__post_html_erb__960034244_199162944'
app/views/posts/create.js.erb:9:in `_app_views_posts_create_js_erb__1048995870_199612656'

method for partial view changer post.rb

def post_type
    if post_id? && body_text?
      "quote_share"
    elsif post_id?
      "share"
    else
      "post"
    end
  end

Answer №1

The issue arises from referencing the id incorrectly. The div is defined with the id as posts-items, yet in the file create.js.erb, it is referred to as post-items, causing JS to be unable to locate the selector with post-items. This lack of correct identification leads to the problem encountered. Correcting it to posts-items will resolve the issue.

#create.js.erb
<% if @post.save
  @post = Post.new
%>
  $('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>');
  $('#post-text-area').val('');
  $('#posts-items').html('<%= escape_javascript(render 'posts/post') %>');
  $('#posts-items').slideDown(350);
<% end %>

In addition, the following section of code:

<% if @post.save
  @post = Post.new
%>

appears redundant. There seems to be no rationale for its inclusion in create.js.erb unless there is a specific purpose for it. It should be removed.

#create.js.erb
$('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>');
$('#post-text-area').val('');
$('#posts-items').html('<%= escape_javascript(render 'posts/post') %>');
$('#posts-items').slideDown(350);

Update:

ActionView::Template::Error (undefined local variable or method `post' for #<#<Class:0x18937128>:0x1a9f6688>

Rails is encountering difficulty locating the post variable as defined in _post.html.erb within this scenario. To address this, pass it as a local variable in the partial. The final version of create.js.erb should resemble the following:

#create.js.erb
$('#post-index-form').html('<%= escape_javascript(render 'posts/form') %>');
$('#post-text-area').val('');
$('#posts-items').html('<%= escape_javascript(render 'posts/post', post: @post) %>');
$('#posts-items').slideDown(350);

Furthermore, modify @post to Post.new in the form to prevent conflicts with @post in the create action and consistently create a form for a new instance.

<%= simple_form_for(Post.new, id: '', multipart: true, remote: true) do |f| %>

ActionView::Template::Error (undefined method `user_full_name' for nil:NilClass)

This error occurs because the specific post lacks an associated user, resulting in an error at

<%= post.user.user_full_name %>
. To quickly rectify the error, utilize the try method.

<%= post.try(:user).user_full_name %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to insert hyperlinks into table rows within a React application

A React function was created by me to display a table. This is how the table appears. It accepts JSON as a parameter: { "id": 1, "firstName": "Richard", "lastName": "Morrison", "number ...

Exploring the distinctions between ajax, await, async, and

English is not my strong suit, so please bear with me if my writing seems odd. We have discovered two methods for transitioning from asynchronous ajax calls to synchronous ones. Using async: false Utilizing await Both achieve the same outcome, but I am ...

What is the purpose of assigning scope.property to scope.property() in order for the expression to function properly?

I have encountered an interesting situation with the directive below. In order for my expressnum function to work in the template, I had to include the line scope.expressnum = scope.expressnum();. It does what I need it to do, but I'm not entirely sur ...

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

Mastering the use of event callbacks in AngularStrap typeahead

I am currently utilizing an AngularStrap typeahead feature and I am in need of a callback function that will be executed when a user selects an item. As per the guidelines provided in the documentation, there is an option called onSelect which requires a f ...

Ways to customize PreBid.js ad server targeting bidder settings

In an effort to implement a unique bidder setting key name within my prebid solution, I have taken the necessary steps as outlined in the documentation by including all 6 required keys. Is it possible to change the key name 'hb_pb' to 'zm_hb ...

Express throwing module errors

I encountered an issue while attempting to expose a REST service in an electron app using expressJS. Following a tutorial, I added express and @types/express to the project. However, when trying to implement a "get" method and running the build with ng bui ...

How to Submit a Form in jQuery with both File and Text inputs without Redirecting the Current Window

I am working on creating an application form that allows users to attach images. The form consists of a few input elements placed within a div rather than a traditional form element. I need the form to be submitted via AJAX without causing a page redirect, ...

Issue with Reactive Form - The call signatures of 'FormGroup' are not compatible

I have a function written in TypeScript: // Form summaryAreaForm = new FormGroup ({ summary: new FormControl(null) }) // Function update() { document.getElementById('textDiv').innerHTML = this.summaryAreaForm('summary').value ...

Converting an object of objects into an associative array using Javascript and JSON

Using AngularJS, I am sending this data to my API : $http.post('/api/test', { credits: { value:"100", action:"test" } }); Upon receiving the data in my nodeJS (+Express) backend, it appears as follows : https://i.stack.imgur.com/NurHp.png Why ...

Guide: Enhancing Query Context within jQuery Instances Spanning Across Iframes

In my current project, I am facing a challenge with using a jQuery instance across iframes. It's been causing me quite a bit of frustration. Here's the situation: I have an existing web application that loads jQuery (which is aliased as $jq) in ...

The canvas's document.getElementById function is unable to find any matching element,

Hello everyone, I am currently diving into the world of javascript and trying to expand my knowledge. However, I have encountered a problem that has me stumped, and I could really use some assistance. While exploring, I came across this page: http://www.w ...

Link the Material-ui ToggleButtonGroup with redux-form

I'm currently facing a challenge with connecting the material-ui ToggleButtonGroup to Redux form. The issue seems to be occurring in my code snippet below: <Field name='operator' component={FormToggleButtonGroup} > <ToggleButt ...

Tips for extracting all values from cells in an Asp.net GridView and populating them into HTML textboxes using the 'onchange' event with a jQuery function called 'Calcul

I am attempting to input values into HTML textboxes inside a gridview when they lose focus using jQuery's onchange="return function()". I would like to determine which row of the table it is in and retrieve the detailed values of the entire cell. Any ...

AngularJS - varying actions based on which input field I interacted with first

Here is the tutorial I referenced for this code: <!DOCTYPE html> <html> <head> <title>AngularJS Tutorials</title> <link rel="stylesheet" href="vendor/foundation/foundation.min.css"> </head> <body> & ...

A strategy for removing the mandatory tag from a selectOneMenu when triggered by a p:ajax event=change

My current setup is as follows: PrimeFaces: 4.0.4 (elite) OmniFaces: 1.6.3 JSF: MyFaces 2.0.2 Server: WebSphere 8.5.0.2 Highlighted code snippet: <p:selectOneMenu value="#{viewModel.selectedContact}" required="true" converter="omnifaces.SelectItemsC ...

Quickest method for transmitting data to a Java socket server from a website

My main concern is to avoid using Java for the client side as the web interface is specifically designed for mobile devices. The primary objective is to determine the most efficient method to transmit a string from an "Onmousedown", "Onmouseup", or "Oncli ...

Looping through an array in Vue using v-for and checking for a specific key-value pair

As I dive into my first Vue app, I've encountered a minor setback. Here's my query: How can I iterate through a list of dictionaries in Vue, specifically looping through one dictionary only if it contains a certain value for a given key? Provi ...

Problem encountered when trying to apply background opacity to custom colors using Tailwind CSS and shadcn/ui

While using Tailwind CSS along with the shadcn/ui library for styling buttons, I have encountered an unexpected behavior. The issue arises when trying to add background opacity to a custom color defined in globals.css using HSL values such as: --primary: 3 ...

Personalize dat.gui using various documents

Recently, I delved into using the dat.GUI API alongside Three.js and found myself contemplating the best method to personalize the GUI across various files. My goal is to incorporate new Controllers into a single GUI instance from different files, each fil ...