I have this code:
<input id="ville" placeholder="Enter a city">
<ul class="suggestions">
<li data-vicopo="#ville">
<strong data-vicopo-code-postal></strong>
<span data-vicopo-ville></span>
</li>
</ul>
<script src="https://vicopo.selfbuild.fr/api.js"></script>
$(document).on('click', '.suggestions li', function () {
$('#ville').val(
$(this).find('[data-vicopo-code-postal]').text()
);
});
When I click on my chosen city, the list of suggested cities do not disapear. What easy fix can I do so that when clicking, the display of suggestions close or hide?
Thanks
Insert the below code to always show the suggestions list after you have hidden with .hide().
The user can click back into the input field and start typing which will then show the list again, or by clicking on it.
$('#ville').on('click keyup', function() {
$('.suggestions').show();
})
Related
I have to place a input box for search in custom dropdown for filtering the countries, but for the searching first time it is working fine (i.e; if I type 'ind', I have two countries with ind and I am able to click on that countries and select, but when I again edit the search box for another list of countries, the ng-click is not working and I am unable to select the item from list).
Html:
<div class="predtoptn" id="dvCountryLstdopn">
<input type="text" class="form-control frmsrch" ng-model="somvar.countryName" placeholder="Search Items"/>
<ul class="predtsct">
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict" ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">{{countriesLst.countryName}}</li>
</ul>
</div>
JavaScript:
vm.countryIdFunc = function (Id, txt) { vm.cntryId = Id; vm.cntryIdTxt = txt; }
Can you try like the below in your template,
<li class="prfdwn" ng-repeat="countriesLst in ctrylst| filter:somvar:strict">
<span ng-click="countryIdFunc(countriesLst.countryId,countriesLst.countryName)">
{{countriesLst.countryName}}
</span>
</li>
I have this code http://codepen.io/anon/pen/JdNdXd which lets me pick wheels, tiers etc. The thing I want to do is when I get to the last div, where the description of an items is displayed, I have a button and I want to make it when that button is clicked its text is added in the bellow div called Cart, this works as a shoping cart. If you pick Farovi then Original and then Devil eyes you can see that you get text with product name, its code and price, the second line has a button, so I want when I press that button that item gets added to the cart in the div bellow. Is this possible and how can I delte one of products from shopping cart if I want.
Tried a few diferent codes but could not to get it working, last one I tried is append function but could not get it working. This bellow is just example of append function, I did not use this one in my code
$( ".container" ).append( $( "h2" ) );
Try this way:
Form your HTML like this:
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked" id="menu">
<li>Felge
</li>
<li>Gume
</li>
<li>Branici
</li>
<li>Farovi
</li>
</ul>
</div>
<div id="cart"></div>
And JavaScript like this:
function addToCart(item) {
var cart = document.getElementById("cart");
$("#cart").append("<p><a class='cartitem' href='#' onclick='removeFromCart(this)'>" + item.innerHTML + "</a></p>");
$('.cartitem').click(function (e) {
$(e.target).remove();
});
}
function removeFromCart(ele) {
$("#cart").remove(ele);
}
$(function () {
$('.item').click(function () {
addToCart(this);
});
});
See it running here: http://jsfiddle.net/8npoj1nq/
I have a dropdown-menu and 2 btns(AP,SP) in the same row.
I chose Geary, Mia on the drop-down menu, I want to reset it to ClassView when I press on a different btn.
Note: ClassView is my default selection.
HTML
for dropdown-menu
<div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>Class View </span>
<ul class="dropdown">
<li><a id="class-view" href="#">Class View</a></li>
<li><a id="student#1" class="student" href="#">Geary, Mia</a></li>
</ul>
</div>
Below is what I have now :
Fiddle
Any hints ?
You can try
$("#btn-assignment").click(function(){
$(".dropdown li").eq(0).trigger("click");
});
This will trigger 'click' onto the first LI element, which should reselect it
I attached this event to the 'Assignment Performance' button
http://jsfiddle.net/2v57wnys/1/
Thanks to #Sushil and #emmaaaah for get me thinking at the right direction.
I'm sure that there is more than 1 way to accomplish this such task, but here how I did mine. I
Create
a function called : classViewReset()
function classViewReset() {
$student.removeClass('active');
$classView.removeClass('active');
$('#dd').find('span').text('Class View');
}
Call it back
on all my onClick(); functions.
$btnAssignment.click(function(e) {
e.preventDefault();
classViewReset(); //<----------------- Call
imgLoader({btn: $btnAssignment, });
});
Now my dropdown-menu is reset properly as I wanted. See it live : here
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();
}
}
});
I have kept notification button in my header.
When user click Get notified then it should replace by message Notified successfully
CODEPEN: CODEPEN
HTML
<li style="display:none" id="l1">Notified soccessfully ..
</li>
<li><a style="display:block" id="l2" href="#about">Email</a>
</li>
<li>
<div id="input-collection" class="input-group input-group-lg left-input-group">
JS
function notify()
{
alert("hi");
document.getElementById("l2").dispaly='none';
document.getElementById("input-collection").dispaly='none';
document.getElementById("l1").dispaly='block';
}
In codepen, donno what is the issue with my code.
IT should be display not dispaly and you should provide .style
function notify()
{
alert("hi");
document.getElementById("l2").style.display='none'; // Changed
document.getElementById("input-collection").style.display='none'; // Changed
document.getElementById("l1").style.display='block'; // Changed
}
Code Pen