Question

在我的tweets索引页面上，如果您发布了tweet，则可以查看所有tweets，发布tweet，删除和编辑tweet。目前，当我编辑推文时，它会转到单独的页面，但是我希望编辑表单在索引页面上显示为模式，因此我尝试将其呈现为模式。但是，当我这样做时，原始的“添加推文”表单将显示在模式中。我猜这是因为我的索引控制器中的@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' %>

通过这种方式，模态是局部的，以使您的视图更加清晰。如果policy（tweet）.edit，您应该删除<％中包含的部分？％>（包括条件）。对于编辑和删除操作，您可以执行类似的操作，创建delete.js和edit.js并使用带有remote：true的链接。

将编辑simple_form添加到索引页上的模式-ROR

1 个答案: