Couldn't get popup modal dialog with rails application

Question

I have 2 model Post and Comment, where Post has-many Comments and Comment belongs_to Post. Every thing working fine with creation of posts and comments for that posts.

Now I have a requirement where when I click on "create new comment" in posts/show page, I want to show the comments/_form in modal.

comments_controller.rb:

class CommentsController < ApplicationController
  before_action :set_comment, only: [:show, :edit, :update, :destroy]

  # GET /comments
  # GET /comments.json
  def index
    @comments = Comment.all
    respond_with(@comments)
  end

  # GET /comments/1
  # GET /comments/1.json
  def show
    respond_with(@comments)
  end

  # GET /comments/new
  def new
    @post = Post.find(params[:post_id])
    @comment = @post.comments.build
  end

  # GET /comments/1/edit
  def edit
    @post = Post.find(params[:post_id])

  end

  # POST /comments
  # POST /comments.json
  def create
    @post = Post.find(params[:post_id])
    @comment =  @post.comments.create(comment_params)
    respond_to do |format|
      if @comment.save
        format.html { redirect_to(@comment, :notice => 'Article was successfully created.') }
        format.xml  { render :xml => @comment, :status => :created, :location => @comment }
        format.js
      else
        format.html { render :action => "new" }
        format.xml  { render :xml => @comment.errors, :status => :unprocessable_entity }
        format.js
      end
    end
  end

  # PATCH/PUT /comments/1
  # PATCH/PUT /comments/1.json
  def update
    @post = Post.find(params[:post_id])
    @comment.update(comment_params)
    redirect_to post_path(@post)
  end

  # DELETE /comments/1
  # DELETE /comments/1.json
  def destroy
    @comment.destroy
    respond_to do |format|
      format.html { redirect_to comments_url, notice: 'Comment was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

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

    # Never trust parameters from the scary internet, only allow the white list through.
    def comment_params
      params.require(:comment).permit(:commenter, :description)
    end
end

posts/show.html.erb:

<%= link_to 'New Coment', new_post_comment_path(@post), :id => 'create_comment' %>

comments/new.html.erb:

<div id="content">
  <h1>New Comment</h1>
  <%= render 'form' %>
</div>

comments/_form.html.erb:

<%= form_for([@post, @comment], :remote => true) do |f| %>
  <div class="field">
    <%= f.label :commenter %><br>
    <%= f.text_field :commenter %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_field :description %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

comments/create.js.erb:

<%- if @comment.errors.any? %>
console.log('Error');
$('#dialog-form').html('<%= escape_javascript(render('form')) %>');
<%- else %>
console.log('Created');
$('#dialog-form').dialog('close');
$('#dialog-form').remove();
$('table').append('<%= escape_javascript(render(@comment)) %>');
<%- end %>

I don't know where I went wrong. When I click on "create comment" it is redirecting to new page instead of pop-up model and even couldn't create comment.

Please help.

Answer 1

1. Create a partial for showing comment form.
2. Render this partial to post show page as hidden.
3. show hidden partial.

Example:

<%= link_to 'Show Modal', "#", data: {toggle: "modal", target: "#modal"} %>  

hidden partial

<div class="modal hide fade" id="modal" title="My modal">
  /* your comment form */
  /* render comment form */
</div>

Just make sure target is your hidden partial id.