Rails 5.1.2 problem with AJAX

2

I want to implement ajax to create a post, without having to reload the page and that does not go to the show as usual rails, I'm doing it following a tutorial but it does not work.

in the _form.html.haml you can see that you add the remote: true to work with ajax.

= form_for @post,remote: true do |f| 
  - if @post.errors.any?
  #error_explanation
  %h2= "#{pluralize(@post.errors.count, "error")} prohibited this post 
  from being saved:"
    %ul
      - @post.errors.full_messages.each do |message|
        %li= message

  .mdl-textfield.mdl-js-textfield.full-width
    = f.text_area :body, class:"mdl-textfield__input"
    = f.label :body, "Comparte con la Comunidad", class:"mdl-
    textfield__label"
  .actions.text-right
    = f.submit 'Publicar', class:"mdl-button mdl-js-button mdl-button--
    raised mdl-button--colored"

However, when the post is creadom, the application redirects me to the show page of the newly created post in html format, but it should have stayed on the form.

I do not know if it is a problem with the version of rails 5.1.2, because in rails 4 it was enough to type remote: true so that the application will remain in the form after giving the button to create a post.

post controller:

class PostsController < ApplicationController
  before_action :set_post, only: [:show, :edit, :update, :destroy]

  # GET /posts
  # GET /posts.json
  def index
    @posts = Post.all
  end

  # GET /posts/1
  # GET /posts/1.json
  def show
  end

  # GET /posts/new
  def new
    @post = Post.new
  end

  # GET /posts/1/edit
  def edit
  end

  # POST /posts
  # POST /posts.json
  def create
    @post = current_user.posts.new(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 }
      else
        format.html { render :new }
        format.json { render json: @post.errors, status: :unprocessable_entity }
      end
   end
end

# PATCH/PUT /posts/1
# PATCH/PUT /posts/1.json
def update
  respond_to do |format|
    if @post.update(post_params)
      format.html { redirect_to @post, notice: 'Post was successfully updated.' }
      format.json { render :show, status: :ok, location: @post }
    else
      format.html { render :edit }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
  end
end

# DELETE /posts/1
# DELETE /posts/1.json
def destroy
  @post.destroy
  respond_to do |format|
    format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
    format.json { head :no_content }
  end
end

private
# Use callbacks to share common setup or constraints between actions.
def set_post
  @post = Post.find(params[:id])
end

# Never trust parameters from the scary internet, only allow the white list through.
def post_params
  params.require(:post).permit(:body)
end
end

I also have a show.js.erb file to render a partial and see the body of the newly created post.

show.js.erb

$('#posts').append("<%= render j @post %>")

_post.haml

%article
  =post.body

I have been looking for a while, in the rails guides they say that to work with ajax I only need the remote: true but it is not working for me

    
asked by Jose Rafael Camacaro Barraez 21.07.2017 в 21:18
source

1 answer

2

I see two problems that can cause your code to malfunction:

1) You are expecting a js response but the controller only responds to html and json ; try adding the js format in the action; for example:

def update
  respond_to do |format|
    if @post.update(post_params)
      format.html { redirect_to @post, notice: 'Post was successfully updated.' }
      format.json { render :show, status: :ok, location: @post }
      format.js { render :show }
    else
      format.html { render :edit }
      format.json { render json: @post.errors, status: :unprocessable_entity }
      format.js { }
    end
  end
end

2) The use of j is wrong, you should put it before of render (the result of render(@post) is the one that should escape from javascript :

$('#posts').append("<%= render j @post %>")
    
answered by 21.07.2017 / 23:26
source