We Keep Coding

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.

Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});

Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

Dropdown colorpicker with toggle click and timeout

my code is not working and I have no idea why.
Here is a demo
$(".color").click(function() {
$(".color-picker").fadeIn(function() {
var colorClick = $(".color-box").click();
var timeOut = window.setTimeout(1000);
if (colorClick || timeOut) {
$(".color-picker").hide();
}
});
});
EDIT: To clear the confusion - I want to hide the box with the colors when the user clicks on one of them $(".color-box") or on the dropdown $(".color-picker"), or if he doesn't the box should hide anyway in a couple of seconds. Sorry, I thought it was clear from my code.
EDIT 2: Using #AlvinMagalona's code I tried to add the timeout functionality with no success demo
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
})
.setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
OR I think this way is much better, but still doesn't function (demo):
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
function timeOut() {
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
}
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
The other part of the code works fine, but I'm not embedding the setTimeout function properly. Can somebody help me with that? Thanks!
EDIT 3:
I made it work: (demo)
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
This one has everything I needed - when you open the drop down and click on color the box hides, when you click on the dropdown again the box hides and if you don't do any of that the box hides after couple of seconds. I hope this code will be helpful for others as well. Thanks for your help, everybody!

Try with -
$(document).ready(function() {
$(".color p").click(function() {
$(".color-picker").fadeIn();
});
$(".color-box").on('click', function() {
$('.color-picker').fadeOut();
})
});
It will simply open the div containing the color boxes and on clicking on that boxes will hide it with transition effect.

Are you trying to hide the box after you select a color? If you do, try this code.
$(document).ready(function() {
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").fadeIn(600);
setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},3000);
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
});

So to answer my own question if you want to have the simplest drop-down menu where you pick something and then the drop-down box hides itself. Here is a demo, here is the code:
$(".color").click(function(e) {
e.stopPropagation();
$(".color-picker").toggle(200);
var timeOut = setTimeout(function() {
if ( $(".color-picker").css('display') != 'none') {
$(".color-picker").hide();
}
},6000);
console.log("timeOut");
});
$(".color-box").click(function (e) {
e.stopPropagation();
$(".color-picker").fadeOut(150);
});
Special thanks to #AlvinMagalona, I've rewritten the code he proposed to make it work for my situation.

jQuery clickevent from a different page

I have a working clickevent handler (don't know if it's the right word for it) on a page which uses show/hide (like tabs) if you click on one of the on-page links. This works perfectly, but now I walk into another issue.
When I link to one of the tabs from a different page, eg. /page-slug/#tabtoshow it won't show the right tab, it just shows the first (open) tab. I want it to show the right tab when a URL contains the same id, eg #tabtoshow. The tabs will have the same id as the link.
This is my current script.
$(function() {
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
});
$(document).ready(function() {
$('a[href="#ondernemen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ondernemen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#groeien"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#groeien').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#ondernemen').slideUp(1000);
$('#spelen').slideUp(1000);
});
$('a[href="#spelen"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#spelen').slideDown(1000);
$('#ontdekken').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('a[href="#ontdekken"]').click(function() {
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$('#ontdekken').slideDown(1000);
$('#spelen').slideUp(1000);
$('#groeien').slideUp(1000);
$('#ondernemen').slideUp(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
})
$('a[href="#ontdekken"]').parent('.label').addClass("active");
});
Thanks in advance!!

If you're moving to another physical page, not a virtual page, you will need to handle the hash on the new page. You'd need to access location.hash or location.pathname and do something based on the hash value. You could handle it similarly to this:
$(document).ready(function() {
displayTab(location.hash);
});

Your code had some repetition, I have written a more general version for you. Also, I have used location.hash to determine what tab to activate.
$(document).ready(function() {
var selector = "#ondernemen, #ontdekken, #groeien, #spelen";
$(".elevator a").click(function(evt) {
evt.preventDefault();
});
$(selector).click(function() {
var that = this;
$(".active").removeClass("active");
$(this).parent('.label').addClass("active");
$(selector).each(function() {
if ($(this).attr("id") !== $(that).attr("id")) {
$(this).slideUp(1000);
}
});
$(this).slideDown(1000);
});
$('body').on({
'mousewheel': function(e) {
if (e.target.id == 'el') return;
e.preventDefault();
e.stopPropagation();
}
});
$(location.hash).parent('.label').addClass("active");
});

history.pushstate fails browser back and forward button

I'm using jQuery to dynamically load content in a div container.
The server side code detects if the request is AJAX or GET.
I want the browsers back/forward buttons to work with the code so I try to use history.pushState. I've got to following piece of code:
$('.ajax').on('click', function(e) {
e.preventDefault();
$this = $(this);
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('');
$('#ajaxContent').load($this.attr('href'), function() {
window.history.pushState(null,"", $this.attr('href'));
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
});
Everything works fine except when browsing with the browsers back/forward button, the adress in the bar changes according to plan but the page doesn't change. What am I doing wrong?
Updated script with the help from Clayton's answer
var fnLoadPage = function(url) {
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('').load(url, function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
window.onpopstate = function(e) {
fnLoadPage.call(undefined, document.location.href);
};
$(document).on('click', '.ajax', function(e) {
$this = $(this);
e.preventDefault();
window.history.pushState({state: new Date().getTime()}, '', $this.attr('href'));
fnLoadPage.call(undefined, $this.attr('href'));
});

#Barry_127, see if this will work for you: http://jsfiddle.net/SX4Qh/
$(document).ready(function(){
window.onpopstate = function(event) {
alert('popstate fired');
$('#ajaxContent').fadeOut(function() {
$('.pageLoad').show();
$('#ajaxContent').html('')
.load($(this).attr('href'), function() {
$('.pageLoad').hide();
$('#ajaxContent').fadeIn();
});
});
};
$('.ajax').on('click', function(event) {
event.preventDefault();
alert('pushstate fired');
window.history.pushState({state:'new'},'', $(this).attr('href'));
});
});
If you take a look at the fiddle I provided and click the button, the alert will fire showing that you are pushing a new state. If you then proceed to click the back button once the pushstate has fired, you will see that the previous page (or popstate) will fire.

How do I hide a element using jquery on click and when a user clicks away?

CODE:
<script type="text/javascript">
$(document).ready(function() {
$('.show_or_hide_link_clicker').click(function() {
$(".the_box_to_show").fadeIn(400);
});
});
</script>
When show_or_hide_link_clicker is clicked the_box_to_show is shown. How do I hide it if show_or_hide_link_clicker is clicked again or when the user clicks away?
Update: This is what I am doing now: http://jsfiddle.net/nFbnr/
Question: How can i remove the double click requirement ot show the div?

jQuery Toggle is what you're looking for.
$('.the_box_to_show').toggle();

When clicking anywhere, check if the element was on the propagation path. If not, the user clicked outside of it so you can hide it.
$(document).click(function(e) {
if ($(e.target).closest(".the_box_to_show").size() === 0) {
$(".the_box_to_show").hide();
}
});
http://jsfiddle.net/vdHAu/

$(document).click(function(e) {
if (!$(e.target).is(".the_box_to_show")) {
$(".the_box_to_show").hide();
}
});
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(".the_box_to_show").fadeIn(400);
});

An another way without delegate event to document level:
you have to set attribute tabindex to the box and CSS outline for style
http://jsfiddle.net/GV56b/
$(document).ready(function () {
$('.show_or_hide_link_clicker').click(function () {
$(this).hide();
$(".the_box_to_show").fadeIn(400, function () {
this.focus()
});
});
$(".the_box_to_show").on('blur',function(){
$(this).hide();
$('.show_or_hide_link_clicker').fadeIn(400);
});
});

check this out
$('.show_or_hide_link_clicker').click(function() {
$(this).hide();
$(this).addClass('active);
$(".the_box_to_show").fadeIn(400);
});
$(document).on('click', 'html', function(){
$(".the_box_to_show").fadeOut(400);
});
$(document).on('click', '.active', function(e){
e.stopPropagation();
});