Develop Reference

JavaScript confirm dialog box keeps on regenerating on cancel event

SCENARIO: I just want to warn user on window change; so I've used jQuery's window blur & JavaScript's confirm dialogue box. When user will click OK button the application will redirect to another page & when user will click CANCEL button nothing will happen. He can continue his work on the same page.
ISSUE: OK button is working perfectly but when I click on the CANCEL button, the browser keeps on regenerating the dialogue box. How do I stop that?
CODE:
$(window).blur( function (e) {
var closeWindow = window.confirm("Your test will be cancelled if you switch the tabs.");
if (closeWindow) {
// redirect to another page
}
else {
// do nothing.
}
});

As #ROAL explained, the first blur event is because of actual blur, and rest are because of the browser trying to move away from the tab. A simple solution for this would be to use a flag to distinguish between the user generated event and the browser generated event. Give this a try:
var manualCancellation = false;
$(window).blur( function (e) {
if(!manualCancellation ){
var closeWindow = window.confirm("Your test will be cancelled if you switch the tabs.");
console.log(e);
if (closeWindow) {
// redirect to another page
}
else {
manualCancellation = true;
// do nothing.
}
} else {
// Reset the value of manualCancellation so that the event is fired the next time.
manualCancellation = false;
}
});

Disable parent events on click, but allow children to maintain his own events

I have big upload form, user can drag and drop images here. But when images are loaded, i'm showing button, which on click should link to some page. But this element instead of loading next page, opens file chose window (its parent default behaviour)
So I'm checking, if event has class, if it's true, I'm using e.preventDefault().
And this works better (I don't have image choose window on link click, but also this link will not work - every event is disabled) My question is, how i can enable linking now?
// jFiler is a parent - upload form, with event - on click it opens window for file choose - like input field.
$(document).on('click', '.jFiler', function(e) {
if ($(event.target).hasClass("jFiler-input-done-btn")) {
e.stopPropagation();
e.preventDefault();
}
});
$('.jFiler-input-done-btn').on('click',function(e) {
// Test works, but this is a link, and it cannot link to another page now...
alert ('test')
});

You break the link execution with e.stopPropagation() and e.preventDefault() in the parent click event. You have to just return true there.
$(document).on('click', '.jFiler', function(e) {
if( $(event.target).hasClass("jFiler-input-done-btn") ) {
return true;
}
});

Just redirect to the other page inside the click event you already attach :
$('.jFiler-input-done-btn').on('click',function(e) {
windows.location.href = $(this).attr('href');
});
//OR also
$('.jFiler-input-done-btn').on('click',function(e) {
e.stopPropagation();
});
Hope this helps.

how can I check if a particular item is clicked with .blur() in jquery

I have an autocomplete dropdown that appears when a user starts typing in a textbox (I'm using jquery mobile but I don't think that's important to my problem). I want to be able to hide the whole dropdown list when a user clicks anywhere on the page. However, I don't want to hide the dropdown when a user actually clicks on the dropdown itself.
Is there a way I could catch the click event in order to know what was clicked?
Here's my blur function:
//hide autocomplete when dropdown is not clicked
$("#search-div input").blur(function () {
$("#autocomplete-list").hide();
});
I was thinking of somehow putting an if statement in my blur function. Here's my pseudo code:
if( dropdown clicked)
{
run code to take text from dropdown and place in textbox
}
else
{
hide dropdown
}
Would it be possible to know whether my dropdown is clicked or something else is clicked while in my blur function? When I debug my javascript I'm only seeing an event that's related to the textbox doing the blur()
Edit:
Here is a function I'm using to handle when the dropdown is clicked:
$( document).on( "click", "#autocomplete-list li", function() {
var selectedItem = event.target.innerHTML;
$(this).parent().parent().find('input').val(selectedItem);
$('#autocomplete-list').hide();
runSearchQuery();
});

You can listen for any click, not just a blur, and then check what the clicked element was. e.currentTarget gives you what was clicked.
var clickHandler = function(e) {
if ($(e.currentTarget).hasClass('dropdown')) {
// do nothing
} else {
// Make sure you unregister your event every
// time the dropdown is hidden.
$(window).off('click', clickHandler);
// hide
}
}
// When the dropdown comes down, register an event on the whole page.
$(window).on('click', clickHandler);

control page to move to top in case of confirm box

The following is my code snippet:
$(document).ready(function()
{
$('table#example td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
});
});
My grid-view is on the bottom of the page. Either I press Ok or Cancel Button, page moves to TOP.
I want to remain the same position. How to control this.

It actually doesn't have anything to do with the confirm; it's the fact you're clicking a link (I'm guessing the link has either href="" or href="#" in it). The browser is following the link, which is the default action for the click event of links.
You need to prevent the default action, which you can do by returning false from your function, or by accepting the event argument to your click function and calling event.preventDefault().
Returning false (which both prevents the default action and stops the click bubbling to ancestor elements):
$(document).ready(function()
{
$('table#example td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
return false;
});
});
Using preventDefault (which only prevents the default, and doesn't stop bubbling; ancestor elements will also see the click):
$(document).ready(function()
{
// Note argument -----------------------------v
$('table#example td a.delete').click(function(event)
{
event.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("You Press OK");
}
});
});

JavaScript Hide Element When Clicking Anywhere on Page

I have a sliding JS menu that opens when you click the noty_menu link, then closes when you click that link again. Is there a way to set it so that the menu closes when you click ANYWHERE on the page?
Here's the relevant code:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
});

You could catch a click on the body:
$('body').click(function() {
/* close menu */
});
But then in your menu click you have to prevent propagation of the click up to body. Otherwise the menu will open, the click will propagate up, and the menu will immediately close. return false; should suffice here:
$('.noty_menu').click(function () {
$('ul.the_menu').slideToggle('medium');
return false;
});
(You could also read in the event argument to the handler function like function(ev) { ... } and call ev.stopPropagation()).
You may also want to prevent clicks inside the menu from closing it:
$('ul.the_menu').click(function () {
return false;
});
Note that this solution comes with a caveat that any other click event that stops propagation will also prevent the menu close.

u can use
$('body').click(function(){
//ur code
});
to do this

You can check the entire document, however that includes clicks on the menu (if you have any spacing, this could annoy the user) by something like this:
var menu=$('ul.the_menu');
$(document).on('click',function(){
if(menu.height>0) {
menu.slideToggle('medium');
}
});