Develop Reference

Angular - Use $index to load product images

I have the following form in my AngularJS app:
<li ng-repeat="device in devices track by $index">
<div class="db-handset-image">
<span class="phone-silhouette"></span>
{{ relative image here }}
</div>
<div class="db-device">
<ul class="opts">
<li>
<select name="manufacturer[ [[$index]] ]" ng-model="selectedManufacturer" ng-change="getManufacturerModels(selectedManufacturer)">
<option value="">Manufacturer</option>
<option ng-repeat="manufacturer in manufacturers" value="[[manufacturer.id]]">[[manufacturer.name]]</option>
</select>
</li>
<li>
<select name="device[ [[$index]] ]" ng-model="selectedModel" ng-change="loadModelImage(selectedModel, $index)">
<option value="">Model</option>
<option ng-repeat="model in manufacturerModels" value="[[model.id]]">[[model.model + ' ' + model.variants[$index].memory + ' ' + model.variants[$index].colour]]</option>
</select>
</li>
</ul>
</div>
</li>
What happens in this form is that a user will select a manufacturer from the first dropdown and a model from the model dropdown. The model dropdown will populate with the relative models after a manufacturer has been selected using Angular's $filter.
When the user has selected a model, loadModelImage is fired and what needs to happen here is that after a model selection, that model image is then loaded into the {{relative image here}} placeholder. This is currently being done like so:
$scope.loadModelImage = function (modelId, $index) {
$http.get(ajaxurl + '?action=get_handset&hid=' + modelId)
.success(function (data) {
$scope.selectedHandsets++;
$scope.modelImages.splice(0, 0, data.handset.images);
})
}
This issue with this is that if I replace the relative image here placeholder text with an <img> loading in the model images, each model that's been selected appears in every row.
My other issue is that if you remain on the same 'row' (see below screenshot) and change the handset image, another array of images is pushed to $scope.modelImages when it in fact the images for that 'row' should effectively be overwritten with the new selection.
To give you a clear understanding of how the form looks, here's a screenshot:
When you click 'add new handset' the row containing the dropdowns is visually duplicated and you can add select another handset.
I hope my problem's explained clearly enough, any Q's ask.

jQuery show and hide dynamic classes not working

I am trying to hide and show div's displayed on my page with a select element however having a bit of trouble as I can't seem to get the jQuery to function.
I am listing results from my SQL table using PHP that currently displays every row onto my page and prints them into a list.
I want to make the jQuery hide the div's that don't have a class that matches the select option that is selected.
Here is an example of the listing template that echo's out all of the MySQL results and displays them into a template and is then looped to display every row on the table:
<?php while($row = $results->fetch(PDO::FETCH_ASSOC))
{
echo '
<div class="listing-container ' . $row["Make"] . '">
<h3 class="model-listing-title clearfix">'.$row["Make"].' '.$row["Model"].' '.$row["Variant"].'</h3>
<h3 class="price-listing">£'.number_format($row['Price']).'</h3>
</div>
<div class="listing-container-spec">
<img src="'.(explode(',', $row["PictureRefs"])[0]).'" class="stock-img-finder"/>
<div class="ul-listing-container">
<ul class="overwrite-btstrp-ul">
<li class="diesel-svg list-svg">'.$row["FuelType"].'</li>
<li class="saloon-svg list-svg">'.$row["Bodytype"].'</li>
<li class="gear-svg list-svg">'.$row["Transmission"].'</li>
<li class="color-svg list-svg">'.$row["Colour"].'</li>
</ul>
</div>
<ul class="overwrite-btstrp-ul other-specs-ul h4-style">
<li>Mileage: '.number_format($row["Mileage"]).'</li>
<li>Engine size: '.$row["EngineSize"].'cc</li>
</ul>
<button href="#" class="btn h4-style checked-btn hover-listing-btn"><span class="glyphicon glyphicon-ok"></span> History checked
</button>
<button href="#" class="btn h4-style more-details-btn hover-listing-btn tst-mre-btn"><span class="glyphicon glyphicon-list"></span> More details
</button>
<button href="#" class="btn h4-style test-drive-btn hover-listing-btn tst-mre-btn"><span class="test-drive-glyph"></span> Test drive
</button>
<h4 class="h4-style listing-photos-count"><span class="glyphicon glyphicon-camera"></span> 5 More photos</h4>
</div>
';
} ?>
The 'Make' is added to the listing-container div to add a class to be able to filter the results with jQuery.
Here is the form with the select element I am using:
<form>
<select class="form-control select-box">
<option value="make-any">Make (Any)</option>
<?php while($make = $filterres->fetch(PDO::FETCH_ASSOC))
{
echo '
<option>'.$make["Make"].'</option>
';
} ?>
</select>
<select class="form-control last-select select-box">
<option value="model-any">Model (Any)</option>
<option value="two">Two</option>
<option value="three">Three</option>
<option value="four">Four</option>
<option value="five">Five</option>
</select>
</form>
As you can see the select option contains the 'Make' and is looped.
So down to the jQuery:
<script>//Wait for DOM to load
(function() {
$(“.select-box”).change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(“.listing-container”).not(“.” + make).hide();
});
});</script>
So in theory this should work but for some reason it isn't, can anybody notice anything that might be wrong?
I have placed my script below the core jQuery in my footer and it still doesn't work.
Here is a live example: http://www.drivencarsales.co.uk/used-cars.php

Looks like you're using the wrong quotes in the source code of that page try replacing them with "
//Wait for DOM to load
$(function() {
$(".select-box").change( function() {
// get the value of the select element
var make = $(this).val();
//get all of the listing-container divs, remove the ones with the selected make class, then hide the rest
$(".listing-container").not("." + make).hide().next().hide();
});
});
Edit
You also need a $ before the function

If I understand you correctly ↓ working code ↓
$(function() {
$('.select-box').on("change",function() {
var make = this.value;
$('div.listing-container.'+make+",div.listing-container."+make+" + div.listing-container-spec").show();
$('div.listing-container:not(.'+make+'),div.listing-container:not(.'+make+') + div.listing-container-spec').hide();
});
});
And shorter code (but slower):
$(function() {
$('.select-box').on("change",function() {
var make = this.value;
$('.listing-container.'+make+",.listing-container."+make+" + div").show();
$('.listing-container:not(.'+make+'),.listing-container:not(.'+make+') + div').hide();
});
});
P.S.You miss value attribute (but in live example everything ok):
echo '<option value="'.$make["Make"].'">'.$make["Make"].'</option>';

Show Content of Selected Options

I'd like to show the content of the selected options in the span tags with corresponding id's.
So when you choose Chocolate as your ice cream flavor and Caramel as your topping, the text at the bottom will change to:
"I love Chocolate ice cream with Caramel".
<ul id="icecream" style="list-style:none;line-height:30px;">
<li>
<select id="icecream">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
</select>
</li>
<li>
<select id="topping">
<option value="sprinkles">Sprinkles</option>
<option value="chocolatedip">Chocolate Dip</option>
<option value="caramel">Caramel</option>
</select>
</li>
<li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>
Does anyone know of a javascript that can do this?
Update:
- Without using jQuery.
- Vanilla, Chocolate, Strawberry, Sprinkles, Chocolate Dip, and Caramel don't have to be displayed in bold.
- The first option in the select list is shown as default. I.e.:
"I love Vanilla ice cream with Sprinkles".

Add the following code in javascript
$('#icecream').change(function(){
$('#icecreamFlavor').text($(this).val());
});
$('#topping').change(function(){
$('#toppingFlavor').text($(this).val());
});
Add the following code in css
#icecreamFlavor, #toppingFlavor{
font-weight:bold;
font-style:italic;
}

Here's one way:
<!doctype html>
<html>
<head>
<script>
// wait for DOM content to finish loading
window.addEventListener( 'DOMContentLoaded', function DOMContentLoaded() {
// no need to listen anymore
this.removeEventListener( 'DOMContentLoaded', DOMContentLoaded );
// get the DOM elements
var icecream = document.getElementById( 'icecream' );
var topping = document.getElementById( 'topping' );
var icecreamFlavor = document.getElementById( 'icecreamFlavor' );
var toppingFlavor = document.getElementById( 'toppingFlavor' );
// define an event listener that changes our output based on the selected options
var onSelectChange = function( event ) {
icecreamFlavor.textContent = icecream.options[ icecream.selectedIndex ].textContent;
toppingFlavor.textContent = topping.options[ topping.selectedIndex ].textContent;
}
// listen for the change events with the event listener
icecream.addEventListener( 'change', onSelectChange );
topping.addEventListener( 'change', onSelectChange );
// initialize our output
onSelectChange();
} );
</script>
</head>
<body>
<ul style="list-style:none;line-height:30px;">
<li>
<select id="icecream">
<option value="vanilla">Vanilla</option>
<option value="chocolate">Chocolate</option>
<option value="strawberry">Strawberry</option>
</select>
</li>
<li>
<select id="topping">
<option value="sprinkles">Sprinkles</option>
<option value="chocolatedip">Chocolate Dip</option>
<option value="caramel">Caramel</option>
</select>
</li>
<li>I love <span id="icecreamFlavor"></span> ice cream with <span id="toppingFlavor"></span>.</li>
</ul>
</body>
</html>
fiddle demo
P.S.: Your <ul> had a conflicting id (icecream), so I had to remove it.

Updated Answer
Updated Javascript Demo
Change your 'ul' element id as 'iceCreamList' as there should be unique ids for html elements to identify them. Try this,
function selectIceCream(that){
var iceCreamType = that.options[that.selectedIndex].text;
document.getElementById('icecreamFlavor').innerHTML = iceCreamType;
};
function selectToppings(that){
var toppingType = that.options[that.selectedIndex].text;
document.getElementById('toppingFlavor').innerHTML = toppingType;
};
Also, you should consider placing the default options in your select list.

Bootstrap3 limit selection and fade unselected

my html looks like this
<form class="form-horizontal" role="form">
<div class="form-group">
<ul class="select_list">
<li>Apple</li>
<li>Peach</li>
<li>Plum</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Kiwi</li>
</ul>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
and my jQuery is like this:
$(".select_list li").on('click',function(){
$(this).toggleClass("chosen");
}
this works, it adds a class if the list item is clicked but i want to prevent more than 3 from being selected. How can I do this? also if 3 are selected the other ones should fade out. The user should be able to unselect one of three and see the unselected ones again like before. how would I do this? I need to get number selected but i don't know how
thanks in advance

You would use $('.select_list li.chosen').length to access the number of selected elements. Check to see if the clicked element has the class chosen in order to ensure that it can be unselected.
EXAMPLE HERE
$(".select_list li").on('click',function(){
if($('.select_list li.chosen').length < 3 || $(this).hasClass('chosen')){
$(this).toggleClass('chosen');
}
});
For the fading part, just use fadeIn/fadeOut on the sibling elements based on the number of chosen elements.
UPDATED EXAMPLE HERE
$(".select_list li").on('click',function(){
if($('.select_list li.chosen').length < 3 || $(this).hasClass('chosen')){
$(this).toggleClass('chosen');
var chosen = $('.select_list li.chosen');
var notChosen = $(this).siblings();
if(chosen.length == 3){
$(notChosen).not(chosen).fadeOut();
} else {
$(notChosen).fadeIn();
}
}
});

Highlight Corresponding Names With Javascript

I have a list of names to display in a browser:
Alan, Ben, Cindy, Dan, Ellen, Fred.
I'd like the user to be able to select male or female.
Then I'd like the name(s) of people who are that gender to change colors, or become highlighted.
Is there a way to do this with JavaScript?

If i understand you correctly, you can do following:
// step 1 create list of names with classes
<ul>
<li class="person male">Alan</li>
<li class="person male">Ben</li>
<li class="person female">Cindy</li>
</ul>
// step 2 create dropdown list of genders
<select id="my-dropdown-id" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
// step 3 simple jQuery script
<script type="text/javascript">
$('#my-dropdown-id').change(function() {
$('.person').removeClass('selected');
$('.' + this.value).addClass('selected');
});
</script>
<style>
.selected{
background: yellow;
}
</style>
This is a very simple solution, though i believe it implements your idea at least theoretically.