I'm trying to close alert when the alert is present with back key press else the page will be navigated to another page. I've tried alert.dismiss(), but how to find out if the alert is present or not? I want also to do the same with ion-select.
Ionic 3 way of doing it:
showAlert() {
let alert = this.alertCtrl.create({
title: 'My Title',
buttons: [
{
text: 'Ok'
}
]
});
alert.present();
let deregisterBackButton = this.platform.registerBackButtonAction(() => {
// dismiss on back press
alert.dismiss();
}, 401);
// deregister handler after modal closes
alert.onDidDismiss(() => {
deregisterBackButton();
});
}
You could try this using registerBackButtonAction
this.platform.registerBackButtonAction(() => {
try {
this.viewController.dismiss()
}
catch(e) {
... no overlay component open
}
})
To check if an alert is present, you can do a check to see if an overlay is present using something like this proposed solution.
Related
I have a bootbox confirm dialog box. In that, I have some form validation.Validation working fine and as long as validation fails confirm dialog box still opens. But when I click on the cancel button, still it is asking for validation.
bootbox.confirm({
closeButton: true,
message: valid_result,
size: 'large',
title: 'Fill fields with related values',
buttons : {
confirm : { label: '<i class="fa fa-check"></i> Validate'}
},
callback: function () {
var res = getLinkupInformation(ids_string)
if(res == true) {
return true;
} else {
return false;
}
}
});
The validation part is working and if validation passed then only modal was closing. But when user click on the cancel button or close icon still it is asking validation. When I remove return false in call back function in else part then the validation button is not working and when I click on the validate button confirmation dialog box was closing.
Please guide me how to solve this issue?
The callback expects you to supply an argument, like so:
callback: function (result) {
}
If the user cancelled the dialog, either by clicking Cancel or the close (x) button, then result (or whatever you called your argument) will be the value false. You would use that value like this:
callback: function (result) {
if(result) {
/* your code here */
}
}
This is more or less covered in the documentation.
What should happen when users click over back button of phone? In case when modal opens.
Registered a back button:
// To prevent interference with ionic's own backbutton handling
// you can subscribe with a low priority instead
this.platform.backButton.subscribe(() => {
// code that is executed when the user pressed the back button
// and ionic doesn't already know what to do (close modals etc...)
self.modalController.dismiss();
});
The problem with the code:
It closes/dismiss modal is fine!
But it also pushed back the page from where the modal is opened. Means it pop the page behind modal.
This should not happen the page should not pop - only modal should close.
Check the image gif added ->
Click here to see the problem
You may consider using platform.backButton.subscribeWithPriority() with a high priority (ex: 9999).
Then checking if there is a opened modal with modalController.getTop().
constructor(private modalCtrl: ModalController, private nav: NavController) {
}
ngOnInit() {
this.platform.backButton.subscribeWithPriority(9999, () => {
this.closeModalOrPage();
});
}
async closeModalOrPage(){
let modal = await this.modalCtrl.getTop();
if (modal){
modal.dismiss();
} else {
this.nav.pop();
}
}
I am using OneSignal API for sending and receiving notifications with my Flutter app. And I don't know how to use the buttons that can be added to the notification to open my flutter app to a specific screen.
My use case of the API is to create a notification template that has a button on it and send it to my users. But I don't know how to set a listener on that button that will open my flutter app.
I am using onesignal-node package for my node server.
let firstNotification = new OneSignal.Notification({
template_id: "727f42a8-0b45-470e-ac9e-908f64af44ba",
include_external_user_ids: [_id]
});
myClient.sendNotification(firstNotification, function (err, httpResponse, data) {
if (err) {
return res.status(500).send(err);
} else {
console.log(data, httpResponse.statusCode);
return res.status(200).send("Notification sent to " + user);
}
});
This is the solution
buttons: [
OSActionButton(text: "text button 1", id: "id1"),
OSActionButton(text: "text button 2", id: "id2")
],
but i dont know how i set an event to the button =(
I am making a login app with MySQL database. I have already done login but when I close my app or press the back button of my mobile, it starts from login page again.
I tried to save the login data in local storage but it does not work. I have been searching online for some answers but I can't seem to find the solution.
Below is my code
login.ts
signIn(page) {
if(this.username.value==""){
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Username field is empty",
buttons: ['OK']
});
alert.present();
}else if(this.password.value=="") {
let alert = this.alertCtrl.create({
title:"ATTENTION",
subTitle:"Password field is empty",
buttons: ['OK']
});
alert.present();
}
else {
var headers = new Headers();
headers.append("Accept", 'application/json');
headers.append('Content-Type', 'application/json' );
let options = new RequestOptions({ headers: headers });
let data = {
username: this.username.value,
password: this.password.value
};
let loader = this.loading.create({
content: 'Processing please wait…',
});
loader.present().then(()=>{
this.http.post('http://mybusket.com/webapi/carapi/logincheck.php',data,options)
.map(res=>res.json())
.subscribe(res=>{
console.log(res)
loader.dismiss()
if(res>0) {
localStorage.setItem('response',JSON.stringify(res));
console.log(JSON.parse(localStorage.getItem('response')));
this.navCtrl.push(page)
}
else{
let alert = this.alertCtrl.create({
title:"ERROR",
subTitle:"Your Login Username or Password is invalid",
buttons: ['OK']
});
alert.present();
}
});
});
}
}
when I click the button, SignIn function runs and navigates to the menu page which is connected to welcome page.
menu.ts
export class MenuPage {
rootPage = 'Welcome';
pages = [
{ title: 'Home', component: 'Welcome' },
{ title: 'Qr Code', component: 'QrPage' },
{ title: 'Logout', component: 'LogoutPage' }
];
#ViewChild('content') nav: NavController;
constructor(public navCtrl: NavController, public navParams: NavParams)
{
}
ionViewDidLoad() {
console.log('ionViewDidLoad MenuPage');
}
openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}
}
I am working with lazy loading in ionic 3.
I want it so that when I log in the app, it does not require login again also when I press back button of my device app switches off.
When you login, you only save the response to your local storage. You dont have a checker if you are already logged in or not. So to stay logged in the app, you need to have a checker.
If you logged in successfully, create an item in local storage. For example, set an item isLoggedIn to true.
localStorage.setItem('isLoggedIn',true);
When you exit and re-launch the app, first thing you will do is to check the isLoggedIn from your local storage. If it is true, then navigate to the Welcome page. Otherwise, go to the Login page.
When you logout, make sure to change the isLoggedIn to false, or simply remove it.
EDIT:
Depending on your rootpage for the whole app which you can locate in your app.component.ts. (rootpage is the first page that will be shown when opening your app)
If your rootpage for the whole app is your Signin page,
your .ts file should have
constructor{
//check if the isLoggedIn in the local storage exists or is true
if(localstorage.getItem('isLoggedIn')){
// if it is true, set the menupage (which is connected to your welcome page) as root.
this.navCtrl.setRoot(MenuPage);
}
}
Additionally, in your Signin page. In your signin(page) method, adjust this
if(res>0) {
localStorage.setItem('response',JSON.stringify(res));
console.log(JSON.parse(localStorage.getItem('response')));
// add this
// set the isLoggedIn to true
localStorage.setItem('isLoggedin', true);
this.navCtrl.push(page)
}
PS> this may not work syntactically correct as I can't see your whole code. This is for your guide only, adjust the code if necessary.
I have created a Button with the Tiny Method addButton().
How is it possible to toggle the State of the Button ?
In my first simple case I have a Button with Fullscreen
(Different Functionality than the built-in function)
and want to hide it after getting the Fullscreen State
and replace it with an "End Fullscreen" Button.
But I have not found the right way to show or hide them.
I know that the button will get an ID, but I dont know which one ...
If you add the button with:
editor.addButton('customFullscreen', {
tooltip: 'Fullscreen',
shortcut: 'Ctrl+Alt+F',
onClick: toggleCustomFullscreen,
onPostRender: function() {
var self = this;
editor.on('CustomFullscreenStateChanged', function(e) {
if (e.state) {
self.name('Close fullscreen');
//self.active(e.state); // uncomment for "pressed" look
} else {
self.name('Fullscreen');
}
});
}
});
and handle the event with
var customFullscreenState = false;
function toggleFullscreen() {
customFullscreenState = !customFullscreenState;
if (customFullscreenState) {
// do something, we are active
} else {
// do something else, we're unactive
}
editor.fire('CustomFullscreenStateChanged', {state: fullscreenState});
}
You should be able to have it look like wo different button and do two different things depending on state, but it will still just be one button that changes action and text.