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
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
Spinning my wheels trying to figure this out. I have a link that when clicked retrieves a form from the server. The form has 3 buttons and 1 text input. I'm trying to get the non-submit buttons to respond to JS which they don't do after the form is returned from the server.
I've create a function in lists.js which the ajax:success is trying to call, but I'm not doing something right. I've tested the function in lists.js and I know it works, I'm just not calling it right.
Here are the relevant files. How do I activate the showPicturePicker function so it can be used after the AJAX response is inserted?
Lists.js
$("#new_list")
.bind "ajax:success", (evt, xhr, settings) ->
$("#list-item").html(xhr)
showPicturePicker
showPicturePicker = () ->
$('#picture').click (e) ->
e.preventDefault()
alert "yeah, you figured it out"
$(document).ready showPicturePicker
_new.html.haml (the form returned from the server)
= form_for [#list, #item], :remote => true, :html => {:class => 'form-inline'} do |f|
.input-append
= f.text_field "name", :class => 'input-large', :placeholder => "Add item to this list"
%button#picture.btn
%span.icon-camera
%button#link.btn{:style => "font-size: 10px;"}
http://
.secondary-fields{:style => "display: none"}
.field.margin
= f.text_field "link", :placeholder => "http://www.link.com", :style => "width: 325px"
.field.margin
= f.file_field "picture"
= f.hidden_field "picture_cache"
.clearfix
= link_to "blah", "#{}", :class => "fuck-me"
= f.submit "Add Item", :class => 'btn', :id => "add-item"
This is a problem i'll need to solve in other places as well and I appreciate the help.
application.js is wrapped with an IIFE (immediately invoked function expression) and variables defined there will not be visible in other files unless you explicitly make them available to the global scope (either by attaching them to window or some other object).
In application.js, try:
#showPicturePicker = ->
...
# or window.showPicturePicker = ->
"Although suppressed within this documentation for clarity, all CoffeeScript output is wrapped in an anonymous function: (function(){ ... })(); This safety wrapper, combined with the automatic generation of the var keyword, make it exceedingly difficult to pollute the global namespace by accident."
http://coffeescript.org/#lexical_scope
How can I add hash map element with a key that contains "-"?
Like this:
<%= button_to_function 'Cancel','cancelRemove("cancelEmail")', :data-dismiss=>'modal', :class=>'btn' %>
I get an error:
undefined local variable or method 'dismiss' for #<ActionView::Base:0x3482fed>
While :'data-dismiss' works, with data attributes you can also do
:data => { :dismiss => 'modal' }
Additional data-prefixed html attributes can be included in the same hash. So for example on another link you might do:
:data => { :remote => true, :method => 'delete' }
which would add to the link the html attributes data-remote="true" data-method="delete".
While the hash syntax is less compact for a single attribute, it's nice when you've got more than one html5 data attribute. And it's arguably a bit more rails-ish.
Just rename it to:
<%= button_to_function 'Cancel','cancelRemove("cancelEmail")', :'data-dismiss'=>'modal', :class=>'btn' %>
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 });
});`
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.