Hi I am stuck here pretty bad. The senario is quite simple actually, I have an input field like this:
%input.coupon_bar{:type => "text", :name=> "coupon", id=>"coupon_id"}/
And I want to pass whatever value is in that box to a different controller, I am trying to do it like this:
= link_to image_tag("ok_button.png", :border =>0), "/orders/new/", :coupon = #{$('.coupon_bar').val()}
I thought it would be simple using the jquery $('.coupon_bar').val() but I guess its not as simple as I thought... any help please????
Oh, and unlike This StackOverFlow Question, my input field is not part of any form...
Thanks in advance...
I see there two bad practices:
Don't hardcode your links
Avoid obstrusive js when possible
Here is what I suggest:
= link_to image_tag("ok_button.png", :border =>0), new_order_path, :id => "my_link"
And in your js:
<script type="text/javascript" charset="utf-8">
$().ready(function(){
$('#my_link').click(function(){
$(this).attr('href', $(this).attr('href') + '?coupon=' + $('.coupon_bar').val());
});
});
</script>
Why don't you just put it in a form? That would be much easier.
Anyway, you can use the onclick from the link to achieve your goal:
<a href="#" onclick="window.location.href = '/orders/new/coupon='+ $('.coupon_bar').val();">
Text</a>
Related
Maybe I've missed something, but I've found that it's quite difficult to show conditional attributes in rails. Many programmers use helper methods to achieve this, but it still seems like a tedious task. I wonder if anyone has an elegant method of achieving this.
To be clear, let's say we have some css component as below (this example comes from a github opensource css framework: https://primer.style/css/components/navigation), So how would I change an 'aria-current': 'page' attribute?
<nav class="UnderlineNav UnderlineNav--right">
<div class="UnderlineNav-body">
<a class="UnderlineNav-item" href="#url" aria-current="page">Item 1</a>
<a class="UnderlineNav-item" href="#url">Item 2</a>
<a class="UnderlineNav-item" href="#url">Item 3</a>
<a class="UnderlineNav-item" href="#url">Item 4</a>
</div>
</nav>
Finally, I solve it by a helper method as the follow. If you guys have some other simple way, please let me know. Many thanks.
def active_header_link(text, slug, options)
if current_page? slug
link_to text, slug, {'aria-current': 'page'}.merge(options)
else
link_to text, slug, options
end
end
then, just call it when necessarily like this
<%= active_header_link node.name, node_path(node.slug), class: 'UnderlineNav-item' %>
I have a page in my simple application that displays a calendar with the jQuery plugin http://fullcalendar.io/.
I want to add a link to the title such that the user gets navigated somewhere else to a different view. Is this possible? The calendar itself has poor documentation. Specifically I want to add a FontAwesome icon and have it redirect the user on click.
I know that customizing the title is pretty easy – just specify the custom title like this:
<div id="calendar"></div>
<script>
$('#calendar').fullCalendar({
header: {
left: 'prevYear,nextYear',
center: 'title',
},
titleFormat: '[Hello, World!]'
});
</script>
However, I am trying to add a link next to the calendar using a Rails helper link_to. Is this possible? Here is my attempt, but it does not work:
<div id="calendar"></div>
<script>
$('#calendar').fullCalendar({
header: {
left: 'prevYear,nextYear',
center: 'title',
},
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>']'
});
</script>
You have a typo on this line:
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>']'
There is an extra single quote after the %>. Try this:
titleFormat: '[<%= link_to '<i class="fa fa-icon"></i>'.html_safe, some_path %>]'
If you still have a problem after fixing that, try looking into what FullCalendar’s titleFormat property supports. I don’t know if FullCalendar tries to allow you to put arbitrary HTML into that property – that property’s docs don’t make it clear. You could check by looking in the rest of FullCalendar’s documentation or its source code that handles that property.
Your use of link_to and html_safe looks good to me.
I'm trying to create an image_tag and specify a data- attribute that does not have any value set to it. I'm trying to add data-tooltip, for use with Foundation 5 tooltips. It seems that if any value is actually set to this, Foundation uses the same tooltip text every time and ignores the title attribute of that element (so every tooltip will say whatever the first one you hovered on was... which seems buggy in and of itself on Foundation's part also)
This is what I need to generate:
<img src="[whatever]" title="My Tooltip" data-tooltip />
This will not work for me:
<img src="[whatever]" title="My Tooltip" data-tooltip="[insert anything here]" />
I have tried a number of different combinations, and read documentation, but it seems no matter what I put as the value, it ends up generating it like data-tooltip="null", or true, or false, or any string I pass.
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: true })
Try to pass in empty string as follows:
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: "" })
In Rails 4.1.4 using above tip :"data-tooltip" => '' renders data-tooltip without value.
For an attribute with no value like multiple <input multiple type="file">, you can override the attribute default name, by uppercasing and setting an empty string. For example input_html: { Multiple: '' } But this is a hack.
In rails 5, I was trying to add itemscope attribute with no value in the following link tag scenario:
<%= link_to example_path(#example) do %>
<span>
<%= #example.name %>
</span>
<% end %>
I needed the resulting html a tag to show the itemscope attribute without any value like so:
<a itemscope href="example/path">
<span>
some text
</span>
</a>
Notice the itemscope has no ="" or itemscope="itemscope".
I tried solutions from SO and other places and the only thing that worked for me was adding the following to the link_to tag: " itemscope" => ''. Notice the space between the first double quote and the word itemscope.
This seems to generate the desired outcome and also validated as schema.org tag on google (that is what i used the tag for).
I have a BlogPost resources, where in BlogPost 'show' screen, I want a "new comment" button to be displayed and only on clicking that button I want the new Comment template to be rendered into the same page. I would like to use ajax concept to do this. How do I do this?
NOTE: I have BlogPost and Comment as seperate resources(plural)
Resources I've defined in my routes looks like this:
map.resources :blog_posts, :has_many => :comments
EDIT: For a better idea, the 'add comment' link just below a question in stackoverflow
I think all you need to do is render the comment box (the HTML markup) on page load but give it a CSS rule to be hidden ( <div id='comment' style="display:none"> ... comment markup ... </div> ). Then add a link just above or below that div to show the div and hide the "add comment" link using js (like jquery).
Something like this:
<script type='text/javascript'>
function fade_some_stuff(){
$('#comment_link').click( function(){ $('#comment').fadeIn(); $('#comment_link').fadeOut(); });
}
</script>
<a href="#" id='comment_link'>add comment</a>
<div id='comment' style="display:none;">
...
</div>
I believe you need something like this... http://jqueryui.com/demos/dialog/#modal-form
Please go through the documentation provided at the bottom to implement this in your App.
Good Luck!
How do I create a link of this type:
<a href="#" onclick="document.getElementById('search').value=this.value">
using method link_to in Rails?
I couldn't figure it out from Rails docs.
You can use link_to_function (removed in Rails 4.1):
link_to_function 'My link with obtrusive JavaScript', 'alert("Oh no!")'
Or, if you absolutely need to use link_to:
link_to 'Another link with obtrusive JavaScript', '#',
:onclick => 'alert("Please no!")'
However, putting JavaScript right into your generated HTML is obtrusive, and is bad practice.
Instead, your Rails code should simply be something like this:
link_to 'Link with unobtrusive JavaScript',
'/actual/url/in/case/javascript/is/broken',
:id => 'my-link'
And assuming you're using the Prototype JS framework, JS like this in your application.js:
$('my-link').observe('click', function (event) {
alert('Hooray!');
event.stop(); // Prevent link from following through to its given href
});
Or if you're using jQuery:
$('#my-link').click(function (event) {
alert('Hooray!');
event.preventDefault(); // Prevent link from following its href
});
By using this third technique, you guarantee that the link will follow through to some other page—not just fail silently—if JavaScript is unavailable for the user. Remember, JS could be unavailable because the user has a poor internet connection (e.g., mobile device, public wifi), the user or user's sysadmin disabled it, or an unexpected JS error occurred (i.e., developer error).
To follow up on Ron's answer if using JQuery and putting it in application.js or the head section you need to wrap it in a ready() section...
$(document).ready(function() {
$('#my-link').click(function(event){
alert('Hooray!');
event.preventDefault(); // Prevent link from following its href
});
});
just use
=link_to "link", "javascript:function()"
another solution is catching onClick event and for aggregate data to js function you can
.hmtl.erb
<%= link_to "Action", 'javascript:;', class: 'my-class', data: { 'array' => %w(foo bar) } %>
.js
// handle my-class click
$('a.my-class').on('click', function () {
var link = $(this);
var array = link.data('array');
});