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();
}
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();
});
Currently I try to integrate amazon payment.
I want to display the button, created with the function:
OffAmazonPayments.Button("AmazonPayButton", myAmznMerchantID
and after the User has logged in, I want to display the AdressBook Widget and the Payment Widget on the same Page.
The Button and the Widgets are displayed correctly, but when I try to confirm the Payment, I'm getting the Error-Constrains Message:
PaymentPlanNotSet The buyer has not been able to select a Payment
method for the given Order Reference.
But the Payment was selected.
I hope you can help me, to find my failure in this Javascript code:
window.onAmazonLoginReady = function () {
amazon.Login.setClientId(myAmznClientID);
};
window.onAmazonPaymentsReady = function() {
var __accessToken = 0;
var __orderReferenceId = 0;
show_amazon_Button();
function show_amazon_Button() {
OffAmazonPayments.Button("AmazonPayButton", ibuiAmazonPaymentsInfos.ibAmznMerchantID, {
type: "PwA",
color: "Gold",
size: "small", // "medium",
language: "de-DE",
authorization: function () {
loginOptions = { scope: "profile:user_id", popup: true };
authRequest = amazon.Login.authorize(loginOptions, function(response) {
if (response.error) {
//show Error
return;
} else {
__accessToken = response.access_token;
show_Adress_Widget();
}
});
},
onError: function(error) {
//handleError
}
});
}
function show_Adress_Widget() {
new OffAmazonPayments.Widgets.AddressBook({
sellerId: ibuiAmazonPaymentsInfos.ibAmznMerchantID,
onOrderReferenceCreate: function (orderReference) {
__orderReferenceId = orderReference.getAmazonOrderReferenceId();
//do Stuff
},
onAddressSelect: function (orderReference) {
show_Amazon_Wallet();
},
design: {
designMode: 'responsive'
},
onError: function (error) {
//handle Error
}
}).bind("readOnlyAddressBookWidgetDiv");
}
function show_Amazon_Wallet() {
new OffAmazonPayments.Widgets.Wallet({
sellerId: myAmznMerchantID,
onOrderReferenceCreate: function(orderReference) {
//do Stuff
},
design: {
designMode: 'responsive'
},
onPaymentSelect: function(orderReference) {
//activate buy button
},
onError: function(error) {
//handle error
}
}).bind('AmazonWalletWidgetDiv');
}
} //onAmazonPaymentsReady
In PHP I create the OrderReference over:
$params = array(
'order_reference_id' => $orderReferenceId,
'amount' => $amount,
'seller_order_id' => $buchungsKopf->getBuchung_nr(),
);
$responseObject = $client->setOrderReferenceDetails($params);
And even if I had selected a payment method before, I'm getting the "PaymentPlanNotSet" in the responseObject.
Same error, when I try to confirm the orderReference
$responseObject2 = $client->confirmOrderReference($params);
Before I had integrate the AdressWidget, I was able to do the payment.
Can you see what I'm doing wrong?
It seems I have found my failure.
When I want to display both Widgets (Adress and Wallet) on the same page, then I can not use the onOrderReferenceCreate-Method in the OffAmazonPayments.Widget.Wallet.
It seems like then it create a new order reference wich is not the same as the orderreference created by the AdressBook Widget.
Now I have delete this part of the Wallet Widget and everything seems to work fine.
So I have a DatePicker that I can change a certain field with, but I want it to update the HTML only when the user confirms the change.
However, currently, when I use the (ionChange) event in my ion-datetime element, it updates the UI automatically before my confirmation alert pops up.
How can I make it so that the value in my date picker will only change when the user presses confirm?
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
}
<ion-item detail-push>
<ion-label><b>Start: </b></ion-label>
<ion-datetime displayFormat="hh:mm A"
[(ngModel)]="item.EventStart"
(ionChange)="updateStartTime(item.EventStart)"></ion-datetime>
</ion-item>
You could just do a trick by keeping the old value of the EventStart. I added two code samples. First one will update the HTML but it will only keep the updated value if click on confirmation, otherwise it will set DatePicker to old value back. Second one will work as you expected but I don't know your value of item.EventStart is look like. I just guess it would something similar to this pattern '00:00'. Sample codes will worth you than explanation in words :).
First one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Second one
public oldEventStart = this.item.EventStart;
updateStartTime(startTime) {
this.item.EventStart = new Date('2000-01-01T'+this.oldEventStart+':00.00').toISOString();
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [
{
text: 'Cancel',
handler: () => {
this.item.EventStart = this.oldEventStart;
console.log('cancel');
}
},
{
text: 'Confirm',
handler: () => {
this.item.EventStart = startTime;
this.oldEventStart = startTime;
console.log(startTime);
}
}
]
});
alert.present();
alert.onDidDismiss(() => { this.item.EventStart = this.oldEventStart; });
}
Hope this will help to solve your problem. Cheers!.
When I use a bootstrap dialog I would use a prevent default. Try to change the following: updateStartTime(startTime) to updateStartTime(startTime,e) and then on your first line in that function add e.preventDefault(); See if that helps. You should then be able to do whatever you like in your cancel and confirm handlers.
Just return false in your updateStartTime function, so that the default datepicker handler that is bound to the change event does not get called. Like this:
updateStartTime(startTime) {
let alert = this.alertControl.create({
title: 'Change start time',
message: 'Are you sure you want to update the start time for this event?',
buttons: [{
text: 'Cancel',
handler: () => {
console.log('cancel');
}
}, {
text: 'Confirm',
handler: () => {
console.log(startTime);
}
}]
});
alert.present();
/** prevent default datepicker behavior **/
return false;
}
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;
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