I want to use a Twitter Bootstrap popover to display a user avatar and email address, with the possibility of adding in more details at a later date.
I am having an issue getting the partial to render inside the content field of the link. The view code is below (in HAML).
%span.comment-username
=link_to comment.user_name, "#", "title" => comment.user_name,
"data-content" => "=render 'users/name_popover'",
class: "comment-user-name"
Currently, this will only produce the content code as a string.
Is there a way to do this so the partial will be inserted instead of the code as a string?
You want rails to actually evaluate the content of the string and not just show the string. The easiest way to do that would be:
%span.comment-username
=link_to comment.user_name, "#", "title" => comment.user_name,
"data-content" => "#{render 'users/name_popover'}",
class: "comment-user-name"
That should pass the render statement to rails and render your partial as expected.
Thanks for the answer jrc - it helped me find a solution.
My solution might be useful for other non HAML people like me:
`<%= link_to('Service History' , '#', :class => "popover-history", :rel => "popover", :"data-placement" => "bottom", :title => "Service History", :"data-content" => "#{render 'services/service_history'}") %>`
with
`$(function () {
$('.popover-history').popover({ html : true });
});`
Related
I'm trying to convert a working HTML dialog that I created into something more aesthetically pleasing via Twitter Bootstrap (the seyhunak version). I have the following two dialogs running so far:
<td><%= (#it_staff ? link_to(report.name, edit_report_path(param),
:data => { :confirm => message}) : report.name) %></td>
<td><%= (#valid_person? link_to(t('.edit', :default => t("helpers.links.edit")),
edit_report_path(report), :class => 'btn btn-mini', :data => { :confirm => message}) : "") %>
As you can probably derive, "message" gets displayed via a hyperlink and a button. I've been browsing http://getbootstrap.com/components/#alerts but I can't figure out how to implement it here. Any help is appreciated!
You probably want to use bootstrap alerts.js plugin as opposed to a simple alert component. http://getbootstrap.com/javascript/#alerts
Not sure if you want something inline or as an overlay but you may want to look at popover.js or modal.js
I can not render the html placed inside my yml file as data attribute of a generic popover . I'm going to render the text field in this way:
= f.text_field :link_url, :class => "span6 popoverable", :data => {:content => t("popover.campaign.link_url.message"), :original_title => t("popover.campaign.link_url.title")}, :placeholder => "URL link to your song, fan page, site"
and in yml file I have:
en:
popover:
campaign:
link_url:
message: "Description.<br><b>Example:</b> <i>http://yoursite.com/</i>"
title: "Title"
but the output is not the html code but the plain versione containing the html tag.
I tried with raw and .html_safe but i always get the same result.
t(:string).html_safe
raw(t(:string))
How can i fix this?
Thank you
Did you try setting the :html => true option on the Bootstrap .popover?
http://twitter.github.io/bootstrap/javascript.html#popovers
You do the same via sanitizing the content. Please go this documentation : http://api.rubyonrails.org/classes/ActionView/Helpers/SanitizeHelper.html
may be this would help you.
After I install colorbox-rails
**followed the directions on this page: http://rubydoc.info/gems/colorbox-rails/0.0.9/file/README.rdoc
**here is what the readme says to use for the link_to
<%= link_to "My superb link", "#", :data => { :colorbox => true } %>
I added this to my link_to
:data => { :colorbox => true }
it works does a popup, but I can't get it to link to the content I want. It will display either the page you are on in the colorbox or an error message "This content failed to load."
I am trying to get a contact form in the colorbox.
I am running Rails 3.2.8
Do
<%= link_to "My superb link",show_contact_path(#contact.id), :data => { :colorbox => true } %>
Edit
You can also do
// Called directly, without assignment to an element:
$(".myElement").colorbox({href:"thankyou.html"});
// Called directly with HTML
$(".myElement").colorbox({html:"<h1>Welcome</h1>"});
http://www.jacklmoore.com/colorbox
Just make sure you create the selector for the element class="myElement"
Also (credit to One Two Three)
If the link is external (ie., going to site other than your own
application's), you'd need to specify the iframe attribute as follows
:colorbox_iframe => true
Trying to figure out how to use haml "link_to" with Ruby code in order to make an image on a page link to another page on the site. If possible I'd like to keep the nav static and fade the two pages in and out via a "Forward" and "Back" image. Any ideas? Just want to get the linking right first and then can go in and figure out the JQuery. Currently have the code below...
Thanks!!
.pad-bottom50
%div{:style => "position: absolute; top: 620px; left: 830px;"}
=link_to (image_tag(#page.photos[1].image_url(:full), :id => "#fade1", :class => "animated") if #page.photos[1].image?
.pad-top20
Syntax of link_to is
=link_to link_text, link_url, options
You missed the link_url. ie. to where the user should be taken when clicking on the image.
Here is a working example
=link_to(image_tag("http://goo.gl/FZUI3"), "http://en.wikipedia.org/wiki/Nyan_Cat", :id => "#fade1", :class => "animated")
You are not specifying the src for the link.
The syntax is:
link_to "Link Text", "/path-to-link"
To put an image in there:
image_tag "path-to-image"
link_to(image_tag("path-to-image"), "/path-to-link")
This code will make an image wrapped by a link pointing to /bacon if #page.photos[1].image?
link_to(image_tag(image_tag(#page.photos[1].image_url(:full), :id => "#fade1", :class => "animated")), "/bacon", :id => "bacon", :class => "bacon") if #page.photos[1].image?
You should first look at the parameters of a link_to tag . You will get to know about the parameters and what you can do with those parameters .
check this link
api doc
You can check all paramters of a method avilable in API Ruby on Rails
I have a rails app with working reports that have tags. In the Report/Index.html.erb I want the user to be able to sort the reports by selecting a tag. They may only select one tag at a time so I feel that a select box would work best. I currently have this:
<%= select("preferences", :tag_with,
["Politics", "Technology", "Entertainment", "Sports", "Science", "Crime",
"Business", "Social", "Nature", "Other"], :prompt => "Filter Feed by:" )%>
I have a working preferences controller with a method call tag_with that updates the current tag. This code, however, only generates the select box. I want it to be that when the user selects one of the tags, it calls the tag_with method from the preferences controller.
I generated a series of link_to lines that complete the task, however I would really like a select box.
<%= link_to "Politics", :action => "tag_with", :tag => "Politics", :controller =>"preferences" %>
<%= link_to "Entertainment", :action => "tag_with", :tag => "Entertainment", :controller =>"preferences" %>
<%= link_to "Science", :action => "tag_with", :tag => "Science", :controller =>"preferences" %>
<%= link_to "Technology", :action => "tag_with", :tag => "Technology", :controller =>"preferences" %>
And so on for each tag. This works fine but is bulky and undesirable. Is there a way to do the same thing through a select box?
In your reports.js.coffee file, or whatever other js file you want.
jQuery ->
$('select#preferences').change ->
$.get 'preferences/tag_with',{ term: $('option:selected', this). val() }
Or, if you want to use regular javascript:
$(function(){
$('select#preferences').change( function() {
$.get('preferences/tag_with',{term: $('option:selected',this).val()});
});
});
A link is a GET request. The jQuery .change() method fires whenever someone makes a change. The $.get method sends a GET request to a URL and can pass data (the second argument). This data becomes your params hash, so in the example above you would get:
params[:term] #=> the value attribute of whatever option was selected by the user
See the jQuery docs on .change() and $.get() for more help.
Update
For this to refresh the page, the easiest thing would be to extract the table that you want changed into a partial, let's assume it's called _report.html.erb. The partial should look something like this:
<div id="report">
<%= render #report %>
</div>
*Note: render #report is just short for render :partial => 'report'. See http://guides.rubyonrails.org/layouts_and_rendering.html*
In your preferences controller, tag_with option you should be sure to set the #report object (or whatever else is delivering the data to your partial).
Then you should make a file called views/preferences/tag_with.js.erb and put something like this in it:
$('div#report').html('<%= escape_javascript( render #report ) %>');
This will update the report container with the new content.