Develop Reference

Close list of links after click

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();
})

Turn Inline OnClick to Click Jquery

I have the following inline styles for a dropdown menu list. I do not know how to make it in to 'click' using jQuery.
<button class="btn btn-primary mw" data-toggle="dropdown"><span class="caret">Subject</span></button>
<div class="dropdown-menu">
<a class="dropdown-item Business" onclick="selectBusiness()"> Business</a>
<a class="dropdown-item ICT" onclick="selectICT()"> ICT</a>
<a class="dropdown-item Arts" onclick="selectArts()"> Arts</a>
</div>
More information:
I tried to do this following code for a button and it's working fine. But as I said I do not know how to make it work for a dropdown menu.
var btn = document.querySelector("button.selectAll");
btn.addEventListener("click", selectAll);
....
Your input would be greatly appreciated!

If you want to use jQuery, you can add listener to the classes of each <a> inside your dropdown.
$(".Business").on('click', function() {
//selectBusiness() or your code here
});
$(".Arts").on('click', function() {
//selectarts() or your code here
});
$(".ICT").on('click', function() {
//selectICT() or your code here
});
Another solution would be to add a single listener for all your dropdown-items and then checking the content of the selected one.
$(".dropdown-item").on('click', function() {
switch ($(this).text()) {
case "Business":
selectBusiness();
break;
}
});

Clicking button to add its text to another div

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/

Hide or disable drop down list menu buttons. jQuery of JavaScript.

I have a dynamically created 3 options list which are attached at the end of a table row. I want to hide or disable Edit and Copy options if certain conditions are not met when page loads. How can i do this using either jQuery of JavaScript.
<div class="btn-group ewButtonGroup open">
<button class="dropdown-toggle btn btn-small" data-toggle="dropdown" href="#">Options <b class="caret"></b></button>
<ul class="dropdown-menu ewMenu">
<li><a class="ewRowLink ewView" data-caption="View" href="teamsview.php?showdetail=&TeamID=1">View</a></li>
<li><a class="ewRowLink ewEdit" data-caption="Edit" href="teamsedit.php?TeamID=1">Edit</a></li>
<li><a class="ewRowLink ewCopy" data-caption="Copy" href="teamsadd.php?TeamID=1">Copy</a>
</li>
</ul>
</div>
I have tried the following code which deosnt work.
<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink ewView span').text();
if ( Week_Check > 10) {
$('.ewRowLink ewView').hide();
}
});
</script>

You have a bad jQuery selector. If you want to hide an element having both of those classes you want to go this way:
$('.ewRowLink.ewView').hide();
By using $('.ewRowLink ewView').hide(); you basically state: hide all ewView (?) elements that are inside other elements having ewRowLink class.

You can use .off() to unbind the event:
$('.ewEdit, .ewCopy').off('click');
or if you want to hide:
$('.ewEdit, .ewCopy').hide();
Yet you need to mention on what condition you want to do this.

<script>
$(document).ready(function() {
var Week_Check = $('#ewRowLink, #ewView').find('span').html();
if ( Week_Check > 10) {
$('.ewRowLink, .ewView').hide();
}
});
</script>

I'm trying to implement a click event on a bootstrap dropdown menu

Hi I have a bootstrap dropdown menu that is auto filled from a database. I am trying to get an event to happen when I click on one of the items in the menu. I have tried
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
with ".ddBtnClick" being a class assigned to each of the items in the list. but nothing happened.
Here is the code to populate the list from a database.
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
Here is the html for the dropdown.
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>

Issue is with your className. You are registering the delegated event handler for ddBtnClick but actual class name is ddBntClick.
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
and
.addClass("ddBntClick");
Change the class name during construction or change in your event delegation.
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});

Have you tried wrapping your Javascript in the document.ready event?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
See the jQuery .ready() documentation for more information and examples.
Also, you should register the click event on the actual button and use .click() instead of .on():
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
Also, you have a typo:
.addClass("ddBntClick")
Should be:
.addClass("ddBtnClick")