This is a ridiculous issue, but for some reason, in my Backbone app, external links are being treated as internal ones, simply appended to the url.
Here's my .hamlc file snippet:
.row
%li.modal-annotation-text.marginb-10
%a{ href: "https://medium.com" } Learn more
When clicking the link, the url changes from http://localhost:3000 to http://localhost:3000/https://medium.com
I can't believe something so simple has caused such headaches.
Unbelievably, the way I had to solve this was to add an onclick attribute to the link, and removing the href value. Removing the href value had no impact on the functionality, was just so the url bar doesn't reflect the external link when the user returns to the current page.
%li.modal-annotation-text.marginb-10
%a{ href: "", target: "_blank", onclick: "window.open('https://medium.com/')" }
Learn more about seasons
I think it is due to the link being in a bootstrap modal. I'm really not a fan of UI tools interfering with basic HTML/DOM simplicity.
Related
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.
On the long home page of my Rails app, I have a link near the top and an anchor near the bottom, which takes users to a list of the site's imaginary top contributors.
Link
Top Contributors
Anchor
<a name="link"></a>
The problem with this is that, once clicked, it creates a url http://localhost:3000/#link and then, if the user refreshes the page, that link becomes http://localhost:3000/link and then I get a No route matches [GET] "/link" error if the user refreshes the page again. There's not only the problem with functionality (site breaking), it's kind of ugly to have the #link but that might be avoidable.
Interested in what Rails offers, I tried to create the same with Rails :anchor option
<%= link_to('Top Contributors', root_path, :anchor => '#link') %>
However, this didn't work in several different ways. First, it triggered a total page refresh and then it didn't even take me to the anchor! Obviously I'm using the Rails anchor incorrectly, but the html version has its own problems (in the way I'm using it).
Can you explain the best way to do this?
**Update:**
The syntax is figured out to create the anchor but a problem remains
<%= link_to('Top Contributors', root_path(:anchor => 'topcontributors')) %>
<a name="topcontributors"></a>
If I click the link, it creates the url with a hashtag localhost:3000/#topcontributors If I then refresh the page, the hashtag disappears localhost:3000/topcontributors leaving a route that doesnt' exist, creating an error. It's the same problem in chrome, firefox, safari.
The actual syntax is as follows:
<%= link_to('Top Contributors', root_path(:anchor => 'link')) %>
Source: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to
I previously used javascript dialogs for confirmation on a mobile web app, but am now trying to switch over to using the new popups feature in JQM 1.2. My initial test doesn't work - no popup appears and I'm simply redirected to the anchor I'm trying to call.
My test code is simple, albeit a bit obfuscated because I'm using haml:
%a{:href => "#popupBasic", :"data-rel" => "popup"} Show popup
%div{:id => "popupBasic", :"data-role" => "popup"} Basic popup div
That said, I don't believe the haml is causing the issue based on reading the final HTML output. Both elements are at equal depth and contained within the element.
In addition, the div does "popup" without issue when I use the following at the console:
$( "#popupBasic" ).popup( "open" )
That makes me believe that the issue lies somewhere in the link or the URL handling. When I do click the link, it instead takes me straight to
http://localhost:3000/#popupBasic
Any ideas on how I should be handling the URL differently so that it shows the popup as intended?
After realizing the problem was probably some part of my Javascript, I went through and tried turning off each bit of javascript individually, until I figured out that the problem was with this in my application.js file:
$(document).bind("mobileinit", function(){
$.mobile.linkBindingEnabled = false;
});
which prevents all anchor click handling. Obviously now that I've removed this code the anchor links are working properly. Of course, that means I'm now left with trying to figure out why I added that in the first place and what I just broke by removing it...
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'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.