I have a navbar. On this navbar are four links. Three of them are angular links that look like this:
<span><%= t "navbar.mystream" %></span>
<span><%= t "navbar.mystream" %></span>
<span><%= t "navbar.mystream" %></span>
One is a rails link that deals with user accounts and so I want to keep it outside the scope of my angular app for the time being. It looks like this:
<%= link_to edit_user_registration_path do %>
<span><%= t "navbar.account" %></span>
<% end %>
The links work fine until I go to the rails path which takes me to:
http://localhost:3000/users/edit
Now if I click one of the angular links it just adds the '#' to the url rather than removing the 'users/edit part and adding the # as it does otherwise.
How do I get around this?
The problem, I'm sure you can see, is that without Angular loaded on your account page, its routing can't catch the hashed #path changes. If your URL structure remains simple, you can probably get past that by rendering the full URL (including hash pieces) in the header. That is,
http://localhost:3000/#
http://localhost:3000/#teach
...
http://localhost:3000/users/edit
On your Angular pages, the only part that changes is the hash, and browsers usually won't refresh the page when that happens. Moving between Angular pages and your user account is a real path change that the browser will notice and refresh.
If that doesn't work out, or if your URLs get more complicated, you might need to render different headers depending on the page. Eg, only hashes in the Angular header and full paths in the non-Angular header. That's bound to get fiddly and irritating as your backend learns more about the frontend and becomes entangled with it.
The opposite approach is to just run Angular on every page. You can still do your account editing without it (typical form submissions, etc.), but loading your Angular app alongside should allow the router to catch links the way you want.
Related
I've been trying to solve the following challenge all day without any luck.
When going through forum posts I came across jQuery and AJAX which are both new concepts to me and which I'd rather skip for now, if possible.
I've got a partial, "navbar-left", which shows a list of all bank accounts in my model Account.
When the user clicks on one of the items in the list, all transactions of that account should be shown in the same page at the right. The partial below links to a new page which is not how I'd like it.
The navbar-partial:
<ul class="nav nav-pills nav-stacked">
<% #accounts.each do |account| %>
<li role="presentation"><%= link_to account.account_holder, account_mutations_path(account.id) %></li>
<% end %>
</ul>
Any tips on how to get this fixed is much appreciated!
The page with the navbar at the left
The mutations in a separate page instead of a partial
Either you're sending viewers to a new page, or dynamically loading content within their current page.
If the latter, then the only solution is AJAX.
Luckily, Ruby on Rails makes transitioning from one to the other very easy.
Here is a gist of how it works:
<%= link_to account.account_holder, account_mutations_path(account.id), remote: true %>
This was pointing back to some page previously (e.g. action.html.erb).
Because of remote: true, it's going to be sending JS directly to the browser instead of a new HTML page (e.g. action.js.erb in the same view folder and same action name).
Here we can control the behavior we want by rendering a partial using ERB and using JS to change the HTML content of some part of the page:
// action.js.erb
$('#some_element').html('<%= j render "partial" %>')
Which will insert the HTML of the partial directly into the JQuery that changes the content dynamically.
Where j is a shorthand for escape_javascript.
Without escaping, the Ruby output is interpreted as file output and newlines would break your JS.
Example JS output without escaping:
// Bad
$('#some_element').html('<span>Content</span>
<span>More Content</span>')
Example with escaping:
// Good
$('#some_element').html('<span>Content</span>\n<span>More Content</span>')
http://guides.rubyonrails.org/working_with_javascript_in_rails.html
https://launchschool.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails
There are more great examples online and even Railscasts.
Really AJAX is the best way to do this, and it's not as complicated as you might think. But if you really want to skip AJAX then your best approach is probably to load ALL transactions for all accounts, in different div's and then show or hide them based on which is clicked.
For a rudimentary introduction to this look at javascript tabs... you click on a tab, the appropriate information is shown.
http://www.w3schools.com/howto/howto_js_tabs.asp
You can do this very simply without ajax. The big difference would be - it's not the same page. One page would be the account#index (as you have now), the other page is the account#show page.
For the show page, use a very similar view as the index page, the left side would include the partial with one of the account li class="active" to highlight the account you are currently on. For the right side of the page, render the account mutations list items.
I'm trying to display someone's profile links to their social media profiles. My current code is
<p>
<strong>Linkedin:</strong>
<%= link_to #person.linkedin, #person.linkedin %>
</p>
It works and the link does load, but it goes to localhost:3000/user/linkedin.com/in/user instead of linkedin.com/in/username
Thanks!
You need to add make sure the linkedin hyperlinks have a protocol (http, https, etc).
Any link without a protocol is assumed to be a relative path, which is why the hyperlinks are getting appended to your website url.
A solution would be to manually add a "http://" string at the beginning of every person's linkedin hyperlink in your database. Your code should work fine after that.
Edit: Or you can change it on the fly like so (the other answers won't work since it looks like #person.linkedin contains the entire hyperlink not just the linkedin user)
<%= link_to #person.linkedin, "https://#{#person.linkedin}" %>
Rails link helpers follow the format:
link_to(name = nil, options = nil, html_options = nil, &block)
The second #person.linkedin path is a local path as determined by your routes file in your config folder. If the link you need follows a certain format you can do something like
<%= link_to "LinkTextHere", "http://www.linkedin.com/#{#person}/profile" %>
I can answer in more detail if you give me the exact outcome you need as well as what you want from the .linkedin value. Also, typing "rake routes" in your console will show all paths you currently have and can help troubleshoot issues like why #person.linkedin is routing locally.
I've been working with Ruby & RoR for a few weeks now and must say, this is a beautiful language, it's been very enjoyable to work with.
I'm hoping someone can point me in the right direction for an article that explains collecting user inputs on the frontend, everything I've found so far has been confusing.
Basically, I want to create an input field in a front end view that passes the result to my controller so I can feed it to an API wrapper.
In irb I can do this, but I don't understand the equivalent for a view that's accessible on the front end.
customeremail = gets.chomp
ticketfind = Desk.customers(:email => customeremail)
I don't necessarily need to store the data in a database, I'd almost rather prefer not to. Basically just need the input to pass off to the API, so I can redirect to a form which I'll submit to the API. I'm certain I can figure it out with some good links, I just don't think I'm googling the right thing.
Thanks for reading!
What you want is a simple form on your view...
<%= form_tag "/my_controller/my_action" do %>
<%= text_field_tag ":customer_email" %>
<%= submit_tag "Save" %>
<% end %>
This site explains about form_tag
http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html
And in your my_controller your my_action method...
def my_action
ticketfind = Desk.customers(:email => params[:customer_email])
Unlike Josh I prefer to use form helpers, but there's always more than one way to do it.
When forms are submitted in HTML they create a POST request to the server based on the URL you pointed the form to. The server picks up the POST request and maps it to the controller via your route map.
Ex:
<!-- This will POST form data to localhost:3000/users/create -->
<form action='users/create'>
<input type='text'/>
<input type='submit'/>
</form>
This should ping your server and route to UsersController#create. Rails stashes the form data in params
http://www.w3schools.com/tags/att_form_action.asp
I would recommend that you learn to do this without ERB first. Create a form with raw HTML so you can start to learn what's going on. You can use an ERB template, but only embed the variables in Ruby (e.g. don't use form helpers). You can then refactor to that (I personally prefer raw HTML over ERB heleprs). If you use Chrome or FF, you can open up the developer console and watch how the network requests work when you submit the form (I forget if this clears with each refresh or not, so you might not actually be able to do this in this example, but it's helpful in AJAX flows)
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 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