I have managed to open an alert with in an alert. But when I choose Admin I want to close the first alert after the user chooses Admin.
How can I do that?
showAlert2(message)
{
let alert = this.alertCtrl.create({
title:'Sign in as',
inputs: [
{
type:'checkbox',
label:'Admin',
value:'admin',
handler: data => {
this.showAlert3('Sign in');
}
},
{
type:'checkbox',
label:'Patient',
value:'patient'
}
],
buttons: [
{
text: 'Login',
handler: data => {
// if the user chooses patient open a page
this.navCtrl.push(PMainPage);
// if the user chooses admin i want to create an other alert message
}
}
]
});
alert.present();
}
Thank you in advance!
You can dismiss the current alert by alert.dismiss() since you defined it with let alert.
let alert = this.alertCtrl.create({
title:'Sign in as',
inputs: [
{
type:'checkbox',
label:'Admin',
value:'admin',
handler: data => {
alert.dismiss(); //here dismiss this alert
this.showAlert3('Sign in');
}
},
{
type:'checkbox',
label:'Patient',
value:'patient'
}
],
});
Related
I am trying to show the list of language available as an Action sheet. But as soon as the language button is pressed the action sheet closes automatically. Is there any possible way to prevent the auto close of ion-action-sheet controller on clicking the ActionsheetButton.
async showChangeLangAlert() {
const actionSheet = await this.actionSheet.create(
{
header: this.translateText('Select language'),
buttons: this.getLanguageInputTypes(),
cssClass: 'confirmation-popup select-lang',
backdropDismiss: true,
mode: 'md'
}
);
actionSheet.present();
actionSheet.onWillDismiss().then(res => {
console.log(res);
event.preventDefault();
});
actionSheet.onDidDismiss().then(res => {
this.langChoosen.next(this.selectedLanguage);
});
}
private getLanguageInputTypes(): ActionSheetButton[] {
if (this.selectedLanguage === undefined) {
this.selectedLanguage = 'en';
}
return [
{
text: this.translateText('English'),
icon: (this.selectedLanguage.toLowerCase() === 'en') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'en') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'en';
}
},
{
text: this.translateText('German'),
icon: (this.selectedLanguage.toLowerCase() === 'de') ? 'radio-button-on' : 'radio-button-off',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.selectedLanguage = 'de';
}
},
{
text: this.translateText('Select'),
icon: 'checkmark-circle',
cssClass: (this.selectedLanguage.toLowerCase() === 'de') ? 'active-option' : '',
handler: () => {
this.setSelectedLanguage();
}
}
];
}
private setSelectedLanguage() {
// close the action-sheet here
}
I want to achieve the manual close of the action-sheet controller, but it closes automatically on clicking any action button. What I am missing or is there any workaround to show the alert window as an action sheet?
the handler: ()=> returns to true after a button is clicked which dismisses the actionsheet. Returning false after the button is clicked in the handler() will keep the actionsheet in place.
handler: ()=>{
// assign selected language
this.selectedLanguage = 'en';
// then return false
return false;
}
backdropDismiss
Description
If true, the action sheet will be dismissed when the backdrop is clicked.
Attribute backdrop-dismiss
Type boolean
Default true
backdropDismiss:false
I have came up with a problem of going back in queue in sweet alert.
The code shows one big swal which on confirm shows user swal queue with three options. I need it to go to the first step of queue on cancel button.
I have found a solution with async function, but it is not working in my case (or I have made some mistake. ;) - https://jsfiddle.net/ad3quksn/252/ )
$("#ZKARobimy").click(function () {
swal({
title: "First decidable swal",
allowOutsideClick: false,
width: '70%',
showCancelButton: true,
showConfirmButton: true,
confirmButtonText: 'Go to yes function',
cancelButtonText: 'Go to no function',,
}).then((result) => {
if (result.value) //pressed confirm button
swal.mixin({
confirmButtonText: 'next step ⇛',
cancelButtonText: '⇚ back to settings',
showCancelButton: true,
reverseButtons: true,
progressSteps: ['settings', 'verify', 'ending'],
width: '70%',
allowOutsideClick: false,
}).queue([
{
title: "First in queue - settings",
html: document.getElementById("doingZKAIt").innerHTML,
onOpen: () => {
generujSMSzkaIT();
}, onClose: function (dismiss) {
if (dismiss == 'cancel') {
console.log("first in queue " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm(); //here i wanted to click confirm button in first swal - before queue
generujSMSzkaIT();
swal.close();
}
console.log("outside if - onclose first in queue")
}
},'swal with back to first one in queue', 'swal without back button'
]), function (dismiss) { //tried to set function for the swal.mixin on cancel button, but it is not working the way i want it to.
if( dismiss == 'cancel')
{
console.log("swal.mixin cancel " + dismiss)
$("#ZKARobimy").click();
swal.clickConfirm();
}
}
} else if (//pressed cancel button
result.dismiss === swal.DismissReason.cancel
) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
})
Is there any other way to go back in swal queue?
This is available in sweetalert2: https://sweetalert2.github.io/recipe-gallery/queue-with-back-button.html
const steps = ['1', '2', '3']
const swalQueueStep = Swal.mixin({
confirmButtonText: 'Forward',
cancelButtonText: 'Back',
progressSteps: steps,
input: 'text',
inputAttributes: {
required: true
},
reverseButtons: true,
validationMessage: 'This field is required'
})
const values = []
let currentStep
for (currentStep = 0; currentStep < steps.length;) {
const result = await swalQueueStep.fire({
title: `Question ${steps[currentStep]}`,
inputValue: values[currentStep],
showCancelButton: currentStep > 0,
currentProgressStep: currentStep
})
if (result.value) {
values[currentStep] = result.value
currentStep++
} else if (result.dismiss === Swal.DismissReason.cancel) {
currentStep--
} else {
break
}
}
if (currentStep === steps.length) {
Swal.fire(JSON.stringify(values))
}
I am trying to figure out how to always check if the location service is enabled. By always I mean like a real-time checker. What I have now is only in one view. I am checking when the user signs in - if the location service is enabled, he signs in. However, if it's unenabled then an Alert dialog appears:
This is my function that checks if it's enabled:
checkLocation() {
this.diagnostic.isLocationEnabled().then(
(isAvailable) => {
console.log('Is available? ' + isAvailable);
if (isAvailable) {
this.navCtrl.setRoot(UserTypePage);
} else {
alert('Please turn on the location service');
if (this.autoLogin) {
this.autoLogin();
}
}
}).catch((e) => {
console.log(e);
alert(JSON.stringify(e));
});
}
I call this function when a user tries to sign in.
Example with Facebook sign in:
facebookLogin(): void {
this.global = ShareService.getInstance();
this.subscriptions.push(this.authProvider.loginWithFacebook().subscribe((user) => {
this.loading.dismiss().then(() => {
this.global.setUserName(user.displayName);
this.global.setProfilePicture(user.photoURL);
this.global.setUserId(this.authProvider.currentUserId);
this.tokenstore();
this.checkLocation(); //HERE
})
}, error => {
this.loading.dismiss().then(() => {
let alert = this.alertCtrl.create({
message: error.message,
buttons: [
{
text: "Ok",
role: 'cancel'
}
]
});
alert.present();
});
}, (err) => {
console.error("error: " + JSON.stringify(err));
}));
this.loading = this.loadingCtrl.create({
content: 'Signing in...'
});
this.loading.present();
}
I want this function to work in the whole application not just in the login view. How do I do that?
This is a classic scenario where Angular Dependency Injection will help you to reuse an existing method across components/views.
You can create a LocationCommonService in your application and define the method to check if Location service is enabled.
Now inject LocationCommonService in all the components where there is a need to call the required function.
var myWindow = Ext.Msg.show({
title: "Registration Revert",
message: "Registration successful",
buttonText: { ok: 'OK'},
fn: function (btn) {
if (btn == 'ok') {
console.log('recieve');
me.fireEvent('afterRegister');
}
}
});
How to open view after messageBox click ok using extjs?
Please try this
var myWindow = Ext.Msg.show({
title: "Registration Revert",
message: "Registration successful",
buttonText: { ok: 'OK'},
fn: function (btn) {
if (btn == 'ok') {
console.log('recieve');
Ext.create('MyApp.view.MyWindow').show(); // Give your app name and View name according to your application
}
}
});
I am building an Ionic2 app. I have an alert like following:
constructor(private platform: Platform, public nav : NavController,
public exhibitionSurveyObjectService : ExhibitionSurveyObjectService ) {
this.initializeMap();
this.nav=nav;
this.testArray=[];
this.area=null;
}
addSurveyObject(){
let prompt = Alert.create({
title: 'Subscribe to our service',
message: "All the fields are necessary",
inputs: [
{
name: 'name',
placeholder: 'Name'
},
....
{
name: 'cycle',
placeholder: 'Cycle: once/weekly/monthly'
},
{
name: 'object_type',
placeholder: 'Farm/Solarpanel/plain'
},
],
buttons: [
....
{
text: 'Save',
handler: data => {
this.createExhibitionSuveyObject(data);
}
}
]
});
this.nav.present(prompt);
}
createExhibitionSuveyObject(data: any){
var cycle = data.cycle;
cycle = cycle.toUpperCase()
console.log(cycle)
var type = data.object_type;
type = type.toUpperCase()
console.log(type)
this.exhibitionSurveyObjectService.addObject(
data.name, data.farmer_email,
data.farmer_name, data.size, data.path, cycle, type).subscribe(
response => {
this.exhibitionSurveyObjects = response;
this.sayThanks();
},
error => {
this.errorMessage = <any>error;
console.log("error")
}
);
}
sayThanks(){
let alert = Alert.create({
title: 'Thank you!',
subTitle: 'We have received your data, we will get back to you soon!',
buttons: [{
text: 'Ok',
handler: () => {
this.nav.push(HomePage)
}
}]
});
this.nav.present(alert);
}
I want the last two fields to be dropdowns. How can I achieve this?
UPDATE: updated the code snippet with some more code. How it can be updated to use Modal instead of alert?
Just like you can see in Ionic2 docs
Alerts can also include several different inputs whose data can be
passed back to the app. Inputs can be used as a simple way to prompt
users for information. Radios, checkboxes and text inputs are all
accepted, but they cannot be mixed. For example, an alert could have
all radio button inputs, or all checkbox inputs, but the same alert
cannot mix radio and checkbox inputs.
And...
If you require a complex form UI which doesn't fit within the
guidelines of an alert then we recommend building the form within a
modal instead.
So you'll have to create a new Component with that form and then use it to create the Modal:
import { Modal, NavController, NavParams } from 'ionic-angular';
#Component(...)
class YourPage {
constructor(nav: NavController) {
this.nav = nav;
}
presentSubscriptionModal() {
let subscriptionModal = Modal.create(Subscription, { yourParam: paramValue });
this.nav.present(subscriptionModal);
}
}
#Component(...)
class Subscription{
constructor(params: NavParams) {
let param = params.get('yourParam');
}
}