I'm working on a quiz. The page can't be closed before submitting the form, otherwise all data will be lost. This can be done using:
window.onbeforeunload = function () {
return "Are you sure?"
}
But what if I don't want to trigger this alert if user clicked on "Submit"? I tried the code below but it doesn't work at all - it doesn't show the alert even if window is being closed.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
} else {
return 'Are you sure?'
}
}
});
One simple solution is to just return the function without any value.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
return; // equal to return undefined;
} else {
return 'Are you sure?'
}
}
});
A cleaner solution would be, to simply set the window.onbeforeunload to null.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
if(!clicked_submit) {
window.onbeforeunload = function () {
return 'Are you sure?'
}
} else {
window.onbeforeunload = null;
}
});
Related
This is my javascript code ...i want call a function when click close browser at window.close().But not working..You can help me.Thank so much.<3
<script>
$(document).ready(function () {
var typeChange = false;
$(document).on("keyup", 'form input', function (e) {
typeChange = true;
});
$(document).on("change", 'form select', function (e) {
typeChange = true;
});
function changeURL() {
window.addEventListener("beforeunload", function (e) {
if (typeChange) {
e.preventDefault();
e.returnValue = "";
}
}, {once : true});
}
$(document).on('click', '.sidebar-menu a', function() {
changeURL();
});
// window.addEventListener("close", function () {
// changeURL();
// });
// window.close() = function() {
// changeURL();
// };
});
</script>
You were quite close... But there are two things:
You have to register the event listener for beforeunload when the page loads... Not when it is about to unload ;)
It won't be necessary to use an event handler on the .sidebar-menu a elements if those links are making the browser to navigate.
So here is the code that should work for you:
$(document).ready(function () {
var typeChange = false;
$(document).on("keyup", 'form input', function (e) {
typeChange = true;
});
$(document).on("change", 'form select', function (e) {
typeChange = true;
});
window.addEventListener("beforeunload", function (e) {
if (typeChange) {
e.preventDefault();
e.returnValue = "";
}
}, {once : true});
});
I'm afraid 'window' object doesn't have event 'close', howerver it has event 'beforeunload'. check belows codes copied from the below link.
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
Below artilce explains it in much more details
https://www.geeksforgeeks.org/how-to-detect-browser-or-tab-closing-in-javascript/#:~:text=A%20tab%20or%20window%20closing,the%20tab%20or%20the%20browser.
I was looking at this article to apply header menu with dropdowns in my mvc5 knockoutjs solution.
https://jdmdigital.co/news/codex/bootstrap-3-secondary-dropdown-menu/
The frontend it looks nice, and it is ok in my solution, however, I cant figure it out how to bind js section to work.
Now when I click on my dropdown parent item, nothing happens, because the js code is not working.
here is my setup of the js (knockoutjs) file.
define(['durandal/system', 'plugins/router', 'durandal/services/logger', 'knockout', 'common', 'plugins/dialog', 'durandal/binder', 'fastclick'],
function (system, router, logger, ko, common, dialog, binder, fs) {
var shell = {
activate: activate,
router: router,
};
// Make Dropdown Submenus possible
$('.dropdown-submenu a.dropdown-submenu-toggle').on("click", function (e) {
$('.dropdown-submenu ul').removeAttr('style');
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
// Clear Submenu Dropdowns on hidden event
$('#bs-navbar-collapse-1').on('hidden.bs.dropdown', function () {
$('.navbar-nav .dropdown-submenu ul.dropdown-menu').removeAttr('style');
});
//...
//...
//OTHER INIT METHODS (not in the scope for this question)
//#region Internal Methods
function activate() {
var result = registerRoutes();
//setRouteGuard();
if (window.cordova) {
window.document.addEventListener("deviceready", function () {
shell.refreshUserData(true);
shell.changeLanguage();
});
} else {
shell.refreshUserData(true);
shell.changeLanguage();
}
shell.isLoading.subscribe(function (newValue) {
//if something gone wrong
if (newValue) {
setTimeout(function () {
//shell.isLoading(false);
}, 10000);
}
});
if (router.activeInstruction().config.moduleId == "viewmodels/parentschedule") {
if (shell.isAnonymousUser() == true) {
shell.isClient(false);
shell.isEmployee(false);
}
else {
shell.isClient(true);
shell.isEmployee(true);
}
//console.log("test");
}
return result;
}
function route(r, moduleId, name, visible, alwaysVisible, role, condition) {
var self = this;
self.route = r;
self.moduleId = moduleId;
self.title = name;
self.visible = visible;
self.nav = true;
self.role = role;
self.condition = condition;
self.mouseover = ko.observable(false);
self.onhover = function () {
self.mouseover(!self.mouseover());
};
self.goToPage = function () {
router.navigate(this.hash);
};
self.alwaysVisible = alwaysVisible;
self.isTouched = ko.observable(false);
self.setTouched = function () {
self.isTouched(true);
return true;
}
self.setUnTouched = function () {
setTimeout(function () {
self.isTouched(false);
}, 200);
return true;
}
self.isActiveMenuItem = ko.computed(function () {
return router.activeInstruction() &&
router.activeInstruction().fragment.indexOf(self.route) > -1
});
return self;
}
//#endregion
});
I am working with a MVC4 project. I have an edit page where I allow users to add items to a HTML table. When items are added and not saved, I use a window.onbeforeunload to warn the user when trying to leave the page. Everything is working out expect the case where I only delete one item from the table, my window.onbeforeunload = null; triggers. I only want it to trigger when ALL items are removed.
Code examples:
$("#AddLinkDiv a").on("click", function () {
$.ajax({
url: "../../DrugArticles/EditHandledPropertiesRow/" + $("#NplPackId").val(),
cache: false,
success: function (data) {
$("#EditDrugArticleTable tr").last().after(data);
$("#EditDrugArticleTable tr").last().addClass("ToBeAdded");
window.onbeforeunload = function() {
return 'Are you sure you want to leave?';
};
addDatePicker();
},
dataType: "html"
});
return false;
});
...
if ($("#EditDrugArticleTable .State[Value='New']").find("tr").length == 0) {
window.onbeforeunload = null;
}
...
$("#EditDrugArticleTable").on("click", "td.Delete a", deleteRow);
...
function deleteRow() {
var parentRow = $(this).parent().parent();
var state = parentRow.find("input.State").val();
if (state == "Existing") {
parentRow.addClass("ToBeDeleted");
parentRow.find("input").not("[type='hidden']").prop("disabled", true);
parentRow.find("input.State").val("Deleted");
$(this).toggleClass("backStage");
$(this).attr("title", "Ångra");
window.onbeforeunload = function() {
return 'Are you sure you want to leave?';
};
}
else if (state == "Deleted") {
parentRow.removeClass("ToBeDeleted");
parentRow.find("input").prop("disabled", false);
if (!parentRow.find("input.Procured").is(":checked")) {
parentRow.find("input.Price").prop("disabled", true);
}
parentRow.find("input.State").val("Existing");
$(this).toggleClass("backStage");
$(this).attr("title", "Ta bort");
if ($("#EditDrugArticleTable").prop(".State[Value='New']")) {
window.onbeforeunload = null;
}
}
else if (state == "New") {
parentRow.remove();
if ($("#EditDrugArticleTable").prop(".State[Value='New']")) {
window.onbeforeunload = null;
}
}
return false;
}
Thanks in advance.
Try use this:
$(window).unbind("beforeunload"); - when you need to undind event
$(window).bind("beforeunload", function() { ... }); - or this, when you need to get it back
Be careful using this event. Opera doesn't handle onbeforeunload, or i don't know hot to do it.
After last comment I think it must look like this:
function ckeckUnloadEvent() {
if ($("#EditDrugArticleTable .State[Value='New']").find("tr").length == 0) {
window.onbeforeunload = null;
}
else {
window.onbeforeunload = function() {
return 'Are you sure you want to leave?';
};
}
}
Your function:
var parentRow = $(this).parent().parent();
var state = parentRow.find("input.State").val();
if (state == "Existing") {
...
}
else if (state == "Deleted") {
...
}
else if (state == "New") {
...
}
ckeckUnloadEvent();
return false;
is there any chance to create a function that i can call?
if i'm putting the following lines in the document ready function it works:
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
But if i'm doing this i can't call. So I tried this:
function icancall()
{
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
this.brightness(brightness);
this.render(function () {
check = this.toBase64();
});
}
So i thought i can call this with icancall(); But nothing happened. What am I doing wrong?
What i want do: executing the Caman function on a button click.
I hope you can help me !
function resz(){
Caman("25-02-2014_16-37-13.jpg", "#example-canvas", function () {
try {
this.render(function () {
var image = this.toBase64();
xyz(image); // call that function where you pass filters
});
} catch (e) { alert(e) }
});
}
[Apply CamanJS filters by this function]
function xyz(image){
var filters_k = $('#filters');
filters_k.click(function (e) {
e.preventDefault();
var f = $(this);
if (f.is('.active')) {
// Apply filters only once
return false;
}
filters_k.removeClass('active');
f.addClass('active');
var effect = $.trim(f[0].id);
Caman(canvasID, img, function () {
if (effect in this) {
this.revert(false);
this[effect]();
this.render();
}
});
});
}
When I click on the 'slide-toggle' link, my url turns from mysite.com to mysite.com/#
I was told that I needed to put a 'return false' somewhere in here but I'm not sure where. Can someone kindly help me out?
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
});
It would be nicer not to use return false but to use event.preventDefault instead. You can put this at the very top of your event handler:
$('a#slide-toggle').click(function(e) { // note e added as the function's parameter
e.preventDefault();
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
});
This has the same effect as return false, but with the following advantages:
It is semantically more logical -- it does what it says
You can put it at the head of the function, so it is immediately obvious
You can have multiple exit points without having to ensure they are all return false
If any part of your code causes an error, the default action will still be prevented
like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
Probably you need to add the return false also in the $('a#slide-toggle').click() function
$(document).ready(function() {
$('a#slide-up').click(function () {
$('.slide-container').slideUp(function(){
$('#slide-toggle').removeClass('active');
});
return false;
});
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
**return false;**
});
});
I think, it should be like this:
$('a#slide-toggle').click(function() {
var slideToggle = this;
if ($('.slide-container').is(':visible')) {
$('.slide-container').slideUp(function() {
$(slideToggle).removeClass('active');
});
}
else {
$('.slide-container').slideDown();
$(slideToggle).addClass('active');
}
return false;
});
You have one at the end of slide-up; add one to the end of slide-toggle.