I recently added Hotwire to my rails app to update modals but this broke a link_to I had that redirected users to stripe. I looked online for ways to work around it but since Hotwire is relatively new, I couldn't find it. Does anyone have any recommendations on getting link_to to work with turbo stream?
There are three ways (at least) to restore default (non-Turbo) link behavior.
1: Set the data-turbo attribute to false.
<%= link_to "Click Here", path_helper_method, data: { turbo: false } %>
(or in plain html)
<a href="" data-turbo="false">
2: Set the target attribute.
<%= link_to "Click Here", path_helper_method, target: "_top" %>
(or in plain html)
<a href="" target="_top">
3: Move the link outside any Turbo frame. Any link inside a Turbo frame, without one of the above attributes, will be handled by Turbo by default (often with unexpected results).
If there is a link inside a turbo_frame_tag you can make it work as usual by implementing a special frame called _top that represents the whole page. Just add data: { turbo_frame: "_top" } to your link.
link_to "string", object, data: { turbo_frame: "_top" }
If the link is inside of a turbo_frame_tag with a turbo: true or turbo: true is set globally/on any of the parent elements, the link will act as turbo: true meaning it won't redirect you as it will try doing an ajax request. Try doing <%= link_to 'Woodoo', root_path, data: { turbo: false } %>
The helpers that turn link_to into remote invocations will not currently work with Turbo. Links that have been made remote will not stick within frames nor will they allow you to respond with turbo stream actions. The recommendation is to replace these links with styled button_to, so you'll flow through a regular form, and you'll be better off with a11y compliance.
#edit
use target: "_top" on the turbo_frame_tag to enable links within it
I faced the same problem but
I change this
<%= link_to "Create A Comment", new_model_post_comment_path(#model_post.id),method: :get%> </span>
to this and it worked for me
<%= link_to "Create A Comment", new_model_post_comment_path(#model_post.id)%> </span>
Related
I am using rails 6.1.x with hotwire-rails
I was wondering if you have ever experienced the following:
I have a page where I have link_to like this:
<%= link_to client_luser_courses_path,
{
method: :get,
class: "btn btn-primary text-center float-right",
data: {turbo: false}
} do %>
<i class="fa fa-arrow-right" aria-hidden="true"></i>Get the files:
<% end %>
On the top of the page, I enable turbo with:
<%= javascript_pack_tag 'client', 'data-turbo-track': 'reload' %>
Now, if i click the link, I get the error:
"Error: Form responses must redirect to another location" in Firefox console
and nothing happens.
If I remove the "method: :get" part, then it works fine.
<%= link_to client_luser_courses_path,
{
class: "btn btn-primary text-center float-right",
data: {turbo: false}
} do %>
<i class="fa fa-arrow-right" aria-hidden="true"></i>Get the files:
<% end %>
Do you know why this is happening? It's really puzzling.
Just to flesh out information from the comments, especially since there seems to be a lot of confusion around links in Hotwire/Turbo:
If you wish for a link to have "default" behavior (meaning it takes to you a new page / a full page reload), OP is correct to have data: { turbo: false } declared on the link.
Commenter max is correct that adding method: :get is not necessary to make the link behave this way. It's important to note, however, that the reason for the failure is that adding a method parameter actually makes the link send a POST request, with a hidden input with name "_method", and value "get". See link_to in the Rails API docs.
The error message OP sees is actually a Turbo error. It's unclear if this is a bug or not, since Turbo should be deactivated. It should be the case that the network request is succeeding, but not redirecting because Turbo has taken over. The reason the failure ultimately occurs is because Turbo is (mistakenly?) handling the request, and expecting a 30x redirect, but no redirect is happening. This is why the failure ultimately occurs. If you open up your network inspector in DevTools, you'll see a 200 request with a preview of the page you're linking to.
TLDR: Adding method: :get makes the link send a POST request, which is probably why Turbo is taking over even though OP put in data: { turbo: false }.
I am integrating 2 rails projects using button to link the first project to the second. Now I have this code
<%= form_tag fast_url_for(' ') do %>
<%= button_to AppConfig.app_clockout %>
<% end %>
and my current directory is
/var/www/html/wizTime/wizProject/Source/project_1
but I don't know how can this redirect to the home page of another project. The directory of my second project that I want to integrate is
/var/www/html/project_2
Please give me ideas. Thank you!
If you only want a link_to and your projects will have domains later, you can just create a link like this in rails:
<%= link_to 'sec project', "http://www.rubyonrails.org/" %> which will create an ordinary html link: <a href=""http://www.rubyonrails.org/" ...>
The form usually should not link to another project?!
If after submitting the form you want to redirect the view to another project, than you can use the controller action and redirect after submit.
As the other commenter said - you can just create a link to the other domain. You should not ever rely on your directory-structure - because when you deploy, that directory structure will very likely be subtly different.
So use the domains instead.
You can even put the domains into environment variables so that you can use different domains (eg localhost:3000 vs localhost:3001) on your development machine. you'd use them like this:
<%= link_to 'My App', ENV['MY_APP_DOMAIN'] %>
<%= link_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'] %>
Then google for how to set environment variables on your local machine to set the values.
If you want them to be buttons... then you don't need to use a form. button_to creates its own form and is used exactly the same way as a link_to eg:
<%= button_to 'My App', ENV['MY_APP_DOMAIN'] %>
<%= button_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'] %>
However... you really don't need to use a button-to if you are just doing a GET for a URL like this...
(you use buttons when you need to POST data eg POSTing form data to a create action)
You can just pass in a CSS-class and style the link-to to look as though it were a button.
eg using Bootstrap classes:
<%= link_to 'My App', ENV['MY_APP_DOMAIN'], class: 'btn btn-success' %>
<%= link_to 'My Other App', ENV['MY_OTHER_APP_DOMAIN'], class: 'btn btn-danger' %>
OR similar.
This comes from Twitter Bootstrap modal rails delete button not working
How can I pass html code to show in Twitter Bootstrap modal? Here is the link
<%= link_to t('delete'), post, method: :delete, confirm: t('delete_this_question'), 'data-my-message' => raw(post.text), class: 'label' %>
post.text is HTML code. Now it shows link in bad format.
Thanks
I think the problem here is probably your use of "raw". If you use raw html inside your link_to helper it will probably mess up the link's quoting. For example you might get something like this:
world" ...>
And that would mess up your link tag. I'm not sure how the rest of your view fits together but I think you should just be able to drop the 'raw' method:
<%= link_to t('delete'), post, method: :delete, confirm: t('delete_this_question'), 'data-my-message' => post.text, class: 'label' %>
<%= link_to 'New Post', new_post_path %>
This produces link to new_post_path. Previously i used <input type="submit" class="new" name="Addlist" value="Add New" /> which resembled like a button. So how can i make the link look like button in erb?
Just to throw another option out there since I had a scenario where the button_to option didn't work. This looks kind of similar to that.
<%= link_to '<button type="button">New Post</button>'.html_safe, new_post_path %>
What I basically wanted is a button that doesn't turn into a submit, since I have multiple buttons on the page that aren't related to a form, and I really just want it to just go to another page.
Take a look at button_to. In summary it will be simmilar to this:
<%= button_to "New Post", { :action => "new" }, :method => :get %>
Although be aware, this method accepts the :method and :confirm modifiers described in the link_to documentation. If no :method modifier is given, it will default to performing a POST operation. You can also disable the button by passing :disabled => true in html_options. If you are using RESTful routes, you can pass the :method to change the HTTP verb used to submit the form.
#Ryan's answer is good but sadly fails html validation http://validator.w3.org/
error: The element button must not appear as a descendant of the a element.
Why not simply apply a (CSS) class to your link and make it appear as a button.
erb:
<%= link_to "Button Text", new_post_path, class: 'button' %>
produces (valid & semantic) HTML:
<a class="button" href="/post/new">Button Text</a>
which you can then style to look like a button.
Example: http://jsfiddle.net/nelsonic/FQK9M/7/
I'm trying to submit a form using link_to as follows:
<%= form_for(#post, :url=> '/post/action', :method=> 'post', :html => {:id=>'form_id'} ) do |f| %>
....
<%= link_to 'submit', "/post/action", :onclick=>"document.getElementById('form_id').submit()" %>
....
but it is not posting the form, it is simply redirecting my form to the specified url. Does anyone know how to do this?
You can use:
<%= link_to 'submit', "#", :onclick => "$('#form_id').submit()" %>
if you are using JQuery and a later version of rails.
Above will work but if you have a really long page it will navigate to top of the page because of "#" so if you want to avoid that you can do:
<%= link_to 'submit', "", :onclick => "$('#form_id').submit()" %>
I think both things happen. The browser starts to submit the form, but it also follows the link's href. You can fix it by linking to # instead of /post/action...
...however, I don't recommend doing it. There are a few better approaches:
First, you can use a button instead of a link. You'll have to style it to make it look like a link, but that should not be a problem. It will be better, because it won't break the Principle of Least Surprise (people who read the code expect forms to be submitted with buttons) and you won't need the JavaScript.
If you insist on using a link, you should at least move the JavaScript code from the view to a JavaScript file. Then have this behavior added unobtrusively (although, you won't have a good fallback with the link). Assuming you're using jQuery, it should be as simple as:
$(document).on('click', '[data-submit-form]', function(e) {
e.preventDefault();
$(this).closest('form').submit()
}