I'm trying to incorporate Hotwire/Turbo into an existing Rails application. I've added turbo frames to a simple edit page, but now when I click my back button, it disappears instead of taking me to target page. The link is a simple link_to "Back", my_model_show_path(model_instance).
I see that the network request takes place, and succeeds. The page preview in DevTools' Network tab shows the correct page being loaded and rendered as html. The browser just doesn't take me to the new location.
How do I make this work like before? I feel like I should be able to redirect anywhere in my application with regular links even if I'm using Hotwire/Turbo.
Turns out there are three ways (at least) to restore default link behavior.
1: Set the data-turbo attribute.
<%= 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">
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.
Related
On an index page I have a table with a bunch of listed items. Each <tr></tr> within the table's <tbody>not only lists each item, but also allows you to
update that item
click edit to take you to the edit screen for that item
Here is a picture:
Within development in safari: I can successfully update each listed item and it all works just fine. However: when running my feature spec with capybara and selenium-webkit (which uses firefox):
It appears that capybara finds the submit button ok and even clicks it
But then nothing happens. For some reason the form appears to not be submitting when that update button is clicked.
To make things even more strange: in development mode while testing with firefox, clicking the update button works sometimes. Sometimes it doesn't work and I have to refresh the page, and then it works.
I tried putting a binding.pry in right before clicking the Update abc button in order to manually click the button at that step. I noticed that clicking the button manually was not submitting the form either.
Here is my relevant spec:
scenario "within the index page", js: true do
select 'some selection', from 'item_1_jazz'
select '12345', from 'item_1_something'
# I attempted putting a binding.pry here, and noticed that clicking the update button still wasn't submitting the form
find("#update_some_item_1_btn").click
expect(page).to have_content 'The item was successfully updated.'
end
Update Here are my buttons within the form:
<td class="btn-group">
<%= f.submit 'Update abc', class: "btn btn-success btn-sm", id: "update_#{dom_id(item)}_btn" %>
<%= link_to edit_item_path(item), class: "btn btn-info btn-sm" do %>
<i class="fa fa-pencil"></i> Edit
<% end %>
</td>
Question: In firefox: Capybara appears to find the submit button just fine and even click it. But why isn't Capybara able to submit the form within Firefox? Also: why in development mode with firefox does the button only work sometimes? It appears something is stopping the form form from submitting.
Based on responses to comments on the OQ, it appears you have form elements wrapping your td elements inside a tr. That is invalid HTML since a form element is not a valid child of a tr, and different browsers may/do interpret markup like that differently. If you don't need IE compatibility then you can use the HTML5 form attribute to tie form elements outside a form back to the form you want them associated with, however if you do need IE compatibility you'll need to look at other solutions such as not using table/tr/td elements but possibly styling other types of elements with 'display: table/table-row/etc` or one form wrapping the whole table and determining which element to update based on the button clicked.
I have a navigation and for certain parts, I'd like to link_to a particular sections of the page when it is navigated to it.
I tried this:
<li><%= link_to "Submit Data", about_path(anchor: "submit-data") %>
but I ended up on the correct about page but not to the section I desired. The submit-data div is lower on the about page. Is this more complex than I think it is? Please send examples.
Try
<%= link_to "Submit Data", "#{about_path}#The_SECTION_ID_YOU_WANT_TO_TRAVERSE_TO" %>
I fixed this by changing submit-data to an id instead of a class. The above link_to worked when I did this action.
Typically anchors (the #my_anchor_name part of a URL) cause the scroll position of the page to move to a corresponding anchor target in the markup.
The anchor targets are written as:
<a name="my_anchor_name"></a>
You can put headers inside if you want as well, for clean formatting:
<a name="my_anchor_name"><h1>Submit Your Data Here</h1></a>
I'm a newbie to RoR, but I'm looking to create a button that takes users to an external URL.
I've had trouble using link_to, because I haven't been able to style the hyperlink look like a button.
Then, I am able to get the button to appear with the following code:
%a#about-join-our-team.button Current Open Positions
But I can't add a URL to it in this format. (Button text = "Current Open Positions")
I'm sure I'm making some silly RoR mistake, but I just can't find the right answer in previous threads.
Thanks for you help!
ROR actually has a built-in helper called button_to which does exactly what you need:
= button_to "Current Open Positions", your_url_path, class: "class"
This basically creates a small form, which Rails uses to send a request to. The user sees a standard HTML button
Following should work(HAML)
%a#about-join-our-team.button{href: your_url} Current Open Positions
(erb)
<a class="button" href="<%= your_url %>" id="about-join-our-team">Current Open Positions</a>
I'm using Kaminari pagination on a site, and when the user leaves the page and clicks the back link it goes back to the first page.
What I want is for the back link to go to the same page left. I know I should use a session variable for this, but I'm pretty new to Ruby On Rails so I'm not 100% positive on the syntax here.
Would love some help.
<%= link_to_function "Back", "history.go(-1);return true;" %>
I should add that it's a good practice to code links to pages as <a> tags rather than creating a form in your HTML for that purpose.
If you need to style the link to look like a button, do that in the CSS.
i want to render a partial within a view. so that when button MORE is clicked everything stays the same just additional characters are shown. in my case the whole article.
<%= #article1.content[0..300] + "..." %>
<%= link_to "more", ....... %>
i dont know what the right methot would be. somehow i have to explain to rails that when button more is clicked it shows me the whole article. maybe i shouldn't use method link_to ..
thank you in advance for your replys
What you're looking for is link_to_remote or link_to_function.
link_to_remote will be fetching the rest of the article from your controller and replacing/appending to a DOM element with a partial via RJS. This allows you to minimize unnecessary data being sent, and facilitates handling users that have javascript disabled.
With link_to_function, the entire article will be served when the page is loaded, but the everything beyond the first 300 characters will be hidden by CSS. This is easier to set up but sends a lot more data, it also relies on the user having javascript enabled.
Without looking at the source the average user probably couldn't distinguish between the two methods.
Which choice you go with is up to you. Sorry, I haven't got time to provide code examples, but the internet is full of them.
try link_to_function, use truncate for part and insert hidden tag with full text, switch them using javascript in link_to_function