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

Question

I currently have a index table with all the subscribers then I have link_to that renders the show page of that individual subscriber. 我目前有一个包含所有订户的索引表，然后有link_to，它呈现该订户的显示页面。 I would really like to render a modal with the show page in front of the index page with the subscribers information. 我真的很想在显示页面和订阅者信息的索引页面之前呈现一个模式。 I have to be honest I have never really made a modal before and I'm really struggling figuring this out. 老实说，我从来没有真正做过一个模态，而且我真的在努力弄清楚这一点。 I will say I got the start of this modal from W3 and it's cool it's just that you have to click a button in the show page to render the modal but I want it to render before it renders the show page in the index. 我要说的是我从W3开始这个模态的开始，很酷，只是您必须单击显示页面中的按钮来呈现模态，但是我希望它在呈现索引之前显示它。 This may seem like I just want someone to code for me but that is not the case I'm just looking for some help in the right direction. 似乎我只希望有人为我编码，但事实并非如此，我只是在寻找正确方向的帮助。 I'm truly in over my head on this one. 我真的很想念这个。 Here is some code for clarity. 为了清晰起见，下面是一些代码。

Controller: 控制器：

    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>

Like I said I copied this from the W3 site. 就像我说的那样，我从W3网站复制了此内容。

I'm not sure what else to show? 我不确定还要显示什么？ I think I may be looking for an ajax thing I'm not sure? 我想我可能正在不确定我想要的ajax东西？ any help would be great! 任何帮助将是巨大的！ Thank you. 谢谢。

Answer 1

You have to create a show.js.erb and in that you have to call the modal. 您必须创建一个show.js.erb并且必须调用模式。 Pass a remote true in your show link_to as it will call the modal through js. 在您的show link_to中传递一个远程true，因为它将通过js调用模式。 Your link_to will be like this: 您的link_to将如下所示：

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

and the show.js.erb will be : 并且show.js.erb将是：

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

This will do the job. 这样就可以了。

Answer 2

Well you could have one hidden modal at the bottom of the page and when a subscriber is clicked, an ajax call is made, the controller fetches the database info, a file with the js.erb extension runs, and fills the modal with that subscriber's info. 好吧，您可以在页面底部找到一个隐藏的模式，然后单击一个订户，进行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

This is the jQuery that runs after the controller#action is done running its code 这是在controller＃action完成运行其代码后运行的jQuery

# views/subscribers/show.js.erb

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

You will also need a partial to get the render 'subscribers/show.js.erb' to work 您还需要部分操作才能使render 'subscribers/show.js.erb'正常工作

# views/subscribers/_show.html.erb

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

That should point you in the right direction 那应该为您指明正确的方向

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

问题描述

Controller: 控制器：

CURRENT MODAL: 当前模态：

2 个解决方案

解决方案1
0 2016-07-04 20:58:30

解决方案2
0 已采纳 2016-07-04 21:26:40

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

问题描述

Controller: 控制器：

CURRENT MODAL: 当前模态：

2 个解决方案

解决方案1 0 2016-07-04 20:58:30

解决方案2 0 已采纳 2016-07-04 21:26:40

解决方案1
0 2016-07-04 20:58:30

解决方案2
0 已采纳 2016-07-04 21:26:40