I need to change the color of my div button when the the user is logged in.
Once the user is logged in i want him seeing the "Download button" in red, like the "play now" button in the img.
This is the code now:
#play_buttons
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
.button is the class for the button "Download now" on the left and :id => "ho_roulette" gives the style for the "Play now" button on the right.
Ok this is my solution to achieve the Download now button style like the Play Now button when the user is logged in:
#play_buttons
- if logged_in
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now" :id => "ho_roulette"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
- else
#instant_play.play_button
%p
= "#{t :"asiaplus.download_client"}"
.button
= "#{t :"asianplus.download_now"}"
#play_now.play_button
%p
%span.highlight
= "#{t :"asiaplus.web_based"}"
= "#{t :"asiaplus.live_dealer"}"
%a{:href => "#{live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale)}", :class => "button", :title => "#{t :'asiaplus.play_now'}", :id => "ho_roulette"}
= "#{t :"asiaplus.play_now"}"
Basically i have used conditional statements adding :id => "ho_roulette" to my div button when the user is logged in.
Is this solution correct? i thought also i can use the status class active as other solution, but i did not want to touch my SASS file.
There are two things I would revise about your solution:
HTML id tags should be unique, so you shouldn't have two different elements with the same ID. You definitely want to use class instead.
You're repeating a whole lot of code here. It would be much better to use the conditional inside of your tag, and take advantage of the fact that HAML ignores keys with nil values:
play_buttons
#instant_play.play_button
%p
= t :"asiaplus.download_client"
.button
= t :"asianplus.download_now", :class => ("active" if logged_in)
#play_now.play_button
%p
%span.highlight
= t :"asiaplus.web_based"
= t :"asiaplus.live_dealer"
= link_to t("asiaplus.play_now"), live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => ["button", ("active" if logged_in)], :title => t('asiaplus.play_now'), :id => "ho_roulette"}
Your solution is good. Conditional CSS is the easiest solution.
You should dry it up though. Instead of having the whole thing in the if/else statement, simply do it for your id:
#instant_play.play_button
%p
= t(:"asiaplus.download_client")
.button
= t(:"asianplus.download_now"), :id => ('ho_roulette' if logged_in)
#play_now.play_button
%p
%span.highlight
= t(:"asiaplus.web_based")
= t(:"asiaplus.live_dealer")
%a{:href => live_casino_ho_lobby_asia_path(:tab => current_tab, :locale => current_locale), :class => "button", :title => t(:'asiaplus.play_now'), :id => "ho_roulette"}
= t(:"asiaplus.play_now")
To consider:
You should follow #apneadiving's advice to reformat your t().
#charleyc is 100% right with regards to having id unique. Consider using his solution and changing your SASS file... and your approach to your use of id tags to define CSS rules. States (like 'active' or 'ho_roulette') should always be CSS classes.
Related
I have product and order models. Product has many orders and order belongs to product. There is a button 'Order' on product's page, when a user clicks on it, a bootstrap modal opens up. On this modal I render order's form to create a new one.
I want to know, how to pass a product's id to this form on modal?
Currently my button to open modal look like this:
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button"} Order
And the modal itself:
#myModal.modal.fade{:role => "dialog"}
.modal-dialog
.modal-content
.modal-header
%button.close{"data-dismiss" => "modal", :type => "button"} ×
%h4.modal-title Order form
.modal-body
= render 'orders/form'
.modal-footer
%button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
I need this product's id to create a new order, which will belong to the product. If I think in wrong direction, please, correct me.
Many thanks in advance for help!
UPDATE Solved!! Many-many-many thanks to Arup Rakshit (#ArupRakshit)!!!
- #products.last(3).each do |product|
%h4= product.name
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: product.id}} Order
#myModal.modal.fade{:role => "dialog"}
.modal-dialog
.modal-content
.modal-header
%button.close{"data-dismiss" => "modal", :type => "button"} ×
%h4.modal-title Order Form
.modal-body
#new_order
= render 'orders/form', product: product
.modal-footer
%button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
orders/form:
= form_for Order.new do |f|
= f.hidden_field :product_id
= f.text_field :user_name, placeholder: 'Name', class: 'form-control'
= f.submit 'Order', class: 'btn btn-primary'
application.js:
$( document ).ready(function() {
$('body').on('shown.bs.modal', '#myModal', function (e) {
var product_id = $(e.relatedTarget).data('product-id');
$('#order_product_id').val(product_id);
});
});
Keep the product in the modal button using data attribute. Like
%button.btn.btn-info.btn-lg{"data-target" => "#myModal", "data-toggle" => "modal", :type => "button", data: {product_id: #product.id}} Order
Inside the form add the hidden field:
= form_for Order.new do |f|
.form-group
= f.text_field :user_name, placeholder: 'Name', class: 'form-control'
= f.hidden_field :product_id
You need to use below JS, to populate the hidden field value.
$('body').on('shown.bs.modal', '#myModal', function (e) {
var product_id = $(e.relatedTarget).data('product-id');
$('#order_product_id').val(product_id);
});
#new_order is the form ID, change it to yours one. Bootstrap modal events.
I'm struggling with haml not injecting the content at the right place, here is part of the haml :
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
The problem is that the holder or holder thick are not inside my container but outside. Why is this? What am I not aligning properly?
Yes, the if should be indented if its content is meant to go into #container.
#container.form-group
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
.holder
= image_tag '/assets/missing_image.png'
if your container is %div.form-group then you have just to indent the rest so that haml understands it's inside that div that your content should go
so it'll look like that
%div.form-group{:id => 'container'}
- if !#data.nil?
%p= t('users.data_name')
= link_to t('users.delete'), 'javascript:void(0)', :class => 'delete', :data => {:id => #data.id}
%div.holder.thick
= image_tag #data.path
- else
= link_to t('users.upload'), 'javascript:void(0)', :class => 'btn btn-large'
%div.holder
= image_tag '/assets/missing_image.png'
I have this simple_form
<%= simple_form_for(#order) do |f| %>
<%= f.error_notification %>
<%= f.association :orderstatus, :label => false, :include_blank => false, :input_html => { :class => 'order-status' } , :as => :radio, :label_html => { :style => "background-color:black;" } %>
<%= f.button :submit, :value => 'Update', :class => 'button grey small' %>
<% end %>
And it creates this: http://d.pr/9Bqd In the database I also have a field color which is a hex code for the background color I want of each status. Any idea how to pass this hex code onto each background label color?! I've tried for hours.
Have you tried passing it in like this...
# assuming "hex" is stored in the order model. Any variable should work
:label_html => { :style => "background-color:##{#order.hex};" }
If not, please respond with your results
We use Ruby (1.9.2) Rails (2.3).
I'm trying to set pre-selection for radio buttons...
- form_for #user, :url => plan_user_url, :html => { :method => 'put', :class => 'form' } do |f|
- #plans.each do |p|
%span
%p= p[:blurb]
%p= p[:price]
- p[:features].each do |f|
%p= f
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
= f.label :plan_name, p[:name]
%p
%br
.spacer
.field.first
= f.submit 'Update', :class => 'button ok'
.field
= link_to 'Cancel', redirect_back_url || root_url, :class => 'button cancel'
HAML doesn't like this line:
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
Any help is appreciated.
This is invalid Ruby code:
= f.radio_button {:id => p[:id], :checked => #user[:plan_id]==p[:id] || nil}
You're attempting to call the radio_button method and Ruby thinks you're passing it a block, but really you're passing it a Hash. This is better:
= f.radio_button :id => p[:id], :checked => #user[:plan_id]==p[:id] || nil
That removes the ambiguity between Proc and Hash, but it's still weird. Why do you want the || nil? I think it's unnecessary:
= f.radio_button :id => p[:id], :checked => #user[:plan_id] == p[:id]
Thanks for the hints from Brian. It turns out
f.radio_button :plan_id, p[:id]
works for pre-select.
I'm trying to follow this post How can I unobtrusively disable submit buttons with Javascript and Prototype? but I can't get it to work. The form triggers an RJS function, so I need to keep the helpers' onclick events intact. The RJS returns/reloads the same forms along with two new texts. I'm really confused. Here is my rails code for the forms:
.span-20#comparison
/ new comparison . . .
/ voting forms (also reloaded)
.span-4.prepend-3.append-6
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 1
= submit_tag "Vote for me", :disabled => false, :disable_with => 'Vote for me', :class => "compare"
.span-4.append-3.last
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 2
= submit_tag "Vote for me", :disable_with => 'Vote for me', :class => "compare"
.span-4.prepend-8.append-8.prepend-top.last
- form_remote_tag :action => url_for(:controller => :comparisons), :method => :post do
= hidden_field_tag :poem1_id, poems[:a].id
= hidden_field_tag :poem2_id, poems[:b].id
= hidden_field_tag :response, 'draw'
= submit_tag "Declare Draw", :disable_with => 'Declare Draw', :class => "compare"
RJS
page.replace_html :comparison, :partial => 'poems', :object => #poems
page.insert_html :top, :previous, :partial => 'comparison', :object => #comparison
page << "Effect.ScrollTo($('top'));"
Here's one way you could do it using Prototype:
<script type="text/javascript">
document.observe("dom:loaded" function() {
$$("input .compare").each(function(submit) {
submit.observe("click", function() {
submit = true;
});
});
});
</script>
This adds an onclick event handler to every input element with a compare CSS class (i.e. your submit buttons) when the DOM is loaded. The onclick event handlers disables each button when it's clicked. Note that adding event handlers using Prototype this way does not replace any existing event handlers on the elements.