Unable To Get Id and Value From Specific Div - javascript

I am struggling with this thing for the last few days and trying to obtain specific div details. It was resolved actually and here is the working one - Obtain Related Div Text with jQuery. So if you have seen it, I was using individual buttons for each div section as follows:
<div class="divs">
<div class="heading">
<div class="h2Val"> //Trying to retrieve this value - The id
1
</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div>
<input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
//Another one is this - CheckBox value
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
<div>
<input type="button" class="btn" value="Get Value" /> //This is the button that was assigned with every div
</div>
</div>
</div>
But now, I am trying to separate the buttons and used anchor tag that's out of the parent div class divs to retrieve those values . But the issue is, it doesn't get the id and values of individual divs. Here is the code snippet:
$(document).ready(function() {
divs = $(".divs").children();
divs.each(function(e) {
if (e != 0)
$(this).hide();
});
var index = 0,
divs = $(".divs").children();
$("#next").click(function() {
index = (index + 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
$("#prev").click(function() {
index = (index - 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
$(".button").click(function() { //This doesn't get the id and value of heading div
var $container = $(this).closest('.heading')
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function(){
return this.value
}).get();
console.clear()
console.log('ID: ' + id +' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs">
<div class="heading">
<div class="h2Val">
1
</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div>
<input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
</div>
<div class="heading">
<div class="h2Val">
2
</div>
<div>Who invented computer?</div>
<div class="heading2">
<div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
</div>
</div>
</div>
<a class="button" id="prev">Previous</a>
<a class="button" id="next">Next</a>
So I tweaked a bit with the following but it retrieves all the selected div values at a time rather than individual:
$(".button").click(function() { //This doesn't get the id and value of heading div
var $container = $('.divs').children().closest('.heading')
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function(){
return this.value
}).get();
console.clear()
console.log('ID: ' + id +' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
});
});
Any better way or solution to resolve it?
Update 1: Expected output - When checked on first option and clicked Next, it should show result as follows:
ID: 1 has 1 checked
Values: London
Then when second question comes and the same should happen:
ID: 2 has 1 checked
Values: Charles Babbage

You can get length of .divs and then declare some variable which will have value 0 .So, whenever next button is clicked you can check if the variable value if less then the length of .divs and depending on this either increment value by 1 or start counter again from 0.
Demo Code :
$(document).ready(function() {
divs = $(".divs").children();
divs.each(function(e) {
if (e != 0)
$(this).hide();
});
var index = 0,
divs = $(".divs").children();
$("#next").click(function() {
index = (index + 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
$("#prev").click(function() {
index = (index - 1) % divs.length;
divs.eq(index).show().siblings().hide();
})
//declare
var indexes = 0;
$(".button").click(function() {
//get div length
var lengths = divs.length;
//pass indexes value to get required div
var $container = $('.divs').children().eq(indexes);
var id = $container.find(".h2Val").text().trim();
var $checked = $container.find('.cbCheck:checked');
var values = $checked.map(function() {
return this.value
}).get();
console.clear()
console.log('ID: ' + id + ' has ' + $checked.length + ' checked');
console.log('Values: ', values.join())
//checking if indexes value is less then length of div
if (indexes < (lengths-1)) {
//increment
indexes++;
} else {
//start from 0
indexes = 0;
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="divs" datas="abc">
<div class="heading">
<div class="h2Val">
1
</div>
<div>What's the capital of England?</div>
<div class="heading2">
<div>
<input type="checkbox" id="val1" class="cbCheck" name="val1" value="London" />London</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val2" class="cbCheck" name="val2" value="New York" />New York</div>
</div>
</div>
<div class="heading">
<div class="h2Val">
2
</div>
<div>Who invented computer?</div>
<div class="heading2">
<div><input type="checkbox" id="val3" class="cbCheck" name="val3" value="Thomas Edison" />Thomas Edison</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val4" class="cbCheck" name="val4" value="Charles Babbage" />Charles Babbage</div>
</div>
<div class="heading2">
<div><input type="checkbox" id="val5" class="cbCheck" name="val5" value="Sir Isaac Newton" />Sir Isaac Newton</div>
</div>
</div>
</div>
<a class="button" id="prev">Previous</a>
<a class="button" id="next">Next</a>

Related

Product filtering based on custom data attribute

I am creating a product filter based on checkbox click. It should show and hide based on data-ftype and will match it with the id of the checkbox.
I saw this on StackOverflow but my version doesn't work, and I do not know why. I would be thankful for any help.
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 >a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 >a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 >a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>
Please check the below code, it is working now
A fix has been given to selector instead of $('.c1 >a1') replaced with $('.c1 > .a1')
$('input[type="checkbox"]').click(function() {
if ($('input[type="checkbox"]:checked').length > 0) {
$('.c1 > .a1').hide();
$('input[type="checkbox"]:checked').each(function() {
$('.c1 > .a1[data-ftype=' + this.id + ']').show();
});
} else {
$('.c1 > .a1').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="full" value="fullrim" />full<br/>
<input type="checkbox" id="half" value="halfrim" />half<br/>
<input type="checkbox" id="without" value="without" />without<br/>
<div class="c1">
<div class="a1" data-ftype="full">
abc
</div>
<div class="a1" data-ftype="half">
pqr
</div>
<div class="a1" data-ftype="without">
stuv
</div>
</div>

override and sum price with javascript

I'm struggling with this code, I've two js that dynamically change the price of a div with id=#prezzo.
My problem is that I have a basic price of 1000 and I want that price to be overridden when I click on one of the three buttons (and not be overridden when I click on checkboxes).
var basicPrice = 1000; // This is how we start
function getCheck() {
var currentPrice = basicPrice; // every time
currentPrice += parseFloat($(".event-hook-class.active").data("prezzo")) || 0, // add any "active" boxes
services = [],
total = 0;
console.log(currentPrice)
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" +this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#serv").html("services: " + services.join(", "));
}
$(document).ready(function() {
$("input[id^=service]").on("click", getCheck);
$(".event-hook-class").on("click",function(e) {
e.preventDefault();
$(".event-hook-class").removeClass("active");
$(this).addClass("active")
$("#prezzo").html($(this).data('prezzo') + ' €');
$("#mq").html($(this).data('mq'));
getCheck(); // will add this and the checkboxes
});
getCheck(); // initialise on page load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="event-hook-class simple-text piano" id="C.1_1" data-prezzo="1080.56" data-mq="94">
C.1_1 <br> piano 1<br> prezzo 1080.56 €</button><br><button type="button" class="event-hook-class simple-text piano" id="D.1_1" data-prezzo="1084.72" data-mq="94">
D.1_1 <br> piano 1<br> prezzo 1084.72 €</button><br><button type="button" class="event-hook-class simple-text piano" id="C_2.1" data-prezzo="1109.68" data-mq="94">
C_2.1 <br> piano 2<br> prezzo 1109.68 €</button><br>
<form id="services" name="services-form" data-name="services Form">
<div class="checkbox-field w-checkbox"><input type="checkbox" value="22500" id="service_1" name="checkbox" data-name="Checkbox" class="checkbox 1 w-checkbox-input"><label for="service_1" class="simple-text white w-form-label">design pack</label> 22500 €</div>
<div class="checkbox-field ew w-checkbox"><input type="checkbox" value="2000 " id="service_2" name="checkbox-2" data-name="service_2" class="checkbox 2 w-checkbox-input"><label for="service_2" class="simple-text white w-form-label">security</label> 2000 €</div>
<div class="checkbox-field 2 w-checkbox"><input type="checkbox" value="5000" id="service_3" name="checkbox-2" data-name="service_3" class="checkbox 3 w-checkbox-input"><label for="service_3" class="simple-text white w-form-label">wellness pack</label> 5000 €</div>
<div class="checkbox-field 4 w-checkbox"><input type="checkbox" value="1000" id="service_4" name="checkbox-2" data-name="service_4" class="checkbox 4 w-checkbox-input"><label for="service_4" class="simple-text white w-form-label">box auto</label> 1000 €</div>
</form>
<div class="paragraph" id="prezzo">
1000 €</div>
<div id="display_services" class="simple-text maiusc prova">services:<br>design pack<br>dynamically adding the services...</div>
I'm new to js world, so I don't know how to do it:
Change current price variable to choose between active button price and basic price in getCheck function:
var basicPrice = 1000; // This is how we start
function getCheck() {
var currentPrice = parseFloat($(".event-hook-class.active").data("prezzo")) || basicPrice, // add any "active" boxes
services = [],
total = 0;
console.log(currentPrice);
$("input[id^=service]").each(function() {
if (this.checked) {
total += +this.value;
services.push($("[for=" +this.id + "]").html()); // get the label text
}
});
$("#prezzo").text((currentPrice + total).toFixed(2) + "€");
$("#serv").html("services: " + services.join(", "));
}

Show all divs on Unchecking the checkboxes

I have a code for product list in different divs based on different data attributes like data-brand,data-store and some more. I am filtering the records with checkbox selection which my friend helped me to develop.I need small change in this.Look at the code.
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<div class="content"
data-category="shoes"
data-price="4000"
data-size="38"
data-brand="Nike">
<img src="http://placehold.it/120x80">
<p>Nike 38<br>$4000</p>
</div>
<div class="content"
data-category="shirts"
data-price="6000"
data-size="20"
data-brand="Nike">
<img src="http://placehold.it/140x80">
<p>Nike 20<br>$6000</p>
</div>
<div class="content"
data-category="shoes"
data-price="500"
data-size="20"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 20<br>$500</p>
</div>
<div class="content"
data-category="shoes"
data-price="780"
data-size="42"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 42<br>$780</p>
</div>
<div class="content"
data-category="shirts"
data-price="1200"
data-size="40"
data-brand="Sunbaby">
<img src="http://placehold.it/140x80">
<p>Sunbaby 40<br>$1200</p>
</div>
<div class="content"
data-category="shoes"
data-price="2000"
data-size="70"
data-brand="Andrew">
<img src="http://placehold.it/120x80">
<p>Andrew 70<br>$2000</p>
</div>
<div class="content"
data-category="shoes"
data-price="800"
data-size="50"
data-brand="Sunbaby">
<img src="http://placehold.it/120x80">
<p>Sunbaby 50<br>$800</p>
</div>
<div class="content"
data-category="shirts"
data-price="1300"
data-size="20"
data-brand="Nike">
<img src="http://placehold.it/140x80">
<p>Nike 20<br>$1300</p>
</div>
<div class="content"
data-category="shirts"
data-price="800"
data-size="35"
data-brand="Andrew">
<img src="http://placehold.it/140x80">
<p>Andrew 35<br>$800</p>
</div>
</div>
<form id="filter">
<div>
<input type="checkbox"
name="brand"
value="Andrew" checked>
Andrew
</input>
<input type="checkbox"
name="brand"
value="Sunbaby">
Sunbaby
</input>
<input type="checkbox"
name="brand"
value="Nike">
Nike
</input>
</div>
<div>
<input type="checkbox"
name="category"
value="shoes" checked>
Shoes
</input>
<input type="checkbox"
name="category"
value="shirts">
Shirts
</input>
</div>
<div>
<input type="radio"
name="price"
value="0-9000"
checked>
All
</input>
<input type="radio"
name="price"
value="0-999">
$0-$1000
</input>
<input type="radio"
name="price"
value="1000-2000">
$1000-$2000
</input>
<div>
<div>
<input type="radio"
name="size"
value="0-80"
checked>
All
</input>
<input type="radio"
name="size"
value="0-25">
Small
</input>
<input type="radio"
name="size"
value="26-45">
Medium
</input>
<input type="radio"
name="size"
value="46-80">
Big
</input>
<div>
</form>
</body>
</html>
css
.hidden {display: none;}
.content {border-radius: 5px; border: 1px solid #bbb;padding: 5px; margin: 5px; float: left;}
#filter {clear: left;}
script
var filterContentForm = function(content, form){
var filter = function() {
var checkBoxGroups = {},
radioGroups = {};
var addRadioGroup = function(name){
radioGroups[name] = {
el: $('input[name='+name+']:checked')
};
var n = radioGroups[name];
n.el
.each(function(){
n.range = $(this).val().split('-');
n.from = Number(n.range[0]);
n.to = Number(n.range[1]);
});
};
$('#filter input[type=radio]')
.each(function(){
addRadioGroup($(this).attr('name'));
});
var addCheckBoxGroup = function(name){
checkBoxGroups[name] = {
el: $('input[name='+name+']:checked'),
ch: []
};
var n = checkBoxGroups[name];
n.el.each(function(){
n.ch.push($(this).val());
});
};
$('#filter input[type=checkbox]')
.each(function(){
addCheckBoxGroup($(this).attr('name'));
});
var contents = $(content), all = 0;
contents.removeClass('hidden')
.each(function(){
var $this = $(this),
price = $this.data('price');
for(var c in radioGroups){
var n = radioGroups[c],
d = Number($this.data(c));
if(d < n.from || d > n.to){
$this.addClass('hidden');
all++;
return;
}
}
var show = 0, i;
for(var c in checkBoxGroups){
var n = checkBoxGroups[c],
d = $this.data(c);
for(i = 0; i < n.ch.length; i++){
if(d === n.ch[i]) {
show++; break;
}
}
}
var l = Object.keys(checkBoxGroups).length;
if(show < l) {
$this.addClass('hidden');
all++;
}
});
if(all > contents.length - 1)
contents.removeClass('hidden');
};
$(form+' input').change(filter);
filter();
};
filterContentForm('.content', '#filter');
#filter {clear: left;}
The above code is working fine.I just need one small change in this. That is, on start two checkboxes are checked i.e.for brand i.e.Nike and category i.e. shoes. I just want that on the start, these two checkboxes also need to be unchecked,all records visible,but when I am removing the 'checked' from Andrew and Shoes checkbox,Filtering doesnot happen.
Just guide me how to keep all checkboxes unchecked on start and then filtering should work after selecting the checkboxes.
Thanks for help
Your filter code seems to be a little buggy.
Make sure you are adding the jquery js in the header!
To toggle checked/unchecked state of your checkboxes and/or radio-buttons simply add/remove the checked attribute from the tag
<input type="checkbox"
name="category"
value="shoes" **checked**>
Ok so this is the problem:
You are checking the following condition
if(show < l)
where show is the count of filterCategories [ in your case: brand and category] that are checked. This is being compared against l which is count of total filterCategories present.
So, when only one of the categories is checked, this conditions becomes true, and following code
`$this.addClass('hidden');
all++;`
gets executed. This makes your all++ reach the value of contents.length hence your following code gets executed
if(all > contents.length - 1)
contents.removeClass('hidden');
which overrides the filters and shows all the items [ in your case the divs ]
To fix this see the following code. The activeFilterCount variable is the change that is required. Just replace your code from var show=0,i; to all++;} with the following code:
var show = 0, i, activeFilterCount=0;
for(var c in checkBoxGroups){
var n = checkBoxGroups[c],
d = $this.data(c);
if(n.ch.length > 0){
activeFilterCount++;
}
for(i = 0; i < n.ch.length; i++){
if(d === n.ch[i]) {
show++; break;
}
}
}
if(show < activeFilterCount) {
$this.addClass('hidden');
all++;
}
I know it got a little too lengthy, but I hope it helps you! Let me know if anything is not clear.

jQuery UI Slider and Checkbox to filter set of divs

I have a problem with jquery here.
I am running a ajax call to return an SQL query. It basically displays a list of properties, each property has a class name consisting of the development name, the number of bedrooms and whether or not it is a match or nomatch depending on wether or not is matches the checkbox value.
Upon each checkbox click the divs are hidden if they do not match the required parameter.
Working Demo: http://jsfiddle.net/cactuscreative/2PM8H/4/
jQuery
$(function() {
$('#slider-range').slider({
range: true,
min: 0,
max: 700000,
step: 5000,
values: [ 25000, 550000 ],
slide: function(event, ui) {
$( "#price_range" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
},
stop: function(event, ui) {
mi = ui.values[ 0 ];
mx = ui.values[ 1 ];
filterSystem(mi, mx);
}
});
$( "#price_range" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) );
});
function filterSystem(minPrice, maxPrice) {
$("div.plotresult").filter(function() {
var price = parseInt($(this).data("price"));
if (isNaN(price)) { price = '0'; }
console.log(price);
$("div.plotresult").hide();
$("div.plotresult").removeClass('match').addClass('nomatch');
return price > minPrice && price < maxPrice;
}).show();
}
$(".filter:checkbox").bind('change',function () {
$("div.plotresult").hide();
$("div.plotresult").removeClass('match').addClass('nomatch');
$("div#overlay").show();
var locationArray = [];
var bedroomArray = [];
var location_Count = 0, bedroom_Count = 0;
$("#location :checkbox:checked").each(function () {
locationArray[location_Count] = $(this).val();
location_Count++
});
$("#bedroom :checkbox:checked").each(function () {
bedroomArray[bedroom_Count] = $(this).val();
bedroom_Count++
});
var locationstring
var bedroonstring
var locationchecked = false
var bedroomchecked = false
if (bedroom_Count == 0) { bedroom_Count = 1; } else { bedroomchecked = true; }
if (location_Count == 0) { location_Count = 1; } else { locationchecked = true; }
for (f2 = 0; f2 < location_Count; f2++) {
if (locationArray[f2] != null) { locationstring = '.' + locationArray[f2] } else { locationstring = '' }
}
for (f3 = 0; f3 < bedroom_Count; f3++) {
if (bedroomArray[f3] != null) { bedroomstring = '.' + bedroomArray[f3] } else { bedroomstring = '' }
}
var QueryString = locationstring + bedroomstring
$(QueryString).removeClass('nomatch').addClass('match').fadeIn('slow');
if (!locationchecked && !bedroomchecked) {
$("div.plotresult").removeClass('nomatch').addClass('match').fadeIn('slow');
};
var mycount = $('.match').length;
$(".totalRes").text(mycount);
});
$('a.showall').click(function () {
$("div.plotresult").removeClass('nomatch').addClass('match').fadeIn('slow');
$("#price :checkbox").removeAttr('checked');
$("#location :checkbox").removeAttr('checked');
$("#price :checkbox").removeAttr('checked');
var mycount = $('.match').length;
$(".totalRes").text(mycount);
return false;
});
Filters
<div class="searchfields">
<div class="wrapper">
<div id="filters">
<div class="locations" id="location">
<h3>Location</h3>
<div class="cumboptions checks">
<p><input type="checkbox" id="cumbria" /> <label><strong>Cumbria</strong></label></p>
<p><input type="checkbox" class="filter" name="location" id="CumbridgeDrive" value="cambridgedrive" /> <label>Cambridge Drive, Penrith</label></p>
<p><input type="checkbox" class="filter" name="location" id="HawksdalePastures" value="hawksdalepastures" /> <label>Hawksdale Pastures, Dalston</label></p>
<p><input type="checkbox" class="filter" name="location" id="CraggClose" value="craggclose" /> <label>Cragg Close, Kendal</label></p>
<p><input type="checkbox" class="filter" name="location" id="MastersGrange" value="mastersgrange" /> <label>Masters’ Grange, Kirkby Lonsdale</label></p>
<p><input type="checkbox" class="filter" name="location" id="Pengarth" value="pengarth" /> <label>Pengarth, Grange-over-Sands</label></p>
</div>
<div class="yorkoptions checks">
<p><input type="checkbox" id="yorkshire" /> <label><strong>North Yorkshire</strong></label></p>
<p><input type="checkbox" class="filter" name="location" id="ImperialCourt" value="imperialcourt" /> <label>Imperial Court, Ingleton</label></p>
<p><input type="checkbox" class="filter" name="location" id="OldLaundryMews" value="oldlaundrymews" /> <label>Old Laundry Mews, Ingleton</label></p>
</div>
</div>
<div class="rooms" id="bedroom">
<h3>Number of Bedrooms</h3>
<div class="options bedrooms">
<p><input type="checkbox" class="filter" name="bedroom" id="one" value="one" /> <label>1</label></p>
<p><input type="checkbox" class="filter" name="bedroom" id="two" value="two" /> <label>2</label></p>
<p><input type="checkbox" class="filter" name="bedroom" id="three" value="three" /> <label>3</label></p>
<p><input type="checkbox" class="filter" name="bedroom" id="four" value="four" /> <label>4</label></p>
<p><input type="checkbox" class="filter" name="bedroom" id="four" value="five" /> <label>5</label></p>
</div>
</div>
<div class="prices" id="price">
<h3>Price (£)</h3>
<div class="options">
<input type="text" id="price_range" class="price_range" value="" />
<div id="slider-range"></div>
</div>
</div>
<p><a class="showall" href="#">Clear Filters</a></p>
</div>
</div>
</div>
Results:
<div id="result">
<h4 class="countresults"><span class="totalRes">6</span> properties match your result</h4>
<div class="plot plotresult mastersgrange three" data-price="0">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">Masters Grange Plot 26</p>
<h3>3 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£TBC</li>
<li class="rooms">3 Bedrooms</li>
</ul>
</div>
<div class="plot plotresult cambridgedrive four" data-price="395000">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">Cambridge Drive Plot 34</p>
<h3>4 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£395000</li>
<li class="rooms">4 Bedrooms</li>
</ul>
</div>
<div class="plot plotresult craggclose two" data-price="250000">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">Cragg Close Plot 18</p>
<h3>2 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£250000</li>
<li class="rooms">2 Bedrooms</li>
</ul>
</div>
<div class="plot plotresult pengarth three" data-price="0">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">Pengarth Plot 8</p>
<h3>2 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£TBC</li>
<li class="rooms">3 Bedrooms</li>
</ul>
</div>
<div class="plot plotresult pengarth three" data-price="250000">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">Pengarth Plot 10</p>
<h3>3 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£250000</li>
<li class="rooms">3 Bedrooms</li>
</ul>
</div>
<div class="plot plotresult hawksdalepastures four" data-price="550000">
<img src="http://placehold.it/1600x620" width="100%" />
<p class="meta">hawksdalepastures Plot 65</p>
<h3>4 Bedroom Detached House</h3>
<p class="info"></p>
<ul>
<li class="price">£550000</li>
<li class="rooms">4 Bedrooms</li>
</ul>
</div>
My issue is that they don't play together.
They work as individual filters but if I want to check a development and bedrooms and then between a price bracket then it ignores the checkbox.
Visa versa - i set a price bracket and its ok, then i check a development and bedrooms and it ignores the price bracket.
Any Help would be amazing...
I've gone for a slightly different approach to how your example worked which simplifies the code a lot.
If you have an object to store the search state then you can just then run a search function every time a checkbox is ticked/unticked and the slider updates. Adding data-location and data-bedrooms attributes to each plot also makes things easier for filtering rather than relying on the class names.
See full working example here:
http://jsfiddle.net/77ZLC/
The general gist of it works like so:
// store search state
var search = {
minPrice: 25000,
maxPrice: 550000,
locations: [],
bedrooms: []
};
/**
* Do a search and update results
*/
function doSearch() {
var numResults = 0;
$('.plotresult').each(function(el) {
$el = $(this);
var location = $el.data('location');
var bedrooms = $el.data('bedrooms');
var price = $el.data('price');
var show = true;
// check locations
if (search.locations.length > 0 && $.inArray(location, search.locations) === -1) {
show = false;
}
// check bedrooms
if (search.bedrooms.length > 0 && $.inArray(bedrooms, search.bedrooms) === -1) {
show = false;
}
// check price
var price = parseInt(price, 10) || 0;
if (price < search.minPrice || price > search.maxPrice) {
show = false;
}
if (show) {
numResults++;
$el.removeClass('nomatch').addClass('match');
}
else {
$el.removeClass('match').addClass('nomatch');
}
});
// show/hide results
$('.match').fadeIn();
$('.nomatch').fadeOut();
// update total
$('.totalRes').text(numResults);
};
Here's one way you could do it. You need to add all of your filters to run in one place so you can pass extra params to an event when you trigger it:
http://jsfiddle.net/ahallicks/2PM8H/8/
In this example I've change your filter function to trigger the change event of a checkbox and therefore run through the currently selected filters adding my own at the end:
function filterSystem(minPrice, maxPrice) {
$(".filter:checkbox").trigger("change", [minPrice,maxPrice]);
}
There's a bit of a bug with the fading in then out again, but I'll let you handle that one ;-)

iterate through a radio buttons group and get their labels

i want to iterate through a group of radio buttons generated dynamically and get their labels, but when i attempt to print their values nothing appears, see this script demo for an example http://jsfiddle.net/HaBhk/20/ and here's my html where the generated buttons will go
<div data-role="content">
<div data-role="collapsible" data-inset="true">
<h1>AddVote</h1>
<div data-role="fieldcontain" >
<input type="text" name="name" id="question" value="" /><br>
<div data-role="controlgroup" data-type="horizontal" >
<label for="name"><a href="" id="AddButton" data-role="button"
data-icon="plus">Add</a><a href="" id="RemoveButton" data-role="button"
data- icon="delete">Delete</a>
</label>
<input type="text" name="option" id="option" value="" /><br>
</div>
<div data-role="fieldcontain">
<form name="OptionsForm" id="InputForm" method="get">
<div id="after" data-role="controlgroup">
/////Generated radio buttons goes here
</div>
</form>
</div>
<a href="#approve" id="publishButton" data-role="button"
data-inline="true"data-transition="flip">Preview</a>
</div><!-- /content -->
below is my script to get radio buttons values:
$('#publishButton').click(function(){
var result
var y=document.getElementById('question').value
var form='<Question value=' + y + '/>'+'<br>'
alert(form);
$('input:radio').each(function() {
var value=$('input:radio').val()
'<option value='+value + '/>'+'<br>'
alert(result);
});
Here is some sample code that will return the relevant labels for the radio options.
var labels = [];
$('input:radio').each(function(){
labels.push($('label[for='+$(this).attr('id')+']').text());
});
alert(labels);
$('#publish').click(function () {
var labs = $(':radio + label'),
alertString =[];
for (var i = 0, labLen = labs.length; i < labLen; i += 1) {
alertString[i] = labs[i].id;
};
alert(alertString.join("\n"));
});
Try this: http://jsfiddle.net/HaBhk/24/
<input type="text" name="option" id="option" value="" /><br>
<div id="AddButton" data-role="button" data-inline="true">Add</div>
<div id="RemoveButton" data-role="button" data-inline="true">remove</div>
<div id="publishButton" data-role="button" data-inline="true">publish</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup"><legend>Choose an Option:</legend><br><br>
<div id="after">
</div>
</fieldset>
</div>
<script type="text/javascript">
function createRadioElement(elem, label, checked) {
var id = 'option1_' + label;
$('#after').append($('<div><input type="radio" name="option1" id="'+id+ '" value="1"/><label for="' + id + '">'+label + '</label></div>'));
}
$('#AddButton').click(function() {
var x = document.getElementById('option').value;
createRadioElement(this, $('#option').val());
});
$('#RemoveButton').click(function() {
$('#after').children().children("input[checked='checked']").parent().remove();
});
$('#publishButton').click(function() {
var result;
$('#after input:radio').each(function() { // only radio buttons in #after
var value = $(this).next('label').html();
alert(value);
});
});
</script>

Categories

Resources