I am creating an ionic 2 application for android and ios. I have an alert controller that prompts the user for a text input, however when the alert pops up I would like the keyboard to focus on the input, and for the placeholder text to be highlighted. Currently you must tap on the text input for the keyboard to pop up. Is this possible to implement?
here is my alert controller code:
let prompt = this.alertCtrl.create({
title: this.name,
message: this.nameMessage,
inputs: [
{
name: 'name',
placeholder: this.name
},
],
buttons: [
{
text: this.save,
handler: data => {
resolve(data.name);
}
}
],
enableBackdropDismiss: false
});
prompt.present();
This is my solution.
First
inputs: [
{
id: "autofocu",
......
}
],
And then
alert.present()
.then(() => {
document.getElementById('autofocu').focus();
})
.catch()
Related
I migrated from Ionic 4 to Ionic 5 and noticed my toastControllers are not showing the "close" button even if I set up the ToastOptions properties with showCloseButton: true
I fixed it adding explicitly the buttons array like this:
let toast = this.toastCtrl.create({
message: 'User was added successfully',
showCloseButton: true,
position: 'top',
buttons: [
{
text: "close",
handler: () => {
console.log('Close clicked');
}
}
]
});
I have this code in my application:
$ionicPopup.alert({
title: $scope.header1,
template: 'The was a problem connecting to the server. Please check your internet connection and try again.'
});
ionic.Platform.exitApp()
what I have noticed is that in Android, the application exits quickly without showing the pop up message. What I wanted to do is execute
ionic.Platform.exitApp()
after the user press the 'Ok' button in the pop-up. ls there something like an "onleave" event in ionic Popup?
The best approach may be to define your own 'OK' button as opposed to leveraging the default dismiss one - that way you can invoke ionic.Platform.exitApp() upon the user clicking/tapping your button.
Example:
import { AlertController } from 'ionic-angular';
constructor(private alertCtrl: AlertController) {
}
presentAlert() {
let alert = this.alertCtrl.create({
title: YourCustomHeader,
//subTitle: 'optional text',
message: 'The was a problem connecting to the server. Please check your internet connection and try again.',
buttons: [
{
text: 'OK',
handler: () => {
ionic.Platform.exitApp();
}
}
]
});
alert.present();
}
Reference: https://ionicframework.com/docs/api/components/alert/AlertController/#usage
Is there any way to change alert direction in ionic 2 ?
const alert = this.alertCtrl.create({
title: 'خطأ',
subTitle: 'GPS والوصول إلى الشبكة غير ممكن.',
enableBackdropDismiss: false,
buttons: [{
text: 'نعم',
handler: () => {
setTimeout(() => this.locate(), 1500);
}
}],
});
I tried and tested some css but fails.
I try but have a difficult way for change this.
Try use ionic AlertController
And set enableBackdropDismiss:false for work like alertCtrl
Using Ionic2 and Angular2, I want to show an alert box, inside which a text along with checkbox - to ask for user if he/she agree to the statement.
//Prompt an alert, to ask user to verify there email address.
let alert = Alert.create({
subTitle: 'Email not verified!',
message: 'Please check your email for verification link.',
inputs: [
{
name: 'getLink',
label: 'Get verification link again ?',
type: "checkbox",
value: "true",
checked: false
}
],
buttons: [
{
text: 'Ok',
handler: data => {
console.log(data);
if(data.length > 0) {
//console.log('Get me link');
//we are calling this method to sent a link to user over mail - to verify their email address.
user.sendEmailVerification();
this.nav.rootNav.setRoot(HomePage);
return true;
} else {
//console.log('Link not required!');
this.nav.rootNav.setRoot(HomePage);
return true;
}
}
}
]
});
this.nav.present(alert);
I have a nested list on one of the pages of a Tabbed Panel app that is pulling data from "offices.json"
I should like to be able to filter this list when a user clicks on a toolbar button. However my filterBy() function doesn't update the store and the list of offices I can see, even though I can see in the console it is iterating the records and finding a match. What am I doing wrong?
(And yes I have tried doing s.load() both before and after the filterBy to no avail!)
toolbar:{
items:[{
text: 'Near you',
id: 'btnNearYou',
xtype: 'button',
handler: function() {
s = Ext.StoreMgr.get('offices');
s._proxy._url = 'officesFLAT.json';
console.log("trying to filter");
s.filterBy(function(record) {
var search = new RegExp("Altrincham", 'i');
if(record.get('text').match(search)){
console.log("did Match");
return true;
}else {
console.log("didnt Match");
return false;
}
});
s.load();
}
}]
For the record I'm defining my store like so:
store: {
type: 'tree',
model: 'ListItem',
id: 'offices',
defaultRootProperty: 'items',
proxy: {
type: 'ajax',
root: {},
url: 'offices.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
No need to recreate the regex each time, cache it outside.
You can simplify the code a lot (see below).
Why are you calling load directly after? That's going to send it to the server and it will just retrieve the same dataset.
toolbar: {
items: [{
text: 'Near you',
id: 'btnNearYou',
xtype: 'button',
handler: function() {
s = Ext.StoreMgr.get('offices');
s._proxy._url = 'officesFLAT.json';
var search = /Altrincham/i;
s.filterBy(function(record) {
return !!record.get('text').match(search);
});
}
}]
}