I would like to lock users on the page. The users can go on other tabs or desktop at least when they click on other tab of browser I would like to show them alert dialog which say "Are you sure?"
Hi guys Thanks for helping
I find code which is I need :
requestFullscreen = () => {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else if (document.exitFullscreen) {
document.exitFullscreen();
}
};
then I called this function onClick event on Button. After that I will check when User try to left page (alt+f4, alt+tab .. etc) I will show alert for "Are you sure for left page "
Related
I have a button(Material-UI) in my ReactJs application. Now, the scenario is when a user clicks(too many times thou!) and call an API to insert my form data there are multiple clicks triggering which tends to insert twice, thrice or n times(depends on user clicks).
So, I basically want a proper way to accept a single click(despite of user clicking a button n times).
Can anyone suggest me a proper way of doing it.
Note: I have tried out disabling and enbaling of button on click, as well as setTimeout to call API only on single click, but it does not work. Still on production I am having issues.
So I want a proper way for implementing single click on button (let user click multiple times the button)
Set a state variable on button click and disable the button based on the variable. So that the user will not be able to click again. And also, you can enable the button on API response.
example:
[disableButton, setDisableButton] = useState(false);
const submitFunction = () => {
setDisableButton(true);
apiCall().then(resp => {
setDisableButton(false) // enable button on api success response
// code on success response
})
.catch((error) => {
setDisableButton(false)
});
}
<button onClick={() => submitFunction()} disabled={disableButton}>Submit</button>
I'm trying to implement a validation functionality in React wherein the user will fill in a form, and then the user can navigate to other tabs of the application.
What i want to do is disabling the navigation until certain parts of the form has been filled, if the user attempts to change the tabs without filling said fields, a message will appear directly on the page to alert the user that the fields are required.
My current approach is to capture the event prior to the page switch, check for the form's validity, and then decide whether or not the user can navigate based on said.
The problem is I have no idea which event to capture or how to prevent user's navigation, can someone help me?
EDIT:
Here's what i've tried so far:
componentWillUnmount() {
this.handleValidation();
}
handleValidation = () => {
if (this.invalidForm()) {
this.setState({ showValidation: true });
this.preventNavigation();
}
};
preventNavigation = () => {
window.location.reload();
}
render()
return (
///Form information...
{this.state.showValidation && (
<div>
You must provide all required information
</div>
)}
)
I've thought that by using location.reload in componentWillUnmount(), the page would be reloaded before the navigation (hence, making the user stay in the old page), but what really happens is that it navigates to the other tab, then proceeds to reload there.
With React, after the user has been redirected after clicking , a function needs to activate once the new page finishes loading. that function scrolls the user to the bottom of the web page. What I cant figure out is how to pass state with a to tell receiving component to activate its function.
So basically user clicks on something like this..
<Link
to="/"
setState(true)
>
Contact
</Link>
After being redirected, the newly loaded page has a function waiting for it like this..
const redirectTrigger = () =>{
if (state == true){
scrollToBottom()
}
}
But this seems impossible?
I have a PopOver page and I pass a string message to it, what I want is use this popover as a Tooltip for some elements on the page.
Example, on my page I have this:
<button ion-button icon-only clear (click)="shareThisCardByEmail(item)" (blur)="showTooltipShareByEmail($event)" >
Share
</button>
In this case I am associating the event "blur" (I am not sure what would be the best for this case) and I need when the view is loaded that event is shot and the popover is shown to the user.
On the component I have this:
showTooltipShareByEmail(event ? : any) {
let popover = this.popoverCtrl.create(PopoverTooltipPage, {
"message": 'This is a message on the tooltip popover about sharing by email'
});
let navOptions: any = {
animate: true,
ev: event
};
popover.present(navOptions);
}
How would I activate one specific event for an specific element on the page then the tooltip would be displayed?
I saw 2 questions but I'm trying to answer this:
I need when the view is loaded that event is shot and the popover is shown to the user
Check this out for the lifecycle events https://ionicframework.com/docs/api/navigation/NavController/.
You can call the popover when the view did load at here
ionViewDidLoad() {
console.log("I'm alive!");
// Right here
}
I need some direction in the following situation I have to solve:
I have a 'page' that have some fields that can be edit with 'save' button and with another button to 'navigate' to another place.
If the user edit some fields and click on the 'navigate' button before saving the data, the application should show and message something like:
Confirm Navigation
Button1 -> Leave this page Stay on this page
Button2 -> Stay on this page
I was think that I need some availability of pre-processing, before navigating to another place, Is there some availability in marionettejs before navigating in the AppRouter Or Router objects?, also I need to get some indication from the user, to which button he clicks.
You should have events set up for the buttons
Backbone.Marionette.ItemView.extend({
/* Removed other stuffs*/
events: {
'click #navigateBtn': function(e) {
/* Do your preprocessing in here */
}
}, //events
}