I want to show a web notification to the user if they left the page open for 10 seconds. I have already taken the notification permission.
Problem here is the notification occurs multiple times even if the user comes back to the page in less than 10 secs. Already use clearTimeout for flushing myVar value....but no luck.....any help!
var myVar;
window.onblur = function myFunction() {
myVar = setTimeout(function () {
var notification = new Notification("XXX page is open in background ");
}, 10000);
clearTimeout(myVar);
};
want to make in such a way that only if user goes out of the page multiple times the notification will trigger everytime....but if he comes back to the page it will not appear..
Well, it could be due to testing. You must realize that window.onblur is triggered each time you leave the page. So if you leave, enter, leave, enter, leave, you will get 3 popups; each event runs independantly.
What you should do is call clearTimeout() in your window.onfocus event; don't forget to clear your myVar variable in both your popup handling code and your onfocus event (and test for it being null or not).
Related
I'm utilizing <v-dialog> component to display a form for my web app. I want to implement an unsaved changes dialog to popup when the user aborts their changes without saving and either close/keep the dialog open depending on a button press. Unfortunately, I'm having a bunch of trouble figuring out exactly how to prevent the default closing actions done by the framework.
So from what I can tell, you can close a dialog 3 different ways:
Setting the v-model property to false.
Clicking outside of the v-dialog modal unless the persistent prop is set to true.
Pressing the escape key.
Let's not worry about the 2nd way to close the dialog I referenced above and assume it is set to true.
Approach #1:
My first approach was to only allow the user to exit the dialog if they hit a cancel button on the form. I quickly hit a snag when I tried to disable the use of the escape button.
Here's what I have tried so far: In my App.vue mounted function:
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
This should work. The log message is displayed in the console, but the dialog still closes after the escape key is pressed. I know I should be using key codes here, but this is for readabilities sake. I've also tried keyup and keypress with no success. There has to be something wonky happening in either the Vue.js or Vuetify framework that's messing this up.
Approach #2:
After I failed miserably trying to disable the escape key, I had to try something different. I tried adding this code inside the watch function to try and keep the dialog open if they cancelled:
dialog (val) {
if (val) {
console.log('Dialog is true')
} else if (!val && !confirm('Unsaved changes, do you still want to exit?')) {
console.log('User Wants to Keep Dialog Open')
this.dialog = true
} else {
console.log('Dialog is False')
this.close()
}
}
When I try and close the dialog, the confirm message pops up, and I hit the cancel button. Then, for some reason, the confirm dialog opens again. So, I hit cancel again, then the dialog dismisses like nothing ever happened. Here's what the console reads:
User Wants to Keep Dialog Open
Dialog is true
User Wants to Keep Dialog Open
Dialog is true
I understand why the dialog watch method is being called again, what I don't understand is why the confirm dialog is showing again. That code should never be executing after cancelling the confirm message the first time. The log message shows that there's no way that code should be executing again. Something must be happening behind the scenes that I don't realize.
Anyone have experience with preventing the v-dialog component from closing? Or any help with my two approaches? Thanks in advance.
It's a property on the dialog:
<v-dialog persistent
That will force them to keep it open unless you call the closure programatically by toggling the model.
I have a local notification with action buttons 'Start' and 'Remind later'. When I click on either of two, the app opens. I want to keep it for the Start button, but for Remind later button I want to silently run some code (reschedule notification on a later time) without opening an app.
Is this possible to do?
function onOpened(notification) {
if (notification.action == 'Start') {
cancelNotification(notification.id)
NavigationService.navigate(notification.title)
} else {
cancelNotification(notification.id)
// reschedule
let dateTime = new Date(notification.fireDate)
dateTime.setMinutes(dateTime.getMinutes() + 30)
scheduleNotification(notification.id, notification.title, notification.message, dateTime)
}
}
This code works, but as I said, it bring the app to the foreground, and I'd like to avoid it.
You need to include your full code if you looking for help, but from your tags, I assume you are using React Native Push Notifications. If that's the case you might want to look at this Action click brings the app from background to foreground issue. Basically, you need to go through some native codes and change a few lines.
I have a Windows 10 Universal Windows Platform app with multiple pages, a main page, a list page and a details page and use the following to navigate to List page:
this.Frame.Navigate(typeof(ListPage), parameter);
When you are on the list page you can select an item which will launch a details page like so:
this.Frame.Navigate(typeof(DetailsPage), parameter);
Which works fine, the parameter is a selected Id or information then when using the Back button which on a Desktop app or Phone uses:
this.Frame.GoBack();
This always returns to the MainPage, that is when go from Main, to List to Details hitting back goes to Main, how do I get the GoBack to Go back to the previous page, it always seems to go home rather than the user expected behaviour, an ideas how to resolve this?
I’ve seen this before when you subscribe to the HardwareButtons.BackPressed event (or whatever the equivalent is in a Win10 UWP app) on a page, but then don’t unsubscribe from it. This means two event handlers get called when pressing Back, and both event handlers call Frame.GoBack().
I always subscribe to the event in the page’s NavigatedTo event, and unsubscribe in the NavigatedFrom event.
Could this be happening with your app?
If every page in your app should have the same behaviour, i.e. go back to the previous page, then subscribe to the back button event in the app class as suggested by #RoguePlanetoid in the comments:
SystemNavigationManager.GetForCurrentView().BackRequested += OnBackRequested;
The OnLaunched method would be a good place to do this. Don't forget to tell the OS to display the back button when the app is running on a desktop or tablet:
SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = AppViewBackButtonVisibility.Visible;
Then, add an event handler in the app class like this:
private void OnBackRequested(object sender, BackRequestedEventArgs e)
{
Frame rootFrame = Window.Current.Content as Frame;
if (rootFrame.CanGoBack)
{
e.Handled = true;
rootFrame.GoBack();
}
}
If you want different behaviour on different pages when back is pressed, i.e. ask the user to confirm losing their changes or something, then subscribe to the back button event in a pages OnNavigatedTo method (the code will be same as above), but make sure you unsubscribe in the page's OnNavigatedFrom event:
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
SystemNavigationManager.GetForCurrentView().BackRequested -= this.OnBackPressed;
base.OnNavigatedFrom(e);
}
I deployed Uploadcare and would like to track the widget multifilepick progress. My code:
function placeOrder(){
var widgets = uploadcare.initialize();
var widget = uploadcare.MultipleWidget('[role=uploadcare-uploader][data-multiple]');
widget.onUploadComplete(function(info) {
$('#orderForm').find('[type="submit"]').trigger('click');
});
};
Trying to execute a submit button only when the upload is complete. Here are the issues:
If a user clicks the button during upload the trigger gets fired immediately the upload completes taking away control from the user.
If a user clicks the button only after upload completes, nothing happens.
Anyone out there that can help? Thanks.
I'm having a problem with a variable I'm using to track the status of a user activity. In a GUI I have a button that, on clicking the button launches a second GUI. In that GUI, the user can either complete the activity started in the first GUI or not.
If the user cancels the second GUI, then the idea is to go back to the first GUI, leaving all variables and lists with their current values. If the second GUI completes the activity of the first GUI, then all variables and lists should be reset.
To track this, I have a variable (Boolean complete) initially set to FALSE. In the second GUI, when the "OK" button is clicked (rather than the "Cancel" button), the second GUI calls a method in the first GUI, changing the value of "complete" to TRUE.
To see what the heck is going on, I have System.out.println at several points allowing me to see the value of "complete" along the way. What I see is this:
Launching first GUI - complete = FALSE
Launching second GUI - complete = FALSE
Clicking "OK" in second GUI - complete = TRUE
Second GUI closes itself, returning to complete first GUI activity
First GUI finishes activity with complete = FALSE
I'm assuming it is because I am launching the second GUI with a showandwait, and when the method containing the showandwait begins, the value of "complete" = FALSE. The value changes in the WAIT part of show and wait, then the method continues and that is where I get the value still being FALSE, though it was changed to TRUE.
Here is a summary of the code in question (if you need exact code, it's longer, but I can post on request):
completeButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent t) {
try {
System.out.println("b4 calc = " + complete); // complete = FALSE
// all the code to create the calcStage
calcStage.showAndWait(); // second GUI, which calls a method in THIS
// class that changes complete to TRUE. That method
// (in THIS file) also has a println that shows the change.
getComplete(); // tried adding this method to check the value of
// "complete" after the change made by the calcStage
// (which calls a method in this same file)
System.out.println("Complete? " + complete);
// this shows complete = FALSE,
// though in the calcStage it was changed to TRUE
if (salecomplete) {
// code that should reset all variables and lists if the activity was completed
}
}
}
}
The question here is why does the second GUI successfully change the value of "complete", but when I return to the first GUI it still sees complete as FALSE? And how can I get around this?
Try having the controller of the second GUI calling a method in the first GUI's controller to modify that complete variable
For example:
// Code to handle the OK button being pressed
#Override
public void handle(ActionEvent t) {
// Do validation and work
//reference to the first controller object
firstController.setComplete(true);
}