добавление редактирования simple_form в модал на странице индекса - ROR

Question

на моей странице индекса твитов вы можете видеть все твиты, публиковать твиты, удалять и редактировать твиты, если вы твитнули твит.В настоящее время, когда я редактирую твит, он переходит на отдельную страницу, но я хочу, чтобы форма редактирования отображалась как модальная на индексной странице, поэтому я попытался отобразить ее в модальной форме.Однако, когда я делаю это, оригинальная форма «добавить твит» отображается в модальном.Я предполагаю, что это из-за @tweet = tweet.new в моем контроллере индекса.Мне было интересно, как это сделать и что изменить, потому что это начинает сбивать с толку так много всего происходящего на одной странице.спасибо

<h1 class="title text-primary">Home</h1>

<% if policy(Tweet).create? %>
  <div class="tweet-form">
      <%= render 'new',user:@user, tweet:@tweet %>
  </div>
<% end %>
<br>



<div id="tweets">
  <% @tweets.each do |tweet|  %>
  <div id="tweet-<%= tweet.id %>" class="card">

    <h4 class = "username"><%= link_to tweet.user.username, user_path(tweet.user) %></h4>
    <p class="tweet-content"><%= tweet.content %></p>
    <p class="date"><%= tweet.created_at.strftime("%B %d %Y, %l:%M%P") %></p>
    <%= render 'icons', tweet: tweet %>
    <% if policy(tweet).edit? %>
    <button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModalCenter">
      edit
    </button>
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
          <%= render 'edit',user:@user, tweet:@tweeted %>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
      <!-- <p class="edit"> <%= link_to "Edit", edit_tweet_path(tweet) %></p> -->
    <% end %>
    <% if policy(tweet).destroy? %>
      <p class="destroy"><%= link_to "Delete",  tweet_path(tweet),method: :delete, data: { confirm: "Are you sure?" }, class: "delete"%> </p>
    <% end %>
  </div>
 <% end %>
</div>



<div class="pages">
  <%= will_paginate @tweets,renderer: BootstrapPagination::Rails %>
</div>

class TweetsController < ApplicationController
  # before_action :authenticate_user!, :except => [:index]

   def index
    # @tweets = Tweet.all.order("created_at DESC")
    @tweets = policy_scope(Tweet).paginate(page: params[:page], per_page: 7).order('created_at DESC')
    @tweet = Tweet.new
    @user = current_user
  end

  def show
    @tweet = Tweet.find(params[:id])
  end

  def new
  end

  def create
    # @user = current_user
    @user = User.find(params[:user_id])
    @tweet = Tweet.new(tweet_params)
    @tweet.user = @user
    authorize @tweet

    if @tweet.save
    redirect_to user_tweets_path
    else
      redirect_to user_tweets_path
  end
  end



    #      respond_to do |format|
    #     format.html { redirect_to user_tweets_path }
    #     format.js
    #   end
    # else
    #   respond_to do |format|
    #     format.html { render 'tweets/index' }
    #     format.js

    # end


  def edit
    @tweet = Tweet.find(params[:id])
    @user = current_user
    authorize @tweet
  end

  def update

    @tweet = Tweet.find(params[:id])
    authorize @tweet
    @tweet.update(tweet_params)
    redirect_to tweets_path
  end

  def destroy
    @tweet = Tweet.find(params[:id])
    authorize @tweet
    @tweet.destroy

    redirect_to tweets_path

  end

  def upvote
  @tweet = Tweet.find(params[:id])
  @tweet.upvote_by current_user
  respond_to do |format|
    format.html {redirect_to :tweets}
    format.js {render "vote"}
    # redirect_to :tweets
  # redirect_to :tweets
  #  if request.xhr?
  #   head :ok
  # else
  end
end

def downvote
  @tweet = Tweet.find(params[:id])
  @tweet.downvote_by current_user
  respond_to do |format|
    format.html {redirect_to :tweets}
    format.js {render "vote"}
  # redirect_to :tweets
end
end

  private
  def tweet_params
    params.require(:tweet).permit(:content)
  end
end

Answer 1

views / tweets / create.js

$('#dialog').modal('toggle');
$('#tweets').append('<%= j render (@tweet) %>')

views / tweets / new.js

// Add the dialog title
$('#dialog h3').html("<i class='glyphicon glyphicon-plus'></i> Add New tweet");

// Render the new form
$('.modal-body').html('<%= j render("form") %>');

// Show the dynamic dialog
$('#dialog').modal("show");

// Set focus to the first element
$('#dialog').on('shown.bs.modal', function () {
      $('.first_input').focus()
  })

views / tweets / _dialog.html.erb

<div class="modal fade"

           id="dialog"  role="dialog"
           aria-labelledby="myModalLabel"
           aria-hidden="true"
           data-backdrop="static"
           data-keyboard="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close"
                data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title"></h3>
      </div>
      <div class="modal-body">
      </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

views / tweets / index.html.erb

Изменить ссылку на новый твит на:

<%= link_to "New Tweet", new_tweet_path, remote: true, class: "btn btn-primary" %>

, а также добавить:

<%= render 'dialog' %>

Таким образом,Модал частично, чтобы ваши взгляды были более чистыми.Затем вы должны удалить часть, включенную в <% if policy (tweet) .edit?%> (включая условие).А для редактирования и удаления вы можете сделать что-то похожее, создать delete.js и edit.js и использовать ссылки с remote: true.