Question

我目前有一个包含所有订阅者的索引表，然后我有link_to，用于呈现该个人订阅者的显示页面。我真的想在索引页面前面显示一个带有订阅者信息的显示页面的模态。我必须说实话，我以前从来没有真正做过一个模态，我真的在努力搞清楚这一点。我会说我从W3得到了这个模态的开始，它很酷，只是你必须单击显示页面中的一个按钮来渲染模态，但我希望它在呈现索引中的显示页面之前进行渲染。这似乎我只是想让别人为我编码，但事实并非如此，我只是想在正确的方向寻求帮助。我真的很喜欢这个。为清晰起见，这里有一些代码。

控制器：

    class SubscribersController < ApplicationController
  helper_method :sort_column, :sort_direction

  def index
    @search = Subscriber.search(params[:q])
    @subscriber = @search.result
    @search.build_condition if @search.conditions.empty?
    @search.build_sort if @search.sorts.empty?
  end

  def show
    @subscriber = Subscriber.find_by(params[:id])
  end

  def new
    @subscriber = Subscriber.new
  end

  def create
    @subscriber = Subscriber.new(subscriber_params)
    if @subscriber.save
      @subscriber.touch(:subscription_date)
      SubscriberMailer.welcome_subscriber(@subscriber).deliver_now
      flash[:notice] = "Subscriber Has Been Successfully Created"
      redirect_to new_subscriber_path(:subscriber)
    else
      render "new"
    end
  end

CURRENT MODAL：

     <html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body class="w3-container">

<h2>subsriber</h2>

<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">Open Modal</button>

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span>
      <p><%= @subscriber.first_name %></p>
    </div>
  </div>
</div>

</body>
</html>

就像我说的那样，我从W3网站上复制了这个。

我不确定还能展示什么？我想我可能正在寻找一个我不确定的ajax的东西？任何帮助都会很棒！谢谢。

Answer 1

你必须创建一个show.js.erb，你必须调用模态。在show link_to中传递一个远程true，因为它将通过js调用模态。你的link_to将是这样的：

link_to 'show' , subscriber_path(@subscriber) , remote: true

，show.js.erb将是：

$("#your_global_modal_id").html("<%= j render partial: 'modal' %>");
$("#your_global_modal_id").show();

这将完成这项工作。

Answer 2

你可以在页面底部有一个隐藏的模态，当点击订阅者时，进行ajax调用，控制器获取数据库信息，运行js.erb扩展名的文件，并填充具有该订户信息的模式。

# assets/javascripts/application.js

function subFetch() {
  $('.sub').click(function() {
    $.ajax(
      url: "/subrsciber/" + id,
      type: "GET"
    )
  })
}

# contollers/subscribers_controller.rb

class SubscribersController
  def show
    @sub = Subscriber.find params[:id]
  end
end

这是在控制器#action完成运行其代码

之后运行的jQuery

# views/subscribers/show.js.erb

$('#modal .body').replacewith("<%= j( render 'subscribers/show') %>")
$(subFetch);

您还需要部分才能让render 'subscribers/show.js.erb'正常工作

# views/subscribers/_show.html.erb

<h3><%= @sub.name %></h3>
<p><%= @sub.info %></p>

这应该指向正确的方向

在索引页面中渲染show动作 - rails

控制器：

CURRENT MODAL：

2 个答案: