Open a modal in rails - ruby-on-rails

I am very new for rails and I try to open an modal in my app. Here is my show.html.erb
app > views> event > show.html.erb
<div>
<button class="btn btn-info slide-down-right-drawer-btn" data-slide-block-id="#discussion-drawer">
<i class='ion ion-chatbubbles icon mr-5'></i>Discuss
</button>
</div>
This is my app > views > event > _discussion_drawer.html.erb
<div id="discussion-drawer">
<div class="col-md-12 col-sm-12 col-xs-12" style="line-height: 50px;">
<ol class="breadcrumb">
<li>Discussions</li>
<li class="active"><%= #co["name"] %></li>
</ol>
<button type="button" data-toggle="modal" data-target="#discussionFormModal" data-entity-id="<%= #co["id"] %>" class="btn btn-conf add-note-btn btn-info mb-20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b>Start new discussion...</b>
</button>
</div>
</div>
But this is not work. Am I doing right? Can any one help me for this?

It's not super clear which is the modal you're trying to open and where is the button to toggle it, but it took me a few tries to get comfortable with this too.
Make sure the ID on your modal matches the ID on the button
# this is on your button
data-toggle="modal" data-target="#discussionFormModal"
# this is on the modal
id="discussionFormModal"
Check that you've rendered the partial (_whatever_the_name_is.html.erb) properly in the same page that the button to open the modal is
<%= render partial: "<path to your partial>", locals: {<any variables that you need to pass to the modal>} %>
#example
<%= render partial: "shared/discussion_form", locals: {discussion: #discussion} %>

I think your HTML code is correct but bootstrap js is not loaded properly. you can simply check using browser inspect.
Make sure that your bootstrap.min.js loaded properly in rails app. you can also use CDN https://getbootstrap.com/docs/4.5/getting-started/download/
or
If you are using bootstrap gem follow https://robrace.dev/integrating-bootstrap-4-in-rails-6/ this article

Related

render partial in rails

In my application I have an button as below.
<button type="button" data-toggle="modal" data-target="#askNetworkFormModal" class="hidden-xs btn btn-primary mb-10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class=""><b>
Ask
</b></span>
</button>
Here data-target is modal call askNetworkFormModal which is in _askthenetwork.html.erb
I rendered it within application.html.erb as below
<%= render partial: 'layouts/askthenetwork' %>
I just want to render this only for the page which include my button. How can I do this.
I had resolve this by changing code as below.
<% if controller_name =="home" && action_name == "feed"%>
<%= render partial: 'layouts/askthenetwork' %>
<% end %>

Dropdown not triggered when using partial view in Rails

I have the following in my index:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<% render partial: 'booksocial', locals: {book: book} %>
</div>
Then in my partial:
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=I Like BIg Books&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://books.com/book/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
The page is rendering with the dropdown button but it's actually not rendering the dropdown options. Is there something in my code preventing the list from rendering?
Easy answer that I'm surprised no one chimed in with. I'm not actually outputting the partial at the moment.
<%= render partial: 'booksocial', locals: {book: book} %>

How to build out custom view helpers for Rails with an onclick and inline styling?

I'm working on restructuring my code to clean it up and I'm trying to move over into using view helpers to do this. Right now I have the following in my views file:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=Book Subject&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://url.com/books/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-facebook fb-share-button" id="fbid">
<div data-href="http://url.com/books/<%= book.book_name %>" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore jssocials-share-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.url.com%2Fsomebooks%2Fbooks%2F<%= book.book_name%>&src=sdkpreparse">
<i class="fa fa-facebook jssocials-share-logo"></i><span class="jssocials-share-label">Share</span>
</a>
</div>
</div>
</li>
The only thing I can think of to alter this to a view helper is to go to books_helper.rb and do something like:
module BooksHelper
def social_sharing (media)
when 'email'
content_tag(:div, class: 'jssocials-share jssocials-share-email')
end
end
I've barely scratched the service here but I feel as even that is incorrect. I've nothing that's looking for the media type so email is worthless. Plus there's a div class around the href I'm hitting but the href has it's own class and an onclick plus styling. Any nudge would be appreciated. I have never built out a custom view helper.
You could pass a block...
<%= social_sharing 'email' do %>
Print
<i class="jssocials-share-logo"></i>
<% end %>
And define your helper method as...
module BooksHelper
def social_sharing(media, &block)
case media
when 'email'
content_tag :div, class: 'jssocials-share jssocials-share-email', &block
end
end
But I think that might just make your code more obscure even if it does DRY up the jssocials classed divs. I highly recommend "99 Bottles" by Sandi Metz which amongst other things talks about producing clear, maintainable code.
https://www.sandimetz.com/99bottles/

Render a Show Page Inside an Index Page on a Modal

Say I have a Scaffolded Post with just one field, body.I would like to render the show page for any post by clicking show only instead of loading a separate show page, It loads it inside a modal. Kinda like twitter does
I assume you are using Bootstrap and you would like to use a modal. You will have the list view have the modal with some links.
Now to get the data, we can do it either on page load (lets say data attributes), or on demand through XHR.
I like to get things on demand... so lets make a modal and some links.
<% #posts.each do |post| %>
<%= link_to post.title, post_path(post), remote: true, data: { method: 'get' } %>
<% end %>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Then in the controller we need to make it fire...
class PostsController < ApplicationController
def show
#post = Post.find(params[:id])
respond_to do |format|
format.js
end
end
end
In the view show.js.erb we will do some thing like this.
$('h4.modal-title').html("<%= #post.title %>");
$('.modal-body p').html("<%= #post.body %>");
$('.modal').modal();
Let me know if it has bugs, I just wrote it out of my head and the modal code came right from Bootstrap with no editing. You will probably have to refactor them to make sense.
You cannot render the entire show page directly, but you can do this with a partial. I would recommend creating a partial that encapsulates all of the view information that is common to your show page and your modal. You can then reference that partial in both your show page and your modal reducing the amount of duplicated code.
Partials are normal view files with an underscore as the first character of the file name. For example: _post.html.erb.
You render the partial inside other views with the render command:
#show.html.erb
<%= render 'post' %>
I would also recommend the Rails Guide on Layouts and Rendering

Rails way to pass data from 'for' to modal

I'm trying to pass a variable being defined in an 'for' loop down to a modal button. Currently I have the modal block being rendered in the for as a quick win but I find it redundant to be making the entire modal block in the DOM for nothing.
<h3>User</h3>
<p>Name: <%= #user.name if #user.name %></p>
<p>Email: <%= #user.email if #user.email %></p>
<% #user.authentications.each do |i| %>
<%= i.provider.titleize %><br>
<%= i.created_at.strftime("%m/%d/%Y") %><br>
<button type="button" class="btn btn-info btn-lg modal-btn-swap" data-toggle="modal" data-target="#myModal" data=<%= i.id %>>Delete Auth</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Remove authorization</h4>
</div>
<div class="modal-body">
<p>Some text
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<%= button_to 'Delete Auth', deauth_url(i.id) %>
<button type="button" class="btn btn-default"></button>
</div>
</div>
</div>
</div>
<% end %>
The concept is to just get a modal popup to give legal information prior to completing the transaction.
I'm thinking I'll need ot use jQuery to swap the href for the link when I click the 1st Delete Auth button.
Input?
If you create the modal once, you will have to write some javascript in the button click handler to populate the modal's attributes with the data you want each time you click, rather than hard coding it into each copy of the modal as you are doing now.
The ruby code would generate the modal -- you would have to leave the button_to('Delete Auth') without a target. Then you can copy the values from the data attribute to the modal when you click the button.

Resources