I'm having trouble with an odd :delete method behaviour for links. I configured a devise sign_out route, which is linked in a dropdown box. When clicking that link, it leads to a route error (No route matches [GET] "/users/sign_out").
The strange thing is, that when I copy that link to another position in the navigation bar, it works perfectly.
The RoR navbar code is:
<div class="container nav-collapse">
<ul class="nav">
<li class="active">
<%= link_to t('activeview.navigation.home'), home_index_path %>
</li>
<li>
<%= link_to t('activeview.navigation.sign_in'), new_user_session_path %>
</li>
<li>
<%= link_to t('activeview.navigation.sign_up'), new_user_registration_path %>
</li>
<li><%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :delete %></li>
<li class="dropdown">
<% if user_signed_in? %>
<%= link_to (current_user.email + ' <span class="caret"></span>').html_safe, '#', {
:class => 'dropdown-toggle',
'data-toggle' => 'dropdown' } %>
<ul class="dropdown-menu">
<li><%= link_to t('activeview.navigation.settings'), edit_user_registration_path(current_user) %></li>
<li class="divider"></li>
<li><%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :delete %></li>
<% else %>
<%= link_to (t('activeview.navigation.not_connected') + ' <span class="caret"></span>').html_safe, '#', {
:class => 'dropdown-toggle',
'data-toggle' => 'dropdown' } %>
<% end %>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
My application.js looks as follows:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .
Below is my navigation bar. The case is that sign_out_1 works perfectly, but sign_out_2 uses the GET method instead of DELETE.
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Brand</a>
<div class="container nav-collapse">
<ul class="nav">
<li>sign_out_1</li>
<li class="dropdown">
mail#hotmail.com <span class="caret"></span>
<ul class="dropdown-menu">
<li>Configuración</li>
<li class="divider"></li>
<li>sign_out_2</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
My destroy route is:
destroy_user_session DELETE /users/sign_out(.:format) devise/sessions#destroy
Finally, the .js loading section is:
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>
A quick workaround is to change sign_out to use HTTP GET instead of HTTP DELETE in ./config/initializers/devise.rb
# The default HTTP method used to sign out a resource. Default is :delete.
config.sign_out_via = :get
And then change calls to sign_out to send GET as well:
<%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :get %></li>
it's js bug of twitter bootstrap, and it's fixed at https://github.com/twitter/bootstrap/commit/3568146b28e3eb22e4347062b1e4f923f87daeb8
also see https://github.com/trimentor/foundation/commit/f5ab92cdcc536032f7f6bd7abf991efc92781005
Related
I'm trying to iterate over my database in EJS, and render them as an Accordion. There are 2 issues here. When I expand an individual accordion, they all expand. To solve this I tried to assign a unique id (by assigning a variable 'i' and then incrementing it at the end of the loop). But this also doesn't seem to work. Not sure what I'm doing wrong here.
Below is my EJS template code.
<% for(let li of list) { %>
<% let i = 0; %>
<div class="accordion" id="accordionExample<%=i%>">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne<%=i%>">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne<%=i%>" aria-expanded="true"
aria-controls="collapseOne<%=i%>">
<%= li.title %>
</button>
</h2>
<div id="collapseOne<%=i%>" class="accordion-collapse collapse"
aria-labelledby="headingOne<%=i%>" data-bs-parent="#accordionExample<%=i%>">
<div class="accordion-body">
<%= li.body %>
</div>
</div>
</div>
</div>
<% i++;%>
<% } %>
Are you using Bootstrap ?
Can you inspect and see what id is being added to accordian content div after render. More info is needed to solve this as I can't figure it out.
The data-target of the button should match with the id of the content div. Please verify this and reach again.
i think the problem that you put the " i " variable inside the for loop so every loop it starts to assign a new ' i ' variable with a start value of '0'
so i beleive the right way to do that is like that :-
<% let i = 0; %>
<% for(let li of list) { %>
<div class="accordion" id="accordionExample<%=i%>">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne<%=i%>">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne<%=i%>" aria-expanded="true"
aria-controls="collapseOne<%=i%>">
<%= li.title %>
</button>
</h2>
<div id="collapseOne<%=i%>" class="accordion-collapse collapse"
aria-labelledby="headingOne<%=i%>" data-bs-parent="#accordionExample<%=i%>">
<div class="accordion-body">
<%= li.body %>
</div>
</div>
</div>
</div>
<% i++;%>
<% } %>
I'm still a Rails beginner, and still have a lot to learn.
Currently, I can display all the images at once, no problem:
<!-- For the Thumbnail strip -->
<% #examples.each do |e| %>
<ul class="example-grid"><%= e.description %></ul>
<% if e.image.url != "/images/original/missing.png" %>
<p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
<% end %>
But I want to first show the image of #examples[0] and from there, have two link_to or button_to paths to show #example[current + 1]. Something like that.
How does this work?
Thank you SOF community!
You can use Jquery Sliders, image slide show plugins
Image Slide show demo link
try bootstrap carousel and genertate the html like you are doing now:
http://getbootstrap.com/javascript/#carousel
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<% #examples.each_with_index do |e, index| %>
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="<%= index %>" class="<%= if e.primary ? "active" : "" %>></li>
</ol>
<% end %>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% #examples.each do |e| %>
<div class="item active">
<% if e.image.url != "/images/original/missing.png" %>
<p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
I'm using twitter bootstrap in a rails 3 project, and having trouble getting the flash message to show on successful post creation.
Here is the code - can you let me know what I'm doing wrong??
Thanks,
Faisal
POSTS CONTROLLER
def create
#post = Post.new(params[:post])
#post.user = current_user
respond_to do |format|
if verify_recaptcha && #post.save
format.html { redirect_to '/home'}
format.json { render :json => #post, :status => :created, :location => #post }
flash[:notice] = "Thank you, your request has been submitted."
else
format.html { render :action => "new" }
format.json { render :json => #post.errors, :status => :unprocessable_entity }
end
end
end
APPLICATION.HTML.ERB VIEW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The little chits that ended 3 years of unemployment for me.</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag "application", :media => 'all' %>
<link href="images/favicon.ico" rel="shortcut icon">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="/home">LittleChits</a>
<div class="container nav-collapse">
<ul class="nav">
<li><%= link_to "Home", "/home" %></li>
<li><%= link_to "How it Works", "/howitworks" %></li>
<li><%= link_to "About Us", "/thestory" %></li>
<li><%= link_to "Plans & Pricing", "/posts/new" %></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<div class="content">
<div class="row">
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
<%= yield %>
</div><!--/row-->
</div><!--/content-->
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<%= javascript_include_tag "application" %>
</body>
</html>
Make sure something like this is in your view (e.g. views/application.html.erb)
<% flash.each do |name, msg| %>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
<% end %>
Am working on my first Rails app, and cannot get my image file (logo.png) to display in the browser at the localhost:3000/pages/home page. The image is held in the public/images/logo.png file in my Rails app. Any idea why it might not be showing?
Here is the code:
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/trunk/html5.js"></script>
<![endif]-->
<%= stylesheet_link_tag 'blueprint/screen', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print', :media => 'print' %>
<!--[if lt IE 8]><%= stylesheet_link_tag 'blueprint/ie' %><![endif]-->
<%= stylesheet_link_tag 'custom', :media => 'screen' %>
</head>
<body>
<div class="container">
<header>
<%= image_tag("logo.png", :alt => "Sample App", :class => "round") %>
<nav class="round">
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
<section class="round">
<%= yield %>
</section>
</div>
</div>
</body>
</html>
Added source in container in :
<div class="container">
<header>
<img alt="Sample App" class="round" src="/images/logo.png" />
<nav class="round">
<ul>
<li>Home</li>
<li>Help</li>
<li>Sign in</li>
</ul>
</nav>
</header>
<section class="round">
<h1>Sample App</h1>
<p>
This is the home page for the
Ruby on Rails Tutorial
sample application.
</p>
Sign up now!
</section>
</div>
</div>
you will need to specify the link like
"/images/logo.png"
or there are also ways to create short path rules if the images is used more often
In regular views you can access images in the public/assets/images directory like this:
<%= image_tag "rails.png" %>
On my show page from a scaffold I have the following design:
<div id="show_location_main_area" class="grid_24">
<p>
<strong><%= #business_location.website %></strong>
</p>
<p>
<strong><%= #business_location.address %></strong>
</p>
</div>
<div class="grid_5">
<%= gmaps(#json) %>
</div>
If #business_location.address is blank I don't want to show this part on the page:
<div class="grid_5">
<%= gmaps(#json) %>
</div>
How is this done?
Thank you.
You can try following conditions -
unless #business_location.address.nil?
unless #business_location.address.empty?
if #business_location.address
Example -
<% unless #business_location.address.nil? %>
<div class="grid_5">
<%= gmaps(#json) %>
</div>
<% end %>
Just don't include it at all:
<% if #business_location.address.present? %>
<div class="grid5">
<%= gmaps(#json) %>
</div>
<% end %>
Or, if you need the .grid5 <div> there for your HTML/CSS to work:
<div class="grid5">
<% if #business_location.address.present? %>
<%= gmaps(#json) %>
<% end %>
</div>