How to use bootstrap Modal with link_to in rails? - ruby-on-rails

I had asked this earlier but unfortunately I am still stuck. I have a link_to like this
<%= link_to "Click Here", page_path,, :id => 'login', "data-toggle" => "modal" %>
in page.html.erb (the page which I want to load in modal when the link gets clicked),I have
<div class="modal" id="loginModal">
Test Content
</div>
in assets/page.js.coffee
$('#loginModal').modal(options)
but still, the link is not opening in a modal Any help ?

Add data-target
<%= link_to "Click Here", page_path, :id => 'login', "data-toggle" => "modal", 'data-target' => '#loginModal' %>

There is a prettier way to add data attributes in Rails. You can do something like this to get the same results.
<%= link_to 'Click Here', "#", data: {toggle: "modal", target: "#modal"} %>

Using Rails 7 with Bootstrap 5
<%= link_to 'Add user', '#', {:remote => true, 'data-bs-toggle' => "modal", 'data-bs-target' => '#exampleModal', class: 'nav-link'} %>

Related

How do I create a link_to tag with both class and data fields?

I want to create a Rails link_to tag that will ultimately spawn a dialog box and so it just link to "#". However, I would like it to have a class and data attribute. But when I try this
<%= link_to "What's This?", "#", {class: "more_info"}, :data => { :more_info => 'mt_hashes_info' } %>
I get the error
wrong number of arguments (given 4, expected 0..3)
What's the right way to construct this link?
This is what it should look like:
<%= link_to "What's This?", "#", {:class => "more_info", :data => { :more_info => 'mt_hashes_info' }} %>
Class and Data both go into the same options hash.
You can do this simply like this
<%= link_to "What's This?", "#", class: "more_info", data: { more_info: "mt_hashes_info" } %>
the generated HTML
<a class="more_info" data-more-info="mt_hashes_info" href="#">What's This?</a>
With confirmation dialog
<%= link_to "What's This?", "#", class: "more_info", data: { confirm: "Are you sure?" } %>
the generated HTML
<a class="more_info" data-confirm="Are you sure?" href="#">What's This?</a>
You can find more the link_to
Here's an example from the heart of Redmine:
link_to(l(:button_archive), archive_project_path(project, :status => params[:status]), :data => {:confirm => l(:text_are_you_sure)}, :method => :post, :class => 'icon icon-lock')
Sorry about the run-on statement; you know Redmine! But note both :data and :class are peers of the same Hash...

How to open a link in a new window with ruby?

<li class="li_spacing"><%= button_to "Website", #restaurant.website, :target => '_blank', :class => "btn btn-primary" %></li>
Everything works except for :target => '_blank'. Why does this not render the the link in a new page?
Change from button_to to a link_to:
<%= link_to "Website", #restaurant.website, target: "_blank" %>
button_to is generated inside a form, if you still wish to use it:
button_to "Website", #restaurant.website, class: 'btn btn-primary', form: {target: '_blank'}
A common way to open a link in a new window was to add a target="_blank" to the link tag.
But for security reasons this should not be done anymore. It is recommended to use rel=noreferrer instead:
link_to 'title', url, rel: 'noreferrer'
Or as a button:
button_to 'title', url, form: { rel: 'noreferrer' }
If you are using button_to helper then it is automatically wrapped in a form by rails. So what you can do is to pass the attribute target: '_blank' as:
button_to "Website", #restaurant.website, class: 'btn btn-primary', form: {target: '_blank'}

link_to with embedded ruby in the data-toggle

I'm following this SE question to put a form in a bootstrap modal with rails.
The person who answered the question states: "Make sure that you have a unique id or class for every modal body.". So I am trying to put a unique id number in my link_to:
<%= link_to "Edit", edit_post_path(post.id), :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "<%= post.id %>-my-modal" %>
But this is causing an error. If I take out <%= post.id %> I do not have an error, but the modal behavior does not work.
How can I add the post.id with embedded ruby to the link to?
You have to write it like this:
<%= link_to "Edit", edit_post_path(post.id), :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "#{post.id}-my-modal" %>
Once you open a <% ... %> tag, you are writing ruby code. What this means is that you can't nest <% ... %> tags inside another <% ... %> tag because these tags aren't ruby syntax.
Inside the tag, to do string interpolation, use normal ruby methods:
<%= link_to "Edit", edit_post_path(post.id), :class => "btn", :remote => true, "data-toggle" => "modal", "data-target" => "#{post.id}-my-modal" %>
Only mistake is putting another (ruby) tag <% %> inside the same tag.
In erb (embedded ruby) one <%= %> tag cannot have another tag inside.
This code result a syntax error.
<%= link_to "Edit", .... "data-target" => "<%= post.id %>-my-modal" %>
If you plan to output/render data inside the tag and quoted as string,
used #{put_data_hare}
Output like:
<%= link_to "Edit", .... "data-target" => "#{post.id}-my-modal" %>
In other case, you can do like:
post.id.to_s + "-my-modal"

turn of turbo links when clicking a link

I was wondering if this is possible. I have seen stack questions ask this and the answer seems to be:
<%= link_to 'Manage', '/manage?id='+blog.id.to_s+'#dashboard', :class => 'btn btn-primary', :data-no-turbolink => false %>
But I get the error:
undefined local variable or method `no' for #<#<Class:0x007f8d5270a440>:0x007f8d54a5af30>
So I am wondering what the actual answer is for this. How do you say "don't use turbo links when following this link.
You are using wrong syntax. Try:
<%= link_to 'Manage', '/manage?id='+blog.id.to_s+'#dashboard', :class => 'btn btn-primary', "data-no-turbolink" => false %>
OR
<%= link_to 'Manage', '/manage?id='+blog.id.to_s+'#dashboard', :class => 'btn btn-primary', data: {no_turbolink: false} %>

Rails, how do you submit a form with a text link?

I am trying to get this form to submit correctly. Here's what I have so far:
<% form_for(:user, :url => update_user_setting_path, :remote => true, :html => {:method => :post, :class => "search_form general_form"}) do |f| %>
and the button renders with this code:
<li><%= link_to raw("<span class='button approve'><span><span>SAVE</span></span></span>"), :action => 'create' %></li>
I am using action create, is this correct?
Here is the rendered form tag:
<form method="post" data-remote="true" class="search_form general_form" action="/settings/2/update_user" accept-charset="UTF-8">
What am I missing? Thanks for your help!
No, you are not using link_to properly. You need to use a submit tag to submit your form, not a link_to tag, for example:
<% form_for(:user, :url => update_user_setting_path, :remote => true, :html => {:method => :post, :class => "search_form general_form"}) do |f| %>
...
<li><%= f.submit "Save" %></li>
If you want to use a text link you'll have to have javascript submit the form. For example, if you are using jQuery you could do the following:
<%= link_to 'Save', "#", :onclick=>"$('.search_form').submit()" %>
I like Pan's solution but I prefer to use the ID of the form directly which you can get from the dom_id(obj). The form_for helper also uses dom_id(obj) to assign the form's ID. This way you aren't dependent on setting classes by hand or subject to accidentally submitting more than one form that share the same CSS class. It looks a little stranger but I usually have a custom FormBuilder anyway so I just add a generic link_to_submit method to encapsulate this:
<%= link_to 'Save', "#", :onclick => "$('##{dom_id(#user)}').submit()" %>
You don't need to use an id or a selector if you have jquery, you can simply do :
= link_to 'Save', "#", onclick: "$(this).closest('form').submit()"
Thanks for the answers... I ended up using this and it works great:
<li><%= link_to raw("<span class='button approve'><span><span>SAVE</span></span></span>"), "index_users", :onclick=>"document.forms['form1'].submit();"%></li>

Resources