I try to make a complete DIV as a link, but it is just working. This is what I have:
= link_to (user_orders_path(current_user)) do
.current_orders.box.tile.one_third.lightblue
.count
%i.icon-shopping-cart
=#current_orders
.link
- if #current_orders > 0
= link_to t('.current_orders'), user_orders_path(current_user)
- else
= t('.no_current_orders')
But somehow Rails is making it as:
<div id="current_orders" class="box tile one_third lightblue">
<a href="/users/1/orders">
<div class="count">
<i class="icon-shopping-cart"></i>
3
</div>
</a>
<div class="link">
Open bestellingen
</div>
</div>
What am I doing wrong? It should be generated as:
<a href="/users/1/orders">
<div id="current_orders" class="box tile one_third lightblue">
<div class="count">
<i class="icon-shopping-cart"></i>
3
</div>
<div class="link">
Open bestellingen
</div>
</div>
</a>
The first thing I see is that you have a link nested within a link, which will not work.
It sounds like the behavior you want is a link (1) that is only present if there are current_orders (just show a message if there are not), and (2) where the clickable area is the entire div. Is this correct?
If so, (1) use your if statement to conditionally render your div, and (2) place the div inside an ‘%a’ tag like so. Maybe something like this:
-if #current_orders > 0
%a{:href => user_orders_path(current_user)}
.current_orders.box.tile.one_third.lightblue
.count
%i.icon-shopping-cart
=t('.current_orders')
=#current_orders
- else
.current_orders.box.tile.one_third.lightblue
=t('.no_current_orders')
Related
I am very new for rails and I try to open an modal in my app. Here is my show.html.erb
app > views> event > show.html.erb
<div>
<button class="btn btn-info slide-down-right-drawer-btn" data-slide-block-id="#discussion-drawer">
<i class='ion ion-chatbubbles icon mr-5'></i>Discuss
</button>
</div>
This is my app > views > event > _discussion_drawer.html.erb
<div id="discussion-drawer">
<div class="col-md-12 col-sm-12 col-xs-12" style="line-height: 50px;">
<ol class="breadcrumb">
<li>Discussions</li>
<li class="active"><%= #co["name"] %></li>
</ol>
<button type="button" data-toggle="modal" data-target="#discussionFormModal" data-entity-id="<%= #co["id"] %>" class="btn btn-conf add-note-btn btn-info mb-20" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<b>Start new discussion...</b>
</button>
</div>
</div>
But this is not work. Am I doing right? Can any one help me for this?
It's not super clear which is the modal you're trying to open and where is the button to toggle it, but it took me a few tries to get comfortable with this too.
Make sure the ID on your modal matches the ID on the button
# this is on your button
data-toggle="modal" data-target="#discussionFormModal"
# this is on the modal
id="discussionFormModal"
Check that you've rendered the partial (_whatever_the_name_is.html.erb) properly in the same page that the button to open the modal is
<%= render partial: "<path to your partial>", locals: {<any variables that you need to pass to the modal>} %>
#example
<%= render partial: "shared/discussion_form", locals: {discussion: #discussion} %>
I think your HTML code is correct but bootstrap js is not loaded properly. you can simply check using browser inspect.
Make sure that your bootstrap.min.js loaded properly in rails app. you can also use CDN https://getbootstrap.com/docs/4.5/getting-started/download/
or
If you are using bootstrap gem follow https://robrace.dev/integrating-bootstrap-4-in-rails-6/ this article
I'm working on restructuring my code to clean it up and I'm trying to move over into using view helpers to do this. Right now I have the following in my views file:
<div class="btn-group wkt-btn-group">
<button type="button" class="btn share dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">SHARE
<span class="fa fa-angle-down" style="font-size:16px;"></span>
</button>
<ul class="dropdown-menu wk-social">
<li>
<div class="jssocials-share jssocials-share-email">
Print
<i class="jssocials-share-logo"></i>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-email">
<a href="mailto:?Subject=Book Subject&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://url.com/books/<%= book.book_name %>" class="jssocials-share-link">
<i class="fa fa-at jssocials-share-logo"></i><span class="jssocials-share-label">E-mail</span>
</a>
</div>
</li>
<li>
<div class="jssocials-share jssocials-share-facebook fb-share-button" id="fbid">
<div data-href="http://url.com/books/<%= book.book_name %>" data-layout="button" data-size="small" data-mobile-iframe="true">
<a class="fb-xfbml-parse-ignore jssocials-share-link" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.url.com%2Fsomebooks%2Fbooks%2F<%= book.book_name%>&src=sdkpreparse">
<i class="fa fa-facebook jssocials-share-logo"></i><span class="jssocials-share-label">Share</span>
</a>
</div>
</div>
</li>
The only thing I can think of to alter this to a view helper is to go to books_helper.rb and do something like:
module BooksHelper
def social_sharing (media)
when 'email'
content_tag(:div, class: 'jssocials-share jssocials-share-email')
end
end
I've barely scratched the service here but I feel as even that is incorrect. I've nothing that's looking for the media type so email is worthless. Plus there's a div class around the href I'm hitting but the href has it's own class and an onclick plus styling. Any nudge would be appreciated. I have never built out a custom view helper.
You could pass a block...
<%= social_sharing 'email' do %>
Print
<i class="jssocials-share-logo"></i>
<% end %>
And define your helper method as...
module BooksHelper
def social_sharing(media, &block)
case media
when 'email'
content_tag :div, class: 'jssocials-share jssocials-share-email', &block
end
end
But I think that might just make your code more obscure even if it does DRY up the jssocials classed divs. I highly recommend "99 Bottles" by Sandi Metz which amongst other things talks about producing clear, maintainable code.
https://www.sandimetz.com/99bottles/
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
Question about Rails4, I trying to retrieve the "Find Stuff" variable, in the erb form. This
is a search field, using zurb foundation - so the extra styling annotations floating around.
I don't have a model as this is just a form for reading the search input field - which is
in the tag, with placeholder as "Find Stuff".
To use normal Rails4 terminology, I would
like to pass the value of the "Find Stuff" field to the salutation controller, and I tried
many ways, but was unsuccessful, when I used render params[:post].inpect, it shows nil -the
variables that I pass to the controller, on clicking on the "Search" link_to, link. I tried adding an id field to the tag, and that too showed nil on render params[:post].inspect.
Any help, thanks in anticipation.
hello.html.erb form below.
<html>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>Hello World!</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<ul class="right">
<li class="has-form">
<div class="row collapse">
<div class="large-8 small-9 columns">
<input type="text" placeholder="Find Stuff" >
</div>
<div class="large-4 small-3 columns">
<%= link_to "", :controller =>
'salutation', :action =>'hello',
:class=>"alert button expand" %>
</div>
</div>
</li>
</ul>
</section>
</nav>
</body>
</html>
Controller follows
Salutation Controller follows
class SalutationController < ApplicationController
def new
#test = ''
end
def hello
#message = 'Hello World!'
#test = params[:Find_Stuff]
end
end
Wrap your search box in a form element, give your input a name and away you go. You can use the rails form helpers as well - see http://guides.rubyonrails.org/form_helpers.html which has a nice intro to creating a search form
<div class="row collapse">
<%= form_tag("/salutation/hello", method: "post") do %>
<div class="large-8 small-9 columns">
<%= text_field_tag(:find_stuff) %>
</div>
<div class="large-4 small-3 columns">
<%= submit_tag("Search") %>
</div>
<% end %>
</div>
Further to #slapthelownote's answer, the reason you're getting an error is because you're not passing any params to your controller
We've got something like what you want working at http://firststopcosmeticshop.co.uk (top search box) -- using a form_tag
If you want to see live code, I'll be happy to post!
Params
Using a form allows you to set various variables & then submit them to the controller as you've set them. I'd recommend using the form in the other answer, but to understand how it works, you need to read up on the Rails forms tutorial
Basically, the params hash is populated in the middleware of Rails -- from any data sent by HTTP to your backend
With links, you can only send GET params (domain.com/route¶ms=value), whilst with HTML forms, you can set POST params which are passed through the browser (not the URL)
I have a list of products and I want to show an ad in the product feed.
I want something like:
<div id="container">
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
</div>
<div id="add">
Adsense Stuff
</div>
<div id="container">
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
<div id="product">Bla..</div>
</div>
In ERB, I would have:
<div id="container">
<% productes.each_with_index do |product,index| %>
<div id="product"><%= product %></div>
<% if index == 2 %>
</div>
<div id="add">
Adsense Stuff
</div>
<div id="container">
<% end %>
<% end %>
</div>
How you translate this to Haml or Slim?
I don't want to break the loop in two loops for two reasons: I don't know the products count by page and I have some more elaborate code which uses the same HTML tricks with the Rails cycle() helper. So, it will help me a lot to find a trick to make it possible.
Haml lets you write raw HTML as output when you want it. Although weird, you can use this to achieve your goals here, as you did with Erb:
TEMPLATE = '
.container
- products.each_with_index do |product,index|
- if index == 2
</div>
<div class="ad">AdSense Stuff</div>
<div class="container">
.product<
= product
'
require 'haml'
products = %w[ cat box kitten shoes hounds ]
puts Haml::Engine.new(TEMPLATE).render binding
#=> <div class='container'>
#=> <div class='product'>cat</div>
#=> <div class='product'>box</div>
#=> </div>
#=> <div class="ad">AdSense Stuff</div>
#=> <div class="container">
#=> <div class='product'>kitten</div>
#=> <div class='product'>shoes</div>
#=> <div class='product'>hounds</div>
#=> </div>
The indentation looks weird, but you can see that you have two containers with the AdSense stuff outside either.
In HAML
-products.each_with_index do |product,index|
.product= product
-if index == 2
.ad= Adsense Stuff
I wouldn't bother with the container, just set up the css to deal with the product and ad classes. (Which also brings up the fact that you have multiple ids of the same name, these should be changed to classes).
- products.each_with_index do |product,index|
.product
= product
- if index == 2
.ad= Adsense Stuff
This should do it?
A possible Haml solution, using the surround helper:
.container
-products.each_with_index do |product,index|
.product=product
-if index == 2
=surround "</div>", "<div class='container'>" do
.add
Adsense stuff
This is a bit of a hack, in that we're "faking" closing and opening the container div; as far as Haml knows we're still in it. For this reason it also introduces a bit of repetition in that you have to specify the "container" class (and any other attributes that div might have) in two places.
This solution is similar to #Phrogz's solution but this is a bit more "Haml-ly" and allows you to use Haml syntax to define the add div.