We Keep Coding

Bootstrap - dropdown menu close on click in Datepicker

I am working with Bootstrap and date picker. I added a datepicker in boostrap dowpdown. When selecting the date the dropdown closes automatically. Refer the image for more info:
Action 1: Click the dropdown button, We see the dropdown list.
Action 2: When clicking on the fiel. I will dynamically add datepicker.
After the action 3: When selecting on the Date. The Dropdown is getting close so The user is back to Action 1.
What i am trying to do is After the user click the Date. The dropdown should not close.
I am using the following code to prevent the click which workes on the table inside the dropdown but not with the date picker.
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
Can some one help me to prevent the dropdown close.
<div class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
</a>
<ul class="dropdown-menu keep-open-on-click">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
Note: The datepicker will be added dynamically when the user clicks on the table to end it the date. So is that the problem?

This one was very troublesome. I also have a couple of datepickers located within some Bootstrap drop-down menus. I solved this using two ways.
The first uses jQuery to stop the event from bubbling up one time when the DatePicker is clicked
$('.yourDatePicker').on('hide', function(event) {
event.stopPropagation();
$(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) {
return false;
});
});
The other, more permant solution was to change the datepicker.js file itself. If you crack it open you will find code that looks like this
click: function(e){
e.preventDefault();
var target = $(e.target).closest('span, td, th'),
year, month, day;
if (target.length === 1){
switch (target[0].nodeName.toLowerCase()){
...ect...
If you add a e.stopPropagation() function to this area, like this
click: function(e){
e.preventDefault();
e.stopPropagation(); // <-- add this
var target = $(e.target).closest('span, td, th'),
year, month, day;
if (target.length === 1){
switch (target[0].nodeName.toLowerCase()){
your datepickers will stop interfering with your other DOM elements, though this solution is more widespread, and I would test to make sure it doesn't impact other areas in your code.

Try this code,
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) {
e.hide();
}
});

Your code should work BUT
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
This is looking for the class('keep-open-on') on the datepicker, not the dropdown. You need to find it in the parent I believe.
$(document).on('click', '.datepicker', function(e) {
if ($(this).parents().find('keep-open-on-click')) { e.stopPropagation(); }
});
Should work.

If I understand your question correctly, you are trying to capture the change event of the datepicker selection and prevent the default actions from finishing. Try this:
$('#your-datepicker-input').datepicker({
}).on('change', function(e) {
console.log("changed");
e.preventDefault();
});
Example here: https://jsfiddle.net/shanabus/a5f82nsy/
Update 1
Without your code for an example, I'm guessing its something like this: https://jsfiddle.net/shanabus/oghgwa5j/1/ - here we have a dropdown with a datepicker inside of it. When I add code so that clicking that table cell turns it into an input with a datepicker, it hijacks the functionality of the dropdown - probably because its a dropdown within a dropdown.
Perhaps you will need a better UI design to handle this type of scenario. A datepicker dropdown inside of a table, inside of an accordion panel, inside of a dropdown might be as tricky to use as it is to code.
Update 2
Here is a great answer on how to better control the dropdown in basic use cases: https://stackoverflow.com/a/19797577/88732

I could not able to solve this issue so I changed my solution from drop-down to Modal.
<div class="dropdown">
<a href="#" data-toggle="modal" data-target="#NModal"><span class="icon16 icomoon-icon-bell"></span><span class="notification" id="notification_count">11</span>
</a>
<div id="NModal" class="modal fade" role="dialog" style="min-width: 650px;">
<div class="modal-dialog">
<!-- My Code -->
</div>
</div>

Show Hidden Sub-Menu OnClick By Avoiding Link Of Parent Menu

I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...
<ul class="main_list">
<li class="parent">
Menu-1
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
<li>Menu-2</li>
<li>Menu-3</li>
<li>Menu-4</li>
<li class="parent">
Menu-5
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
</ul>
This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???
Update:
Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?

Your click-function:
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});
For your second request, you can do somethin like that:
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});
then your selector in the click-handler above would be:
$('.show')
Demo

Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})

Based off of my comment above...
Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu
JSfiddle DEMO
CSS:
ul.children {
display: none;
}
JQUERY:
$(function(){
$('li.parent').each(function(){
$(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
});
$('li.parent img').on("click",function(){
$(this).siblings('ul.children').toggle();
});
});
EDITED JQUERY (with arrow image toggle):
$('li.parent img').on("click",function(){
if($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).attr('src','Arrow-down.png');
} else {
$(this).addClass('open');
$(this).attr('src','Arrow-up.png');
}
$(this).siblings('ul.children').toggle();
});
Updated DEMO

Since I can't see the full HTML, I'm acting like main_list is the only one.
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff
Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.

The below works for me :)
jQuery(function( $ ){
$(document).ready(function(){
$('.main_list a').click(function (e) {
if ($(this).parent().children('ul').is(':visible') != true) {
$(this).parent().children('ul').show();
e.preventDefault();
return false;
}
})
});
});

checkbox combined with javascript

I want to make a filter which works with a checkbox. When the checkbox is checked it should show some elements and when its not it should hide it.
This is the code I've got so far but I cant get it to work properly. Anyone who can help me out?
The html what got to hide/show
<li class="verwijder" class="kleding"><img class="aanbieding" src="images/jack.png"><span id="timer"></span></li>
The checkbox
<input id="checkboxeten" type="checkbox" name="filter" value="eten"><br>
Javascript
$(document).ready(function(){
if (document.getElementById("checkboxeten").checked = true) {
$( ".kleding" ).show();
} else {
$( ".kleding" ).hide();
}
});

You'll need an event handler for that
$('#checkboxeten').on('change', function() {
$(".kleding").toggle(this.checked);
});
And you can't have more that one class attribute
<li class="verwijder kleding">

You need to compare using == not =.
Should be:
if (document.getElementById("checkboxeten").checked == true) {
Or:
if (document.getElementById("checkboxeten").checked) {
= is used for assignment. == is used for comparison.
Also you will need an onchange event handler for your checkbox. You should fire this logic not only on page load but also when the checkbox is changed I assume. Or on a button click or some kind of event.

Replace <li class="verwijder" class="kleding"> with <li class="verwijder kleding">
Using my updated jquery code.
Here is working example (http://jsfiddle.net/yqkLpn6s/2/) FIDDLE

JQuery - Clicking on checkbox container works, clicking on checkbox doesn't

I am trying to create a dropdown menu that will allow users to select multiple options via checkboxes. I am using jQuery so that the user just has to click within the checkbox container (i.e. the checkbox text or the whitespace around the text) to mark the checkbox as checked or unchecked, w/o solely having to click on the checkbox exclusively: http://jsfiddle.net/nMKt2/
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown-menu li").click(function () {
var cb = $(this).find('input:checkbox');
var chk = cb.prop("checked");
if (!chk) {
cb.prop("checked", true);
}
else {
cb.removeProp("checked");
}
});
});
This works for the checkbox container, but it fails when you actually click on the checkbox itself! Actually clicking on the checkbox doesn't seem to trigger the toggle (you may have to open the jsfiddle in IE or Firefox to see this, as my version of Chrome didn't render this jsfiddle properly).
I am very new to jQuery/javascript, and so I'm sure I'm making an elementary mistake somewhere here. Another issue I don't know how to solve would be how to make the dropdown "sticky," so that it doesn't immediately disappear each time you check an option.
Any help you can offer would be greatly appreciated.

Here: http://jsfiddle.net/umidbek_karimov/y84ne/
1: Wrap Your input[checkbox] in to label:
<label><input type="checkbox" value="App1" />App1</label>
2: Use .stopPropagation() method on click event:
$(document).ready(function () {
$(".dropdown-menu li label").click(function (ev) {
ev.stopPropagation();
});
});
3: I also used display: block css property on labels
#advanced_options label {
font-weight:normal !important;
font-family: Tahoma, Geneva, sans-serif;
display:block;
cursor: pointer;
}

The click event on the checkbox is propagating up to the container so technically the checkbox will get checked, then unchecked right away (or vise versa). You need to stop the event propagation on the click event for the checkbox.

$('.dropdown-menu').on('click', 'input[type="checkbox"]', function(e) {
e.stopPropagation();
});
DEMO

$(document).ready(function(){
// Your code here.
$('.dropdown-menu li input:checkbox').on('click', function(e){
e.stopPropagation();
});
});
Your event attached to the <li> also affects all child elements. So what happens is when you click on the checkbox to check/uncheck it, the event attached to the <li> is triggered, causing it to essentially reverse the check/uncheck action.
To remedy this, we add e.stopPropagation(); to the checkbox to prevent it firing any parent click events.
As an alternative, you may want to consider a non-JavaScript solution, wrapping the contents of the list item in a label as shown below. When you click anywhere inside the label, browsers will natively trigger the check/uncheck action of a nested checkbox.
<li>
<label>
<input type="checkbox" value="...">
Checkbox
</label>
</li>
UPDATE:
Since there are other click events (from Bootstrap) that you want to preserve, what you really want to do is just abort out of the current click event when you click directly on the checkbox.
$(document).ready(function () {
$(".dropdown-menu li").on('click', function (e) {
// If you clicked on the checkbox directly, abort.
if ($(e.target).is('input'))
{
return;
}
var chk = $(this).find('input:checkbox').prop("checked");
if (!chk) $(this).find('input:checkbox').prop("checked", true);
else $(this).find('input:checkbox').removeProp("checked");
});
});

document.click to remove class on page not behaving properly

I'm trying to create a global style of dropdowns which toggle between open and closed when their menu icon is clicked, but also close whenever anywhere else on the page is clicked. The way in which I'm opening or closing this dropdowns is by adding or removing a class called "open" to the parent of the dropdown.
The idea of that (to be more clear) is that the normal class of the dropdown has display: none; set on it, but if it's a descendant of something with the class "open", then it has display: block;
So, without further ado, here's what I have so far:
"openable" is a class of 'parent' elements which can be clicked on to add the "open" class.
<script>
$(document).ready(function(){
$('.openable').click(function(){
if($(this).hasClass("open")){
$(this).removeClass("open");
}
else{
$(this).addClass("open");
}
});
});
On it's own that actually works fine - it acts as a decent enough toggle for the dropdowns. Of course, clicking anywhere else won't close the dropdowns.
My apparently non-functioning close script is:
<script>
$(document).ready(function(){
$(document).click(function(event) {
var clicked = $(event.target);
if(clicked.hasClass(".open")){
}
else{
if($(".open").length > 0){
$(".open").each(function(){
$(this).removeClass("open");
});
}
}
});
});
</script>
With that script on the page, dropdowns cease to work altogether, and console isn't throwing up any errors for me to work off of.
Any better way of doing this?
Thanks
edit: html markup is something like
<li class="navItem dropdown openable">
<span><img src="img/settings.png"></span>
<ul class="subNav hubDrop">
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
</ul>
</li>
for each one. the li tag there is within another ul (remember, this is for dropdown menu essentially)

jsFiddle Demo - Since you haven't provided any HTML I mocked up some elements...
Update: You don't specify if more than one element can be 'open' at once; in your current solution they can be, so I kept that behavior. However, to limit it to one being open you can add $('.open').not(this).removeClass('open'); inside the .openable click handler.
Part One: Why not just use .toggleClass
$(document).ready( function() {
$('.openable').click( function() {
$(this).toggleClass("open");
});
});
Part Two: No need for a second ready handler; in the first, add this:
$(document).click( function(e) {
var clicked = $(e.target).closest('.openable');
if ( clicked.length == 0 ) {
$(".open").removeClass('open');
}
});

jsBin demo
just played around a bit (don't know your markup.)
<div>
<h2 class="openable">ICON 1</h2>
<div class="cont"></div>
</div>
$('.openable').next('.cont').hide();
$('.openable').click(function(e) {
e.stopPropagation();
$('.opened').removeClass('opened');
var d = $(this).next('.cont');
var visib = (d.is(':visible')) ?
/*yes*/ d.slideUp() :
/*no */ ($('.cont').slideUp()) (d.slideDown().prev('.openable').addClass('opened')) ;
});
$(document).click(function(){
$('.cont:visible').slideUp().prev('.openable').removeClass('opened');
});

I don't believe you can just do $(document).click(), it's not wrong but you never click the document itself, you click children of.
I have a very similar menu system and I capture an event this way:
$('.navTab').mouseover(function (event) { navEvent($(this), event.type); });
Then remove all "open" and reapply "open" to the selected item.
I believe you don't want to capture all document click events. jQuery Event.target

How about making everything but the openable classed elements execute your click method?
var openable = $(".openable");
$("div, h2").not(openable).click(function(){
$('.cont').slideUp().prev('.openable').removeClass('opened');
});