Currently, I have an index table displaying all subscribers with a link_to that directs to the individual subscriber's show page. However, I am interested in implementing a modal that will display the show page information in front of the index page. I must admit that I have never created a modal before and I am struggling to figure it out. Initially, I found a modal code on W3, which is cool, but it requires clicking a button on the show page to render the modal. My goal is to have the modal displayed automatically when accessing the show page from the index. I know this may seem like I want someone to code for me, but I am simply seeking guidance in the right direction as I feel overwhelmed by this task. Here is some relevant code for better understanding:
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">×</span>
<p><%= @subscriber.first_name %></p>
</div>
</div>
</div>
</body>
</html>
I obtained the code from the W3 website.
Any suggestions or help you can provide would be greatly appreciated! Thank you.