I have a parent div content_div which contain form elements inside a table where user selects multiple row elements(clickable rows),download link elements etc.
I have a warning pop up for the user changes done and then try to refresh without clicking save button.
When I select a row and tried to click a download link inside that row,I dont need to show the warning popup.I have the following code but its not working.
If I dont select any rows and tried to click any download links,its not showing any popup,means thats fine.
If I select any rows and then try to click any download links,its showing me the popup which is wrong in my case.
If a user clicks on some other links outside my #content_div,its showing the popup which is true for me.
$(function() {
var formmodified = 0;
//click event for each row inside the table
$(".course_row").click(function(e) {
-- -- -
formmodified = 1; //setting the variable to 1 means user
has changed something inside the page
});
//when form submits
$("#submit").click(function() {
formmodified = 0; //assuming that form is saved after form change
});
//function for warning popup
window.onbeforeunload = confirmExit;
function confirmExit() {
var element_clicked = 0;
//#content_div is the main parent which contain the entire
contents.
$('#content_div').children().on('click', function(e) {
console.log('clicked');
element_clicked = 1; //means the clicked element is inside the #content_div which can be a link or other things
});
console.log(element_clicked);
EDIT: I am always getting element_clicked value as 0 when I click any element inside the div.The value 'clicked'
is showing.I dont know why the value
for the variable is not setting to 1
if (element_clicked) {
//element_clicked = false;
return; // abort beforeunload
} else {
if ((!element_clicked) && (formmodified == 1)) {
return "The selected courses are not saved.
Do you wish to leave the page ? ";
}
}
}
});
Please help me in this case.Thanks in advance
Just add click() event to anchor elements and unbind onbeforeunload event.
$("a").on('click', function() {
window.onbeforeunload = null;
});
This is just an example. You can add a class or id to the selector so that the event is unbinded only when clicked on a specific anchor tag.
For example
$("#content_div a").on('click', function() {
window.onbeforeunload = null;
});
EDIT
If you want to add onbeforeunload to refresh, you either have to do it when any change is trriggered ir just add event when F5 button is pressed.
To be honest I think that first solution is better, necause then even if user clicks refresh button in a browser the popup will come out.
So you would have to change your functionality.
If you do not want to. Here is a quick add to F5 button.
$(document.body).on("keydown", this, function (event) {
if (event.keyCode == 116) {
window.onbeforeunload = true;
}
});
Related
I am trying to write this simple Javascript logic to disable multiselect field if user chose specific options from another select field. This is a JIRA dialog2, so I am using their JQuery namespace (eg: AJS).
Problem is when I open the dialog and select the specific values from the select field the handler for the change event of the select field runs properly and the other multiselect field is disabled. However, the snippet is not called/doesn't run if the dialog got closed by either pressing escape button or clicking outside it, as opposed to closing it by clicking the 'close' button. I am not a js expert and would appreciate any help in this.
(function($) {
$(function() {
AJS.dialog2.on("show", function(e) {
var targetId = e.target.id;
var spinning = false;
if (targetId == "sr-dialog") {
//start of the part that fails
//noticing that the change event for the searchtypeselect field is fired only when the dialog shows up first time and re shows again only if the dialog got closed by the 'close' button. If dialog escaped it doesn't fire anymore.
var $searchTypeSelect = AJS.$("#select-searchtype");
var $fieldMultiSelect = AJS.$("#field-multiselect");
$searchTypeSelect.change(function(e) {
if ($searchTypeSelect.val() == 'D' || searchTypeSelect.val() == 'S') {
$fieldMultiSelect.removeAttr('disabled');
} else {
$fieldMultiSelect.attr('disabled', 'disabled').val('');
}
}).trigger('change');
// end of the part that fails
AJS.$(e.target).find("#submit-spinner-trigger").click(function(e) {
var number = AJS.$("input[type=radio]:checked", "#topSearchForm").val();
var searchType = AJS.$("#select-searchtype option:selected", "#topSearchForm").val();
var fields = [];
AJS.$("#field-multiselect :selected", "#topSearchForm").each(function(i, selected) {
fields[i] = $(selected).val();
});
var since = AJS.$("#select-since option:selected", "#topSearchForm").val();
if (!spinning) {
AJS.$('.button-spinner').spin();
spinning = true;
}
});
}
});
});
})(AJS.$);
I don't think this is related to JIRA or AUI. It's just a javascript question.
You'd like to handle an event when a dialog gets 'closed' by clicking 'escape' or the 'x' at the top. These posts answer that:
Hook into dialog close event
How to handle ESC keydown on javascript popup window
Thanks GlennV. It is that actually and also hooking the event handler to the specific item on the screen helped fix the issue.
Answered here
I have this form that loads using jQuery $.ajax another form inside a container.
The list:
The loaded content within the container called form_load_dropdown_content:
On the left I have two small icons for edit and add. I want to use another ajax call to run specific PHP scripts to carry on the action desired.
I have the following problem:
when I click on each icon submit and respectively reset buttons display
when I click on the reset the both submit and reset are set to display: none
when I click on any the icon again, the click remains bind to the previous icon clicked before.
This is what I am doing:
form_load_dropdown_content.on("click", ".icon", function() {
// reusable selectors
var icon_box = $(".box_edit_icons");
var button_box = $(".box_buttons");
var submit_btn = $(".box_buttons input[type='submit']");
var reset_btn = $(".box_buttons input[type='reset']");
var option_value_input = $("input.option_value");
var option_order_input = $("input.option_order");
// common functions
button_box.show();
icon_box.hide();
if($(this).hasClass("ico_edit_small"))
{
// editing
form_load_dropdown_content.on("click", "input[type='reset']", function(event){
alert("reset from edit");
button_box.hide();
icon_box.show();
});
}
else if($(this).hasClass("ico_add_small"))
{
// adding
form_load_dropdown_content.on("click", "input[type='reset']", function(event){
alert("reset from add");
button_box.hide();
icon_box.show();
});
}
How can I differentiate between the two clicks, so that when I display the submit and reset from a specific icon type to run differentiated actions?
More clear:
when I click icon_add_small and then reset => output: 'reset from add'
then when I click icon_edit_small and then reset => output: 'reset from edit'... and so on without mixing the clicks.
I truly appreciate any help. I tried everything regarding stopping the propagation of the click... but nothing worked.
-----------------------------------------------------------
Edit:
I changed the if part to the following code and it works. Should I expect any problems for unbinding the click?
if($(this).hasClass("ico_edit_small"))
{
// editing
reset_btn.off("click");
reset_btn.click(function(event){
alert("reset from edit");
button_box.hide();
icon_box.show();
});
}
else if($(this).hasClass("ico_add_small"))
{
// adding
reset_btn.off("click");
reset_btn.click(function(event){
alert("reset from add");
button_box.hide();
icon_box.show();
});
}
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);
I know how to display an alert to the user if they attempt to navigate away from the current page asking them if they are sure they wish to do so but I was wondering if there is a way to display this alert ONLY when the window / tab is being closed?
I'd like to only have the confirmation display when the window or tab is being closed, not when the user clicks a link.
Not possible.
the only thing close is the onbeforeunload event, but there isn't a difference (to javascript) between a closed window/tab or a navigation to another page.
Follow-up:
I suppose you could attach a click handler to every anchor on the page and use a "dirty" flag, but that's really hack-ish. something like (forgive me, but using jquery for simplicity):
(function(){
var closingWindow = true;
$('a').on('click', function(){
if (this.href == /* on-domain link */){
closingWindow = false;
}
});
$(window).on('beforeunload',function(){
if (closingWindow){
// your alert
}
});
})();
but that's about as close as you're going to get. note: this isn't going to help if another javascript function uses window.location, etc.
You cannot differentiate between the two.
window.onbeforeunload is triggered immediately before the browser unloads its resources. You do not know the reason for the unload, only that it's about to occur:
From the MDN:
An event that fires when a window is about to unload its resources.
The document is still visible and the event is still cancelable.
How about doing something like this?
Have a global variable set to false (i.e. var hasCLickedLink = false;)
On all your links (<a>), attach an event handler that sets the variable to true
On onbeforeunload, check the value of the variable to see if a link has been clicked or not. If it is still false, then they haven't clicked a link so give them the alert.
You need to explicitly specify events for which you don't want to show confirmation dialogue box.
var validNavigation = 0;
function bindDOMEvents() {
// Attach the event keypress to exclude the F5 refresh
$(document).keydown(function(e)
{
var key = e.which || e.keyCode;
if (key == 116)
{
validNavigation = 1;
};
});
// Attach the event click for all links in the page
$("a").bind("click", function()
{
validNavigation = 1;
});
// Attach the event submit for all forms in the page
$("form").bind("submit", function()
{
validNavigation = 1;
});
// Attach the event click for all inputs in the page
$("input[type=submit]").bind("click", function()
{
validNavigation = 1;
});
};
$(document).ready(function()
{
bindDOMEvents();
window.onbeforeunload = function () {
console.log(validNavigation);
if (validNavigation == '1')
{
console.log("No Alert.. Continue");
}
else
{
return false;
}
};
});
This solution worked for me in Firefox with Violentmonkey.
It is used like most of all window.onbeforeunload and check if left mouse button was pressed. So if pressed, this mean, click at free space or link opens - not closing tab.
function DetectBrowserExit()
{
if (butpres == 0) {
//your action before closing tab, alert not showing
}
}
window.onbeforeunload = function(){ DetectBrowserExit(); }
// the key is pressed, then when window.onbeforeunload - link is opening, so, tab not closing
document.addEventListener('mousedown',function(e){
if (e.which == 1) { //1-lbutton 2-mb 3-rb
//e.preventDefault();
butpres = 1
setTimeout(function() {
butpres = 0 //if after 3 seconds the script still works then the link has not been clicked, clear the click and continue to catch new clicks
//alert(butpres);
}, 3000); //Two seconds will elapse and Code will execute.
//alert(butpres);
//command_lock();
}
},false);
For some weird reason i'm getting my confirm box coming up twice. here is my code:
$(".DeleteComment").live("click", function(){
var CommentID = $(this).attr("rel");
var confirm
if (!confirm('Are you sure you want to permanently delete this comment?')){
return false;
}else{
$(this).html("loading").css("color", "#999");
//AJAX HERE
return false;
}
});
Do you load any content dynamically (via ajax)? It could be the case that the click event is bound to the same element twice resulting in the double confirmation.
It happens when we bind event on the elements which are loaded dynamically via AJAX
So for example we are loading some dynamic html content (e.g. dynamic content in modal) on click of the edit form button,
And in that content if we have binded click event on some button e.g. delete button, then every time we click on edit form button, it binds the click event to delete button every time,
And if you have set confirm box on click event of delete button then, it will ask you as many time as it was binded for that click event means here if we have clicked edit form button 5 times then it will asks for your confirmation 5 times.
So for solving that issue you can unbind the event every time before binding event to dynamically loaded element as following :
$(document).off('click', '.DeleteComment').on('click', '.DeleteComment', function () {
if (confirm('Are you sure you want to permanently delete this comment?')){
//Delete process
return true;
}
return false;
}
Or Another way to solve this problem is to add your script in main page, means static page not in dynamically loaded one.
try this:
$_blockDelete = false;
$(".DeleteComment").live("click", function(event){
event.preventDefault();
//event.stopPropagation(); // it is not necessary
if (!$_blockDelete)
{
$_blockDelete =true;
var rconfirm = confirm('Are you sure you want to permanently delete this comment?');
if (rconfirm)
{
$(this).html("loading").css("color", "#999");
var CommentID = $(this).attr("rel");
//AJAX HERE
//return the value "false" the variable "$_blockDelete" once again ajax response
}
}
});
Did you try removing that not-used var confirm?