I have a bootstrap dropdown menu in my application that is working great, except that when I click on any of the input fields the dropdown menu fades out. I know about the javascript function $('.dropdown-menu').find('form').click(function (e) {
e.stopPropagation();
}); but in my case it doesnt seem to be doing anything.
Here is my code:
%li.dropdown
%a.dropdown-toggle{"data-toggle" => "dropdown", :href => "#"}
Sign In
%span.caret
.dropdown-menu
%form{"accept-charset" => "UTF-8", :action => "/users", :method => "post", :style => "margin: 0px"}
%div{:style => "margin:0;padding:0;display:inline"}
%input{:name => "utf8", :type => "hidden", :value => "✓"}/
%input{:name => "authenticity_token", :type => "hidden", :value => "4L/A2ZMYkhTD3IiNDMTuB/fhPRvyCNGEsaZocUUpw40="}/
%fieldset.textbox{:style => "padding:10px"}
%input{:placeholder => "Username", :style => "margin-top: 8px", :type => "text"}/
%input{:placeholder => "Passsword", :style => "margin-top: 8px", :type => "password"}/
.divider
%input.btn-primary{:name => "commit", :type => "submit", :value => "Log In"}/
Can anyone please point at my error? Why is this not working? Thank is advance.
Try this instead:
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
Related
my form is submitting without params in "Customer Information" and "Shipping Information". The form is rendered in a modal and looks like this
#formShipping.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "productShippingLabel", :role => "dialog", :tabindex => "-1"}
.modal-dialog
.modal-content
.modal-header
%button.close{"data-dismiss" => "modal", :type => "button"}
%span{"aria-hidden" => "true"} ×
%span.sr-only Close
%h4#myModalLabel.modal-title Payment Form
.modal-body
/ Button trigger modal
.hide-info
.panel.panel-default
.panel-heading Customer Information
.panel-body
.col-md-3
.col-md-6
%label{:for => "email"} Email Address
%input.form-control{:type => "text"}/
%label{:for => "name"} Name
%input.form-control{:type => "text"}/
%label{:for => "password"} Password
%input.form-control{:type => "text"}/
%label{:for => "password-confirmation"} Password confirmation
%input.form-control{:type => "text"}/
.col-md-3
.panel.panel-default
.panel-heading Shipping Address
.panel-body
.col-md-6
%label{:for => "name"} Name
%input.form-control{:type => "text"}/
%label{:for => "city"} City
%input.form-control{:type => "text"}/
%label{:for => "zipcode"} Zipcode
%input.form-control{:type => "text"}/
.col-md-6
%label{:for => "address"} Address
%input.form-control{:type => "text"}/
%label{:for => "state"} State
%input.form-control{:type => "text"}/
%label{:for => "country"} Country
%input.form-control{:type => "text"}/
.panel.panel-default
.panel-heading
%h3.panel-title Card information
.panel-body
.row
.col-md-6
%label{:for => "name"} Card Number
%input.form-control{:type => "text", "data-stripe" => "number"}/
.col-md-3
%label{:for => "name"} CVC
%input.form-control{:placeholder => "Ex. 331", :type => "text", "data-stripe" => "cvc"}/
.col-md-3
= label_tag :card_month, "Expiration"
= select_month nil, {add_month_numbers: true}, {name: nil, id: "card_month", "data-stripe" => "exp-month"}
= select_year nil, {start_year: Date.today.year, end_year: Date.today.year+15}, {name: nil, id: "card_year", "data-stripe" => "exp-year"}
.text-center
%h2.total-amount
Total:
$0.00
%input{:name => "terms", :type => "CHECKBOX"}>/
Agree to terms?
%br/
%br
%span.payment-errors
%input{:name => "store_front", :type => "hidden", :value => #store_front.id}/
.text-center
%button.btn.btn-primary{:type => "submit"} Pay Now!
.modal-footer
%button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close
My stripe params come through just fine. But this is the result of checking my submitted params:
>> params
=> {"utf8"=>"✓", "authenticity_token"=>"xkgz3HdfwqS0/AfKpQteT1FaJE/LMhMneUKETCug47qhlw=", "order_products"=>[{"product_id"=>"37", "quanity"=>"0"}, {"product_id"=>"38", "quanity"=>"1"}], "switchName1"=>"on", "custom-amount"=>"", "store_front"=>"34", "stripeToken"=>"token", "action"=>"create", "controller"=>"orders"}
Does anyone know why my inputs aren't submitting?
You've forgotten the name attribute for each one of your input elements.
Change:
%input.form-control{:type => "text"}/
to:
%input.form-control{:type => "text", :name =>"email"}/
and set the correct value for each one of your elements.
You have specified you field for lable but not your input so add that
%label{:for => "email"} Email Address
%input.form-control{:email, :type => "text"}/
I received a syntax error message
<%= calendar_date_select_tag 'e_date', I18n.l( Date.today , :format=>:default),:year_range => 15.years.ago..5.years.from_now, :readonly=>true, :popup=>"force",
{:onchange => "#{remote_function(
:url => { :action => 'report_new' },
:with => "'start_date='+s_date+'end_date='+e_date+'&batch_id='+#{#batch.id}",
:before => "Element.show('loader')",
:success => "Element.hide('loader')" )}" }%>
try this ...
:onchange => remote_function(:url => {:controller => 'controller', :action => 'action'})
or
Dont mix your view/html with javascript(forget obstrusive javascript)
instead,there is one more cleaner way....
<%= select_tag :variable, options_from_collection_for_select(:all, :id, :name), :onchange => 'your_onchange_handler()' %>
<script type='text/javascript'>
$(document).ready(function(){
function your_onchange_handler(){
//do what u want to do when select changes
}
})//document ready ends
</script>
I can't figure what i do wrong. I have few select lists:
Regions
Towns
Organizations
How it should works:
User selects region.
List of towns loads.
User selects town.
List of organizations loads.
User chooses organization.
I use ajax for that and i realized only auto-loading for list of towns and i can't do same thing for organization. Second select list DOESN'T POST at all!
Here is my code:
View
%div
%br/
= select 'ajax', :region_id, [['Choose your region...', -1]] + Region.all.map{|region| [region.name, region.id]}.sort
= image_tag('ajax-loader.gif', :id => 'ajax-progress', :style => 'display: none;')
= observe_field :ajax_region_id, :url => { :controller => :organizations, :action => :list_towns, :preselect => (defined?(preselect) && !preselect.nil?) }, :with => 'region_id', :update => 'select_organization_idd', :loading => '$("ajax-progress").show();', :complete => 'if (Ajax.activeRequestCount == 1) $("ajax-progress").hide();'
%br/
= select 'ajax2', :o_id, [], {}, {:id => 'select_organization_idd', :style => 'width: 60em;'}
= image_tag('ajax-loader.gif', :id => 'ajax-progress', :style => 'display: none;')
= observe_field :ajax_region2_id, :url => { :controller => :organizations, :action => :list_region, :preselect => (defined?(preselect) && !preselect.nil?) }, :with => 'o_id', :update => 'select_organization_idd2', :loading => '$("ajax-progress").show();', :complete => 'if (Ajax.activeRequestCount == 1) $("ajax-progress").hide();'
= f.select :organization_id, [], {}, {:id => 'select_organization_idd2', :style => 'width: 60em;'}
Controller
def list_region
render :text => ActionController::Base.helpers.options_for_select((params[:preselect] ? [['Choose organization', -1]] : []) + Organization.map{|org| [ActionController::Base.helpers.truncate(org.name, :length => 155), org.id]})
end
def list_towns
region = Region.find(params[:region_id])
towns = Kladr.find(:all, :conditions => ['code LIKE ?', "#{region.code}%"])
render :text => ActionController::Base.helpers.options_for_select([['Choose town', -1]] + towns.map{ |t| ["#{t.socr}. #{t.name}", t.id] })
end
What do i do wrong? Also i use Rails 2, that why observe_field is not deprecated.
Do you use rails 3? The method observe_field is deprecated.
With rails 3 you must do something like this :
view
%div
%br/
= select 'ajax', :region_id, [['Choose your region...', -1]] + Region.all.map{|region| [region.name, region.id]}.sort, {}, {:id => 'ajax1'}
= image_tag('ajax-loader.gif', :id => 'ajax-progress', :style => 'display: none;')
%br/
= select 'ajax2', :o_id, [], {}, {:id => 'select_organization_idd', :style => 'width: 60em;'}, {}, {:id => 'ajax2'}
= image_tag('ajax-loader.gif', :id => 'ajax-progress', :style => 'display: none;')
= f.select :organization_id, [], {}, {:id => 'select_organization_idd2', :style => 'width: 60em;'}
javascript.js.coffee
$('#ajax1').change = () ->
$.post(
url: '/organizations/list_towns'
data: {value: $('#ajax1').val()}
success: () ->
if (Ajax.activeRequestCount == 1)
$("ajax-progress").hide()
)
$('#ajax2').change = () ->
$.post(
url: '/organizations/list_regions'
data: {value: $('#ajax2').val()}
success: () ->
if (Ajax.activeRequestCount == 1)
$("ajax-progress").hide()
)
The implementation is probably wrong and could be refactored. I didn't test it. But you've got the idea.
I haven't been able to load my page with a hidden map that I can then Show clicking on :toggle_map_button
In my view a Show/Hide button and a map:
<%= link_to_remote "Hide Map", :url =>{:action => :toggle_map}, :method => :get, :loading => visual_effect(:toggle_slide, "marketplace_map", :duration => 1, :queue => 'front'), :html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>
<%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map" }, :markers => { "data" => #json }) %>
In my CSS file:
#maketplace_map
{
width: 100%;
height: 400px;
display: none; <= this doesn't get to be set (when I check in HTML code with Bugzilla)
}
In my RJS file upon action :toggle_map:
page << "document.getElementById('toggle_map_button').innerHTML =(document.getElementById('toggle_map_button').innerHTML == 'Show Map' ? 'Hide Map' : 'Show Map')"
page.flash_msg(:notice_box, flash[:notice]) if flash[:notice]
page.flash_msg(:error_box, flash[:error]) if flash[:error]
flash.discard
The whole things works perfect when starting with a page showing the map. The toggle action does set display:none; correctly ...
The issue is comes when starting with a hidden map and be able to click and slide it down.
Any ideas?
Cheers,
Joel
Look bit closer at the html generated, I bet it's looking like:
<div class="map_container">
<div id="marketplace_map" class="gmaps4rails_map"></div>
</div>
so the adequate CSS lever is the map_container class. Put display:none on it.
since visual_effect seems to need an id, two options:
override the gmaps4rails partial
wrap the gmaps helper in a div: <div id="foo"> <%= gmaps(bar) %> </div>
I've got another solution for you, just tested.
You were right saying the map is small when hidden the visible.
so add an option to your helper: <%= gmaps(whatever, :last_map => false)%>
This will not create the map, only load it's objects.
Then add some javascript (I use jQuery but you've got the idea):
<script>
var createMap = true;
$(function(){
$("#click_me").click(function(){
if (counter == true)
{
Gmaps.loadMaps(); //this will create the map
counter = false;
}
$(".map_container").toggle(); // this hides and shows
});
});
</script>
resolved it thx to #apneadiving suggestion
added option:
:complete => 'Gmaps.loadMaps();' to visual_effect
In the view:
<%= link_to_remote "Show Map",
:url =>{:action => :toggle_map},
:method => :get,
:loading => visual_effect(:toggle_slide, "map", :duration => 1, :queue => 'front'),
:complete => 'Gmaps.loadMaps();',
:html => {:id => "toggle_map_button", :class => "toggle_map_button"} %>
<div id="map" style="display:none;" >
<%= gmaps(:map_options => {:detect_location => true, :center_on_user => true, :zoom => 6, :id => "marketplace_map", :last_map => false }, :markers => { "data" => #json }) %>
</div>
I have the following code in the controller.
I am populating a drop down box dynamically based on the selection from another drop down box.
def update_releases
project = Project.find(params[:project_id])
releases = project.releases
puts "releases==#{releases}"
render :update do |page|
page.replace_html 'releases', :partial => 'releases', :object => releases
end
view code:
-form_tag reports_path(report_type=1),:method => :get, :multipart => true ,:id => "filter" do
%table.grid.full
%tr
%td.grid.full_panels{:style => "width: 20%"}
Project:
%td.grid.full_panels{:style => "width: 20%"}
//= select_tag "projects",options_from_collection_for_select(projects,"id","name",params[:projects]),{:onchange => "#{remote_function(:url => {:action => "update_releases"},:with => "'project_id='+value")}"}
= select_tag "projects",options_from_collection_for_select(projects,"id","name",params[:projects]), :class => "update_releases"
%td.grid.full_panels{:style => "width: 20%"}
Releases:
%td.grid.full_panels{:style => "width: 20%"}
<div id="releases">
= render :partial => 'releases', :object => #releases
%td.grid.full_panels{:style => "width: 20%"}
Cycles:
%td.grid.full_panels{:style => "width: 20%"}
<div id="cycles">
= render :partial => 'cycles', :object => #cycles
%tr
%td.grid.full_panels{:style => "width: 20%"}
%td.grid.full_panels{:style => "width: 20%"}
%td.grid.full_panels{:style => "width: 20%"}
=submit_tag "Submit"
= javascript_include_tag "pages/ic"
partials code :
= select_tag "releases",options_from_collection_for_select(releases,"id","name",params[:releases])
Jquery:
//change the releases drop down based on the selction of the projects drop down.
$('.update_releases').live("change", function(){
$.ajaxSetup({beforeSend: function(xhr) {xhr.setRequestHeader("X-CSRF-Token", $("meta[name='csrf-token']").attr("content")); }});
var project_id=($(this).val());
$.post('/reports/update_releases', {project_id: project_id});
return false;
})
I am getting an error element doesn't support this property" as a pop up on chaning the selection in the drop down box. Please help me out here.
As simple workaround try to use this code in controller:
respond_to do |format|
format.js render :partial => 'releases', :locals { :releases => releases }
end
In releases.js.haml:
$('#releases').html('#{render :partial => '<some_old_html_partial>', :locals => {:releases => releases}}')