Forgive me for asking this question but I have been pulling my hair trying to fix this but I cannot understand where I am messing up. I have checked many answers on SO which recommend using attr or props in Jquery which did not work for me so I think I might be making some other problem.
I have ruby code where I have an icon. When I click on this icon, I want to show/hide another div.
My ROR code:
<div class="choice <%= 'active' if listing.payment_term_shortterm == 'on' %>" data-toggle="wizard-checkbox">
<%= form.check_box :payment_term_shortterm, id: "payment_term_shortterm_test" %>
<div class="card card-checkboxes card-hover-effect">
<i class="ti-home"></i>
<p>Small Time</p>
</div>
</div>
This above thing creates this icon in my website as follows:
I just want that if Small Time is clicked it shows another div. My Jquery so far:
$(function () {
$("#payment_term_shortterm_test").click(function () {
if ($(this).is(":checked")) {
$("#SmallTimeShow").show();
} else {
$("#SmallTimeShow").hide();
}
});
});
And this jquery is supposed to show following div:
<div id="SmallTimeShow" style="display: none;">
<div class="form-group">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<p> Hi Loan for Small time.</p>
</div>
</div>
</div>
</div>
I have tried many things, such as using props or attr in jquery but it also did not work.
EDIT
THis is what appears in the browser inspect element:
You can try with display 'block' and display 'none' as I mentioned below:
$('#payment_term_shortterm_test').change(function() {
if($(this).is(":checked")) {
$("#SmallTimeShow").css('display','block');
}
else{
$("#SmallTimeShow").css('display','none');
}
});
Related
My guess is what I want to achieve should be easy, but due to my lack of knowledge of front-end development, I cannot manage to solve issue. Have a page that works with AJAX-filters that users can select. Filters that are currently applied show up within <div> with id=current-filters.
HTML looks like this:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Need to hide the the entire DIV current-filters-box in case no filter is applied.
The page uses a Javascript file, bundle.js which is massive, but contains the following line:
s=document.getElementById("current-filters")
Therefore tried the following if-statement to hide the DIV:
if(s.length<1)$('#current-filters-box').hide()
and
if(s=0)$('#current-filters-box').hide()
But this does not seem to have any effect. Can someone tell, what I did wrong?
Demo of page can be found here
EDIT: this is what the HTML looks like when filters are applied:
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Both of your conditions are incorrect or I would say they are not doing what you think they do.
s.length will always prints undefined so instead of s.length<1 you could use s.children.length
and the second one is not a condition rather it is an assignment
s==0 // condition
s=0 //assignment
the correct condition for your requirement would be
if(s.children.length<1){
I have assigned snippets for illustration.
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="current-filters-box">
filter box
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<!-- here every single applied filter is displayed -->
</div>
</div>
</div>
Without filters
s = document.getElementById("current-filters")
console.log(s.children.length);
if (s.children.length < 1) {
$('#current-filters-box').hide(1000)
}
<div id="current-filters-box">
<div style="margin-bottom: 15px">
<strong>Current filters:</strong>
<div id="current-filters">
<div class="badge-search-public">
<strong>Humanities & Languages</strong> <span class="x" data-property="disciplines" data-value="4" onclick="filter.removeFilter(this)">×</span>
</div>
<div class="badge-search-public">
<strong>January</strong> <span class="x" data-property="months" data-value="1" onclick="filter.removeFilter(this)">×</span>
</div>
</div>
</div>
Try this .
if( $('#current-filters').is(':empty') ) {
$('#current-filters-box').hide()// or $('#current-filters-box').css("display","none")
}
You are performing an assignment, try..
if (s.children.length)
Using vanilla JavaScript, you can check if the current-filters div is empty or not and toggle the parent div current-filters-box like this:
s= document.getElementById("current-filters");
t= document.getElementById("current-filters-box");
if(s.children.length<1) {
t.style.display = 'none';
// t.style.visibility= 'hidden'; <<-- use this if you want the div to be hidden but maintain space
}
else {
t.style.display = 'block';
// t.style.visibility= 'visible'; <<-- use this if you used visibility in the if statement above
}
You can achieve this by adding your own variable which counts or maintains your applied filters, e.g.
var applied_filter_count = 0;
at every time filter is applied
applied_filter_count++;
if(applied_filter_count) {
$('#current-filters-box').show()
}
and at every time filter is removed
applied_filter_count--;
if(!applied_filter_count) {
$('#current-filters-box').hide()
}
and by default current-filters-box should be display:none
I am trying to get the sum of all radial buttons selected. There are three groups of three in total with a possibility of three checked. These are created by the Angular ng-repeat that you will see in the index page.
I have lurked through many posts saying that they have found a way to do this, but I still don't get the output that I need. I know that the jQuery is running because I tested that. So I don't know what is going in.
Please see if you can spot or suppose what is going on. Thank you The code looks horrendous and uneven but this is because the box keeps screwing the hierarchy of my code.
<!DOCTYPE html>
<html>
<head>
<title>Cruiseline</title>
<%= javascript_include_tag 'application'%>
<%= stylesheet_link_tag 'application', media: 'all'%>
<%= csrf_meta_tags %>
<script>
$( document ).ready(function() {
$(".all_aboard").click(".radial_input", function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$(".totalSum").val(total);
});
});
</script>
</head>
<body>
<%= yield %>
</body>
</html>
<h1 class="title">Choose Your Sailings <span class="pick_one">(Pick one for each box)</span></h1>
<div class="all_aboard" ng-app="app">
<div ng-controller="CruisesController">
<div ng-repeat="cruise in cruises">
<div class="panel panel-default">
<div class="panel-body">
<div ng-controller="SailingsController">
<div ng-repeat="sail in sailings ">
<div ng-if="sail.cruise_id == cruise.id">
<div>
<img src="{{ sail.main_image }}" class="cruise_picture"/>
<img><%= image_tag "lowest_price_tag.png", class: "lowest_price_tag"%> <img/>
</div>
<div class="cruise_details">{{cruise.name}}-{{cruise.ship_name}}</div>
<h1 class="sailing_title">{{ sail.name }}</h1>
<div ng-controller="SailingOptionsController">
<div class="option_box" ng-repeat="soption in sailing_options">
<div ng-if="soption.sailing_id == sail.id" >
<div class="radio">
<input class="radial_input" id="soption{{soption.id}}" type="radio" name="cruisePrice{{sail.id}}" data-price="{{soption.price}}">
<div class="date">{{ soption.date}}</div>
<div class="price">${{ soption.price}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br/>
<br/>
<div class="divider"></div>
<div>
<h1 class="you_selected_total">You Selected Sailings Total</h1>
<input style="color:red;" type="text" class="totalSum" value="" readonly="readonly">
</div>
try this
I updated answer now try
$(".all_aboard").on("click",".radial_input", function() {
var total = 0;
$(document).find("input[type=radio]:checked").each(function() {
total += parseFloat($(this).parent().find('.price').text());
});
$(".totalSum").val(total);
});
I can see couple of things in your code.
First, if you are using jQuery to make things work, you should wrap it up in a $(document).ready(function() {}); like below.
$(document).ready(function () {
$("input[type='radio']").click(function() {
var total = 0;
$("input[type=radio]:checked").each(function() {
total += parseFloat($(this).val());
});
$(".totalSum").val(total);
});
});
If you are planning to add more radio buttons using code, then you should consider using jQuery 'on' to bind events.
Next, you should use check boxes instead of radio buttons if you are trying to enable multiple select (I am assuming you are, since you are looking to get a total).
Next, try and minimize direct use of jQuery when developing your angular applications: it can lead to lot of confusions and unwanted scenarios like your angular functions not getting executed, or your angular variables not getting updated.
Finally, take a look at the below fiddle and see if it fits your solution
JSFiddle: Update Price when Checked
I'm trying to use checkboxes with categories at the top of my page as filters to display the lower content of the page (which gives specific options as buttons under each category). The lowers divs should only be displayed if the checkbox is checked; I set the display as none for the div in the CSS. However, my code doesn't work..
I've tried using different syntax for the JS that I found online, and declaring the js in different places in my HTML, but nothing so far has worked.
HTML
<input type="checkbox" id="supportcheck"> Support
<div class="row" id= "support">
<h5>Support</h5>
<div class="large-6 medium-6 columns">
<div class="callout panel" >
<div role="button" tabindex="0" class="small radius support button">Managed</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="callout panel">
<div role="button" tabindex="0" class="small radius support button">Self-Managed</div>
</div>
</div>
</div>
JavaScript
$('.supportcheck').change(function () {
if ($(this).attr("checked"))
{
$('.support').fadeIn();
return;
}
$('.support').fadeOut();
});
supportcheck is an id not a class. Use
$('#supportcheck').change(function () {
to add the event handler to the input.
try this instead:
$('#supportcheck').change(function () {
if ($(this).is(':checked'))
{
$('#support').fadeIn();
return;
}
$('#support').fadeOut();
});
I would like it so when I click on a Bootstrap Glyphicon a div is displayed.
I currently have this HTML (simplified):
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger"> </span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
Then this JS:
$('#headerdisplaybuttonsxs').click(function()) {
$('#headerrightside').css("display", "block");
});
So I would basically like #headerrightside to display on the clicking of #headerdisplaybuttonsxs. Problem is I can't get that to work.
#headerdisplaybuttonsxs Has a CSS property of display:none.
I have tried $('#headerrightside').show() but that does not seem to work. How could I get this to work? Thank You!!
There was a typo on the click event function with an extra ).
$('#headerdisplaybuttonsxs').click(function() {
$('#headerrightside').css("display", "block");
});
#headerrightside {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="headerdisplaybuttonsxs" class="glyphicon glyphicon-menu-hamburger">Icon</span>
<div id="headerrightside" class="col-xs-12 col-sm-4"> text... </div>
I've built a UI card with a share button. Upon tapping the share button, a share sheet shows up above the card itself.
This card will live in a grid of other such cards so the "share" button should trigger only the share sheet for the current card
I have a Save button which should also fire another sheet, but it doesnt seem to be working.
I've built this demo (http://jsfiddle.net/8hed8yrd/11/) with the share sheet working. I cant seem to get a save sheet to work. Any pointers?
Note: Demo doesn't have save sheet to avoid confusion in code.
<div class="grid">
<div id="card">
<div class="hero_text hero_small">TITLE</div>
<div class="subtext">SUBTITLES</div>
<div class="toggleLink explore_text"><span class="icons">SHARE</span>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span>
</div>
<div class="share_sheet">
<div class="share_this">SHARE THIS IMAGE</div>
<div class="share_close">CLOSE</div>
</div>
</div>
<div>
jQuery(document).on("click", ".toggleLink", function () {
jQuery(this).next('.share_sheet').fadeIn('fast');
return false;
});
jQuery(document).on("click", ".share_sheet", function () {
jQuery(this).fadeOut('fast');
});
The problem is that you use jQuery(this).next('.share_sheet'). The second toggleLink SAVE have a share_sheet div right after itself, but the SHARE button doesn't. Thats why jquery can't found the div. Use siblings instead of next if you want to found the same element, or do it like i do in this fiddle: http://jsfiddle.net/PSYKLON/8hed8yrd/12
<div class="toggleLink explore_text"><span class="icons">SHARE</span></div>
<div class="share_sheet">
<div class = "share_this">SHARE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>
<div class="toggleLink explore_text"><span class="icons">SAVE</span></div>
<div class="share_sheet">
<div class = "share_this">SAVE THIS IMAGE</div>
<div class = "share_close">CLOSE</div>
</div>