I am trying to display a dialog/confirm when a user browses away from a page/component.
I have the following dialog component which currently fires using a listener:
emptyBasket: function () {
basketChannel.publish({
channel: "basket",
topic: "emptyBasket",
data: {
}
});
},
OnClick which fires publish:
onTabLinkClick: function(e) {
var url = window.location.href;
var currentRoute = url.substr(url.length - 6)
if(this.state.BasketTotal > 0 && currentRoute != 'basket' ){
basketChannel.publish({
channel: "basket",
topic: "openDialog",
data: {
dialogTitle: 'Warning',
dialogContent: 'You have contacts in your basket, are you sure you want to leave?'
}
});
}
}
The listener in my dialog component then changes the state and displays the dialog:
_listenerForDialog: function(data) {
this.setState({
title: data.dialogTitle,
content: data.dialogContent,
visible:true
});
},
This works, but I would like to add an ok and cancel button, if the cancel button is clicked I would like stop the event.
How could I attach my component to e.preventDefault()?
Can I make this work like the native browser confirm()?
var confirmDialog = confirm("You have contacts in your basket, are you sure you want to leave?");
if(confirmDialog == false ){
e.preventDefault();
} else{
this.emptyBasket();
}
I am using the npm package https://www.npmjs.com/package/rc-dialog
UPDATED
onClose in current component:
onClose(){
this.setState({
visible:false
});
basketChannel.publish({
channel: "basket",
topic: "emptyBasket",
data: {
}
});
},
Thanks in advance
Related
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
//Page should not go back.
//This is where i want to write code,if the user clicks
No and the back button function should be disabled.
//Only when the user presses Yes,the page will go to
previous.
}
}
]
});
})
I dont know how to handle when the user presses no,i.e.Disable the back button function or event.
Finally i solved the issue.As the event emitted from the backButton is an promise.If I dont need to go back,i just reject that promise.
this.platform.backButton.subscribe(()=> {
const alert = await this.alertController.create({
header: 'Confirm!',
message: 'Do you want to go back!!!',
buttons: [
{
text: 'Yes',
handler: () => {
// Previous page loaded
}
}, {
text: 'No',
handler: () => {
reject()
}
}
]
});
})
Try this way to prevent the back button
this.platform.backButton.subscribeWithPriority(9999, () => {
this.dismiss();
});
I want to remove a data from firebase but all documents I have found all said use .remove() function as I show as codesnippet here. But this is not work at Ionic 3. Is that function is changed or what is the point that I didn't see.
selectBook(indexOfBook : Book){
this.actionSheetCtrl.create({
title: indexOfBook.nameOfBook,
buttons:[{
text:'Edit',
handler: () =>{
// TODO:Send the user to EditPage
}
},
{
text:'Delete',
role: 'destructive',
handler: () => {
this.getBookRef$.remove(indexOfBook.key);//**************************************
}
},
{
text:'Cancel',
role:'cancel',
handler: () =>{
console.log("The user has selected the cancel button");
}
}
]
}).present();
}
I'm attempting to override the back button on a screen with a prompt to Logout. See the following:
import React, { Component } from "react";
import { Alert, BackHandler } from "react-native";
export default class Dashboard extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
BackHandler.addEventListener("hardwareBackPress",this.handleBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress);
}
handleBackPress() {
Alert.alert(
"Logout",
"Are you sure you want to logout?",
[
{
text: "Cancel",
onPress: () => {
console.log("Cancel Pressed");
},
style: "cancel"
},
{ text: "Logout", onPress: () => this.handleLogout() }
],
{ cancelable: false }
);
}
handleLogout() {
this.props.navigation.navigate("Login");
}
}
As you can see, on mounting change, I'm binding and unbinding "hardwareBackPress" to this.handleBackPress. Note, I have to use .bind(this), otherwise I get
_this2.handleLogout is not a function
when I press the Logout in the Alert. Expected functionality is:
Back button is pressed
Functionality disabled (doesn't navigate)
Alert is displayed
Ok is pressed
Navigates back
Back button on previous screen has default action
But what actually happens is:
Back button is pressed
Navigates back
Alert is displayed
(Subsequent steps don't matter)
I noticed I don't have return true; anywhere in my handleBackPress(), so I added that:
handleBackPress() {
Alert.alert(
"Logout",
"Are you sure you want to logout?",
[
{
text: "Cancel",
onPress: () => {
console.log("Cancel Pressed");
},
style: "cancel"
},
{
text: "Logout",
onPress: () => {
return this.handleLogout();
}
}
],
{ cancelable: false }
);
return true;
}
But what happens now is:
Back button is pressed
Functionality disabled (doesn't navigate)
Alert is displayed
Ok is pressed
Navigates back
Back button press on previous screen results in Alert being displayed
I have verified that componentDidUnmount() is called, but it doesn't seem to have removed the event listener.
Has anyone encountered this issue before? For now, I've just resorted to globally disabling the back button by adding this handler at the entry point of the app, but that's not a long-term solution.
Edit: I noticed there's a lifecycle alternative, so I tried implementing that:
componentDidMount() {
this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
Alert.alert("Logout", "Are you sure you want to logout?", [{ text: "Cancel", onPress: () => {}, style: "cancel" }, { text: "Logout", onPress: () => this.handleLogout() }], { cancelable: false });
return true;
});
}
componentWillUnmount() {
this.backHandler.remove();
}
And while this makes it work (somehow), it has yet another side-effect. As soon as I navigate forward (which doesn't trigger componentDidUnmount(), due to stacked navigation), and navigate back, the back button behaves as such:
Back button is pressed
Functionality disabled (doesn't navigate)
Alert doesn't show up
The screen I'm navigating forward to has it's back button overridden, and seems to not play well with this alternative lifecycle. Will attempt to implement different approach on all subsequent screens; see if it behaves properly then.
Using the lifecycle alternative from the Documentation (https://facebook.github.io/react-native/docs/backhandler) seems to handle odd behaviour with Alert and return true;:
Dashboard.js
componentDidMount() {
this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
Alert.alert("Logout", "Are you sure you want to logout?", [{ text: "Cancel", onPress: () => {}, style: "cancel" }, { text: "Logout", onPress: () => this.handleLogout() }], { cancelable: false });
return true;
});
}
componentWillUnmount() {
this.backHandler.remove();
}
handleLogout() {
global.screenName = "Dashboard";
return this.props.navigation.navigate("Login");
}
As long as all subsequent screens that need the back button overridden also use the same logic:
Detail.js (subsequent screen in Stack navigator):
componentDidMount() {
this.backHandler = BackHandler.addEventListener("hardwareBackPress", () => {
return this.props.navigation.navigate("Dashboard");
});
}
componentWillUnmount() {
this.backHandler.remove();
}
I have a vue component for video upload, where I am warning a user when he tries to navigate away during the video upload that he will lose the file if he does so, like this:
ready() {
window.onbeforeunload = () => {
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
}
}
}
I am using sweetalert to alert the user about it. But how can I then make it stay on the same page, and prevent the navigation away before he confirms that he wants to navigate away?
This is the whole component:
<script>
function initialState (){
return {
uid: null,
uploading: false,
uploadingComplete: false,
failed: false,
title: null,
link: null,
description: null,
visibility: 'private',
saveStatus: null,
fileProgress: 0
}
}
export default {
data: function (){
return initialState();
},
methods: {
fileInputChange() {
this.uploading = true;
this.failed = false;
this.file = document.getElementById('video').files[0];
this.store().then(() => {
var form = new FormData();
form.append('video', this.file);
form.append('uid', this.uid);
this.$http.post('/upload', form, {
progress: (e) => {
if (e.lengthComputable) {
this.updateProgress(e)
}
}
}).then(() => {
this.uploadingComplete = true
}, () => {
this.failed = true
});
}, () => {
this.failed = true
})
},
store() {
return this.$http.post('/videos', {
title: this.title,
description: this.description,
visibility: this.visibility,
extension: this.file.name.split('.').pop()
}).then((response) => {
this.uid = response.json().data.uid;
});
},
update() {
this.saveStatus = 'Saving changes.';
return this.$http.put('/videos/' + this.uid, {
link: this.link,
title: this.title,
description: this.description,
visibility: this.visibility
}).then((response) => {
this.saveStatus = 'Changes saved.';
setTimeout(() => {
this.saveStatus = null
}, 3000)
}, () => {
this.saveStatus = 'Failed to save changes.';
});
},
updateProgress(e) {
e.percent = (e.loaded / e.total) * 100;
this.fileProgress = e.percent;
},
confirm(message) {
swal({
title: message,
text: null,
type: "warning",
showCancelButton: true,
cancelButtonText: "Cancel",
cancelButtonColor: '#FFF',
confirmButtonColor: "#2E112D",
confirmButtonText: "Yes, delete"
}).then(function(){
this.$data = initialState();
}.bind(this), function(dismiss) {
// dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
if (dismiss === 'cancel') { // you might also handle 'close' or 'timer' if you used those
// ignore
} else {
throw dismiss;
}
})
}
},
ready() {
window.onbeforeunload = () => {
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm('Are you sure you want to navigate away? Your video won't be uploaded if you do so!');
}
}
}
}
</script>
Mozilla documentation suggests
window.onbeforeunload = function(e) {
var dialogText = 'Dialog text here';
e.returnValue = dialogText;
return dialogText;
};
and also states that:
Since 25 May 2011, the HTML5 specification states that calls to window.alert(), window.confirm(), and window.prompt() methods may be ignored during this event. See the HTML5 specification for more details.
Source contains many other details regarding reasons and what to expect from modern browsers.
This question seems to be a duplicate of yours.
This answer suggests that to avoid weird browser behaviour you should set handler only when it's to prevent something (that is while navigating away should trigger a confirmation dialog)
But how can I then make it stay on the same page, and prevent the navigation away before he confirms that he wants to navigate away?
Add return false; to stop the event.
if (this.uploading && !this.uploadingComplete && !this.failed) {
this.confirm("Are you sure you want to navigate away? Your video won't be uploaded if you do so!");
return false; // <==== add this
}
return false; does 3 separate things when you call it :
event.preventDefault(); – It stops the browsers default behaviour.
event.stopPropagation(); – It prevents the event from propagating (or “bubbling up”) the DOM.
Stops callback execution and returns immediately when called.
I want to show a popUp in ionic, which does not allow the user to exit when he hasn't entered some input. Right now I'm using this here:
public showOwnIdentifierPrompt() {
// Prompt popup code
var promptPopup = this.$ionicPopup.prompt({
title: this.floor_name,
template: `<input ng-model="$ctrl.customFloorName"></input>`,
scope: this.$scope,
buttons: [
{
text: this.cancel,
type: 'button-clear button-balanced',
onTap: function(e) {
// Cancel creation
return false;
}
},
{
text: this.save,
type: 'button-clear button-balanced',
onTap: () => {
// Create new floor
return true;
}
}
]
});
promptPopup.then((res) => {
if (res) {
this.addNewFloor(this.customFloorName);
}
})
}
In the save onTap() event handler, I would like to access this.customFloorName from my class, to decide whether the user entered input. But it is always undefined. What can I do?
You can get value on Save with below code :
var value = this.scope.$ctrl.customFloorName;