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;
Related
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'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;
}
});
I have a code that determines if current browser window or tab is active. If it's active, the title of the tab says "active" and if not it says "blurred"
It is working fine. Here's the code:
$(window).on("blur focus", function (e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
if (e.type == "blur") {
document.title = 'blurred';
} else if (e.type = "focus") {
document.title = 'focus';
}
}
$(this).data("prevType", e.type);
})
The code above is working fine.
Now if I add AJAX to it, it doesn't work.
$(window).on("blur focus", function (e) {
var prevType = $(this).data("prevType");
if (prevType != e.type) { // reduce double fire issues
if (e.type == "blur") {
document.title = 'blurred';
} else if (e.type = "focus") {
var interval = function () {
$.ajax({
url: "<?php echo base_url('home/get') ?>",
cache: false,
success: function (html) {
$("#text").val(html);
document.title ='focus';
},
});
};
setInterval(interval, <?php echo $int ?>);
}
}
$(this).data("prevType", e.type);
})
It says focused if it's in focus. If I go out of focus, it says "blurred" for less than a second, then says focus again. I don't know why. I want it to say blurred if it's not in focus. Adding the AJAX code doesn't make it work.
Please help. Thanks.
You need to use clearTimeout() in your blur event. My code continuously polls my server for data, but when I go out of the page, it stops polling. Please look at the implementation below. I have done the similar one in my application here:
$(window).blur(function() {
clearTimeout(getJsonTmr);
clearTimeout(updatePreviewTmr);
}).focus(StartTimers);
function StartTimers () {
// Every half a second,
getJsonTmr = setInterval(function () {
$.get("/doodles/update?getJson&DoodleID=" + DoodleOptions.DoodleID, function (data) {
data = JSON.parse(data);
if (!DoodleOptions.isActive)
clearDoodleCanvas();
$.each(data, function (index) {
drawFromStream(data[index]);
});
});
}, 500);
updatePreviewTmr = setInterval(function () {
$.post("/doodles/update?updatePreview", {
"DoodleID": DoodleOptions.DoodleID,
"DoodlePreview": canvas.toDataURL()
});
}, 5000);
}
StartTimers();
You can use the above code as reference and change yours.
A simple reference implementation for you...
function timers() {
tmrAjax = setInterval(function () {
$.get(/* ... */);
}, 1000);
}
timers();
$(window).blur(function () {
clearInterval(tmrAjax);
}).focus(timers);
I am implementing a new feature to let my page to support endless scroll AJAX show. But when I pull down my page scroll bar, sometimes the same request occurs.
This means that alert(nextPage) method is executed and it shows the same result. I've added the event.stopPropagation() code, but it didn't solve the problem. How can i fix it?
(function(window, undefined) {
var app = {
event: {
add: function(obj, type, handle) {
try {
obj.addEventListener(type, handle, false);
} catch (e) {
try {
obj.attachEvent('on' + type, handle);
} catch (e) {
obj['on' + type] = handle;
}
}
}
},
scroll: function(id, url) {
$.get(url, function(html) {
$("#" + id).append(html)
});
}
}
})(window);
HTML
<script>
$(function() {
app.event.add(window, "scroll", function(event) {
var nextPage = getNextPage();
alert(nextPage);
app.scroll("productTable", '?page=' + nextPage);
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
});
});
</script>
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.