I have inserted a test toggle button ( pasted from demo)
#menu1.dropdown
%a.dropdown-toggle{:'data-toggle' => "dropdown", :href => "#menu1"}
Options
%b.caret
%ul.dropdown-menu
%li
= link_to "Action", "#"
%li
= link_to "Another action", "#"
%li
= link_to "Something else here", "#"
%li.divider
%li
= link_to "Separated link", "#"
The button is displayed but all options are visible and no toggle happen at all
The button-toggle.js plugin is present ( checked in assets ) and I already added into my application js file
$(document).ready ->
$('.dropdown-toggle').dropdown()
It's very strange , because at the top of my page , in the navigation bar , I already have a dropdown button to select the site language ... and this one is working fine ... ( displaying both the languages and flags )
.btn-group{:style => "margin-top: 4px; float:right;"}
%a.btn{:'data-toggle' => "dropdown", :href => "#", :id => "babLocaleSelect"}
%span.babFlag{:class => "babFlag-#{I18n.locale}"}= I18n.locale.to_s
= I18n.t(I18n.locale)
%a.btn.dropdown-toggle{:'data-toggle' => "dropdown", :href => "#"}
%span.caret
%ul.dropdown-menu.bablevel-content
- other_backoffice_languages.each do |language|
%li.babLocale
%a{:href => backoffice_language_path(:locale => language), :id => "#{language}_language_link" }
%span.babFlag{:class => "babFlag-#{language}"}= I18n.t(language)
= I18n.t(language.to_sym)
I tried also to debug , inserting
$(".dropdown-menu").click (event) ->
alert 'dd clicked'
this is triggered by BOTH menus so it's installed but the second is open and never toggle
Nothing related to Twitter-bootstrap ..
I tried to move the toggle-button in other places of my template , first in my top nav bar as the first one is running, and this test runs well...
I place it in another part of the template , same results : it runs ...
so I looked into the class used for this button : .pagination , which is the class also used by Kaminari paginator ... I get rid of this class ... and it runs !!
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
Guys I have the following action on my controller to send emails to my users.
def email_all_users
User.all.each do |u|
if !u.information.nil?
if !u.information.business
UserMailer.candidate_email(u).deliver
else
UserMailer.business_email(u).deliver
end
else
UserMailer.no_info_email(u).deliver
end
end
redirect_to "/users/#{current_user.id}", :flash => { :success => "Los correos fueron enviados" }
end
And here is the link in my view
<%= link_to "Enviar Correos".html_safe, {:controller => "users", :action => "email_all_users"}, :method => "get", :id => "email_users", :html => {:style => "color:#FAA732;" }, :remote => true %>
<span id="loading" style="color:rgb(41, 160, 41);display:none;"><i class="icon-spinner icon-spin"></i> Enviando</span>
<span id="send" style="color:rgb(41, 160, 41);display:none;"><i class="icon-ok-circle"></i> Enviado!</span>
I create this file email_all_users.js.erb with this content
$('#email_users').hide();
$('#email_users').ajaxStart(function() {
$('#loading').show();
});
$('#email_users').ajaxComplete(function() {
$('#loading')..hide();
$('#send')..show();
});
As you can see after click in the link I want hide the link and show and image that I have in my loading span (loading is the id), then when the action finish I want to hide the loading and show my send span (send is the id of the span).
What I'm doing wrong because when I click the app send the emails, but does not hide the link and don't show the loading and the send.
Thanks in advance for your help
SOLUTION
I move my email_all_users.js.erb to my assets folder and I changed it like this:
$(document).ajaxStart(function() {
$('#email_users').hide();
$('#loading').show();
});
$(document).ajaxComplete(function() {
$('#loading').hide();
$('#send').show();
});
Problem solve.
Thanks anyway.
Those ajax calls need to go into a regular js file, not as a response to the action. When this code is getting called the ajax reques has already completed.
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
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.