I am trying to get two confirmations from user one after another. If the first one is cancelled, there is no need to get the second one. But if the first one is agreed on, then the second one should be shown and processed. I am using a piece of code like this
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
this.showConfirmation2();
}
}
]
});
showConfirmation2() {
let confirm = this.alertCtrl.create({
title: 'C2',
message: "M2",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
this.doYourJob();
}
}
]
});
If user cancels the first one, everything works fine. If user accepts the first one, the second one is shown properly. However, the second one kinda freezes. Neither its No button nor its Yes button work. It does not even vanishes when you click on other areas of the page.
UPDATE:
Found a cleaner solution that requires less code and is easier to understand.
By returning false in the button handler you prevent the alert from closing. And the dismiss-function returns a Promise that gets resolved when the transition is complete. So thats where we will call the function to open the second alert.
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
confirm.dismiss()
.then(() => {
this.showConfirmation2();
});
return false;
}
}
]
});
confirm.present();
}
ORIGINAL:
Make use of the dismiss(data:any) function on your first alert. And pass a value that indicates that it was not cancelled. In the onDidDismiss-function check for this value. If its there present the second alert.
showConfirmation1() {
let confirm = this.alertCtrl.create({
title: 'C1',
message: "M1",
buttons: [
{
text: 'No',
},
{
text: 'Yes',
handler: data => {
confirm.dismiss({ showSecond: true });
return false;
}
}
]
});
confirm.onDidDismiss(data => {
if(data && data.showSecond){
this.showConfirmation2();
}
}
confirm.present();
}
Related
when I call this.AlertProvider.presentConfirm() then an ionic popup confirmation display on click confirm button i want to return true/false
presentConfirm() {
let alert = this.alertCtrl.create({
title: 'Confirm Activate',
message: 'Do you want to Disable',
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Confirm',
handler: () => {
console.log('submit clicked');
}
}
]
});
alert.present();
}
var confirm_value = this.AlertProvider.presentConfirm();
alert(confirm_value);
I am getting a push notification using Firebase and showing it in alert box. Now I want to display the message i received in a text field so that user can edit the message.I also want to output the message in console.
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
let youralert = this.alertCtrl.create({
title: 'New Push notification',
message: notification.message,
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Okay',
handler: () => {
console.log('Okay clicked');
}
}
]
});
There's a inputs property on the Alert interfacce, it works pretty much like the buttons. It's an array of objects and you have a input value property to set the desired value.
Since i don't know where you want to log you value and if it's the value that has come from the server or the edited value, i'll show both.
pushObject.on('notification').subscribe((notification: any) => {
if (notification.additionalData.foreground) {
console.log('push message', notification.message);
let youralert = this.alertCtrl.create({
title: 'New Push notification',
inputs: [{
placeholder: 'Your placeholder..',
type: 'text',
name: 'yourInputName, // Name to get it in your handler callback
value: notification.message
}],
message: notification.message,
buttons: [
{
text: 'Cancel',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: 'Okay',
// you'll need to get the input data, so pass a parameter to the callback
handler: (data) => {
// here's the value user has edited in the input
console.log('Edited message', data.yourInputName);
console.log('Okay clicked');
}
}
]
});
Hope this helps
I have add one alert input field to change password,But How can we give validation to input field in ionic?
account.ts
changePassword(){
let alert = this.alertCtrl.create({
title: 'Change Password',
buttons: [
'Cancel']
});
alert.addInput({
name: 'Password',
value: this.password,
placeholder: 'password'
});
alert.addButton({
text: 'Ok',
handler: (data: any) => {
this.userData.setUsername(data.username);
let accountData=new FormData();
accountData.append('userid',this.userid),
accountData.append('password',data.Password)
this.works.changePassword(accountData).subscribe(res=>{
console.log(res),
err=>{
console.log(err)
}
})
}
});
alert.present();
}
You can use alert.setMessage('text') method to show validation message and don't forgot to add return false after validation to prevent alert dismiss.
public displayToAlert(title, subTitle) {
let alert = this.alertCtrl.create({
title: title,
subTitle: subTitle,
message: '',
enableBackdropDismiss: false,
inputs: [
{name: 'userEmail',
placeholder: 'Email Id'}
],
buttons: [{
text: 'Cancel',
handler: () => {
}
},{
text: 'Send',
handler: datas => {
if(datas.userEmail != null && datas.userEmail.length > 0){
this.onExportNew();
}else{
alert.setMessage('<b style="color: red;">Enter valid email id.</b>');
return false;
}
}
}]
});
alert.present();
}
For Reference : Alert controller input box validation
I'm used Ionic 3 and I'm try to display label for behind the input fields ,but it's not display,why is not showing? please help me to fix it
Thanks
doPrompt() {
let prompt = this.alertCtrl.create({
title: '5 Rooms Available',
message: "",
inputs: [
{
label: "Single Rooms (3)",
name: 'Single Rooms (3)',
placeholder: '$200.00',
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Set',
handler: data => {
console.log('Saved clicked');
}
}
]
});
prompt.present();
}
I am new to ExtJS 4 and am trying to implement a simple application in MVC style. The documentation is really good and this is one of the topics covered in the Form package guide, but it doesn't seem to work in my case.
The app basically can create, edit and delete articles.The creation and editing are in pop-up windows.
The pop-up window contains a form with a text field and html-editor.
Please click on the link below,this is the error in Google Chrome Console when I click on the submit button in the 'window'
http://www.freeimagehosting.net/mjig7
Here is the code which I've written
Model:
Ext.define('AM.model.Article', {
extend: 'Ext.data.Model',
fields: ['name', 'data'],
proxy: {
type: 'rest',
url: 'users/data',
reader: {
type: 'json',
root: 'myJaxBean',
successProperty: 'success'
},
writer: {
type: 'json'
}
}
});
View:
Ext.define('AM.view.New', {
extend: 'Ext.window.Window',
alias : 'widget.new',
title : 'New Article',
autoShow: true,
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
layout: 'fit',
bodyStyle:'padding:5px 5px 0',
width: '70%',
height: '40%',
initComponent: function() {
this.items = [
{
xtype: 'form',
anchor: '99%',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Article Name',
anchor: '99%'
},
{
xtype: 'htmleditor',
name : 'data',
fieldLabel: 'Article',
anchor: '99% -25'
}
],
buttons: [
{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm(), // get the basic form
record = form.getRecord(); // get the underlying model instance
if (form.isValid()) { // make sure the form contains valid data before submitting
form.updateRecord(record); // update the record with the form data
record.save({ // save the record to the server
success: function(user) {
Ext.Msg.alert('Success', 'User saved successfully.')
},
failure: function(user) {
Ext.Msg.alert('Failure', 'Failed to save user.')
}
});
} else { // display error alert if the data is invalid
Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
}
}
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
]
}
],
this.callParent(arguments);
}
});
and finally the code in my controller which makes the window visible
Controller:
.....
'viewport > panel > panel > tbar button[action=newarticle]' :{
click: this.newArticle
},
....
newArticle: function(button){
var view = Ext.widget('new');
},
Please point me in the right direction in case I am doing something wrong.
Thanks in advance.
Check the docs getRecord():
Returns the last Ext.data.Model instance that was loaded via
loadRecord
so it's clear that you haven't load any record, so you getRecord() returns undefined. And you are getting your error further.