I am trying to incorporate input text and radio button in one alert dialog box. I have three options and if the user chose the third option, an input text will appear and the user needs to type something.
I've searched on the internet but I can't find something that can help me with this. I hope someone can help me with this.
Here is my code and the sample output.
let alert = this.alertCtrl.create({
title: 'Select one?',
message: "Please select one or enter something",
inputs: [
{
type: 'radio',
label: 'Option 1',
value: 'Option 1',
},
{
type: 'radio',
label: 'Option 2',
value: 'Option 2',
},
{
type: 'radio',
label: 'Other Option',
value: 'Other Option',
},
{
type: 'text',
placeholder: 'Enter other option',
}
],
buttons: [
{
text: 'Submit',
handler: (data: any) => {
console.log(data);
}
}
]
});
alert.present();
Here is the current output of my code.
You can't have different types of input inside ionic AllertController.
You should use Modal Controller with formBuilder and then you can customize form as you want
Related
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'm new to Ionic and I'd like to use the Ionic alert to change a password for a user.
At the moment I got this:
let alert: Alert = Alert.create({
title: 'Forgot Password',
subTitle: 'Enter a new password',
inputs: [
{
name: 'password',
type: 'password',
placeholder: 'New Password'
},
{
name: 'confirm_password',
type: 'password',
placeholder: 'Confirm Password'
}
],
buttons: [
{
text: 'Change Password',
handler: data => {
if (data.password != data.confirm_password) {
return false;
} else {
...some requests sent...
}
}
}
]
});
Now, if I type 2 different passwords, the alert isn't dismissed, but I'd like to display a message on the alert.
Can this be done with Ionic Alert? I didn't manage to find anything.
Thanks!
You're better off using $ionicPopup which is meant for user input. It takes in a scope so that you can do the angular you're looking for. Unfortunately, you cannot programmatically disable the save button if the passwords don't match.
$ionicPopup.show({
template: '<input type="password" ng-model="data.password">' +
'<input type="password" ng-model="data.confirm_password">' +
'<div ng-show="data.password!=data.confirm_password>Passwords do not match</div>'
title: 'Forgot Password',
subTitle: 'Enter a new password',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: 'Save',
type: 'button-positive',
onTap: function(e) {
if (data.password != data.confirm_password) {
return false;
} else {
...some requests sent...
}
}
}
]
});
How can I add or associate data to a custom menu button in TinyMCE? My code goes like this:
tinyMCE.init({
selector: 'textarea',
toolbar: " example",
setup: function (ed) {
ed.addButton('example', {
type: 'menubutton',
title: 'Insert Latest Newsletter Link',
icon: false,
text: 'Insert Latest Newsletter Link',
menu: [{text: "Insert Link", onclick: function () {
//this is where i want to retrieve data that
//i associated with my button
} }]
});
}
The solution is by using 'value' in the menu object like:
editor.addButton( 'gavickpro_tc_button', {
title: 'My test button',
type: 'menubutton',
icon: 'icon gavickpro-own-icon',
menu: [
{
text: 'Menu item I',
value: 'Text from menu item I',
onclick: function() {
editor.insertContent(this.value());
}
}
]
});
menu:[[object1],[object2],[object3]]
displays the object1,object2, object3 in custom button menu
I hava a fieldset in Sencha Touch 2 as follows:
{
id:'contactForm',
xtype: 'fieldset',
title: 'Information',
items: [
{
xtype: 'textfield',
label: 'First Name',
placeHolder: 'Your First Name',
name:'firstName',
id:'firstName',
},
{
xtype: 'textfield',
label: 'Last Name',
placeHolder: 'Your Last Name',
name:'lastName'
},
{
xtype: 'emailfield',
label: 'Email',
placeHolder: 'email#example.com'
},
{
xtype: 'button',
height: 37,
style: 'margin-left:35%',
width: 100,
iconAlign: 'center',
text: 'Submit',
action:'ContactSubmit'
},
{
xtype: 'hiddenfield',
id: 'HNumberOfBedRoom',
value:'2'
},
{
xtype: 'hiddenfield',
id: 'HPetFriendlyId',
value:'2'
}
]
}
In my controller,
I have the following:
refs: {
contactForm: '#contactForm'
}
I can retrive the value by using
var frmItems=this.getContactForm().getItems();
console.log(frmItems.items[1]._value);
This works fine but i want to retrieve the values something like
frm.get('name/id of component')
is there any way to achieve this?
Use a Ext.form.Panel as your primary container.
example snippet
Ext.define('App.view.ContactForm',
{
extend : 'Ext.form.Panel',
xtype : 'contactform',
id : 'contactForm',
config : {
items : [
{
xtype : 'fieldset',
items : [
{
{
xtype: 'textfield',
label: 'First Name',
placeHolder: 'Your First Name',
name:'firstName',
},
]
}
});
in your controller
refs : { contactForm : '#contactForm' }
then in your function you can either do
this.getContactForm().getValues().firstName
(uses the name value of the field)
or
var vals = this.getContactForm().getValues();
vals.firstName;
Avoid using Ext.getCmp() or a flat Ext.get() at the top level if you absolutely can help it. If you're building custom controls you might have to make use of those, otherwise you're making things too hard on yourself.
You should be able to assign an id to your field, and then Ext.getCmp('-yourId-'); or Ext.get('-yourId-');
( http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-id )
Dont struggle too much
first assign the id to that field and get the value using id thats it..
{
xtype: 'textfield',
id: 'username', // id
name: 'username',
placeHolder: '------UserName------',
},
Ext.getCmp('username').getValue(); // now get value using that id..
refs:[
{
ref:'contentForm',
// selector:'#contentForm'
contentForm:'#contentForm'
}
],
-
var form = Ext.getCmp('contentForm');
console.log(form.getValues());
Assign itemId: firstName to textfield
And in Controller, where you want to get the value, use this:
Ext.ComponentQuery.query('textfield[itemId=firstName]')[0].getData();
thats weired - it worked and suddenly (changed nothing but adding code to other panels...) it's not working any more:
I used to enable/disable a form with a button inside a docked toolbar. within the handler ofthe button the disable/enable is triggered with a simple
formBase.enable();
but this is throwing the error
TypeError: Result of expression 'formBase.enable' [undefined] is not a
function.
now.
I don't get it....
any help would be great!
thx!
You probabilly have a scope issue, so you can't get your formBase variable from the button handler.
I post you a full working example I've done to let you understand how it is possible to enable / disable your form.
Ext.setup({
onReady: function() {
var form = new Ext.form.FormPanel({
scroll: 'vertical',
fullscreen: true,
url : 'postUser.php',
standardSubmit : false,
dockedItems: [{
xtype: 'toolbar',
title: 'Example',
items: [{
xtype: 'button',
text: 'Disable',
handler: function(){
form.disable();
}
},{
xtype: 'spacer'
},{
xtype: 'button',
text: 'Enable',
handler: function(){
form.enable();
}
}]
}],
items: [{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
required: true,
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
}, {
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
}]
}]
});
form.show();
}
});
Hope This helps.