I am trying to use Ionic ion-toast.
I found this example in their website: https://ionicframework.com/docs/api/toast
Now my problem is:
"handler" callback for any of the buttons added above is not called and no log appears. I tried this code on Android device and Browser Safari MacOS only both shows same issue.
I tried to use
toast.onDidDismiss().then(()=>{ console.log('Closed'); })
but that does not help since I am planning to add more than one button and I want to distinguish which button is clicked.
I know I can build my own component to do this but I am trying to know if there is something missing in my code or it is a well-known issue with ion-toast.
Code:
async presentToastWithOptions() {
const toast = await this.toastController.create({
header: 'Toast header',
message: 'Click to Close',
position: 'top',
buttons: [
{
side: 'start',
icon: 'star',
text: 'Favorite',
handler: () => {
console.log('this log should appear when this icon is clicked.');
}
}, {
text: 'Done',
role: 'cancel',
handler: () => {
console.log('This log should appear when I click done.');
}
}
]
});
await toast.present();
}
So what I expect:
when I click on the Button 'Done' or the icon 'star' (which are 2 buttons added to the toast) I should see the corresponding console.log in my console but actually I get nothing in the console.
I tried to add break-point also but both of these 2 "handler" callbacks are never called.
No error messages in the console...even no related warnings.
Is this normal? or am I missing something?
You just remove role: 'cancel' from Done button object and they start working as expected.
Related
This is simple enough in earlier version of tinyMCE, but I can't find a way to make it work in v6x (suggested answers here only apply to earlier versions, that I can see)
Here's my button:
tinymce.PluginManager.add('newButton', (editor, url) => {
editor.ui.registry.addButton('newButton', {
text: 'Click me',
enabled: true,
onAction: () => {
alert('You clicked me')
}
})
return {
getMetadata: () => ({
name: 'newButton',
url: ''
})
}
});
tinymce.init({
selector: "textarea",
plugins: "newButton",
toolbar1: "newButton"
});
This works fine - click the button and you get an alert telling you you have. What I want to do now is call this click event from code (JaveScript) - I was hoping
tinymce.activeEditor.buttons['newButton'].onclick();
would work, as it does for - say - the "code" plugin; i.e. add this plugin (and button) to the editor and calling
tinymce.activeEditor.buttons['code'].onclick();
simulates clicking the toolbar button. So... how can I "click" my own custon toolbar button?
[edit] well.. that last line did work, I swear it did. Now it doesn't. wt.. :(
This may not be the "right" way (well, I know it isn't!) but I've found a way that works :)
First, I need a way to identify/find my custom button. I figured out tinymce renders them as div elements, and using
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
console.log(div.innerHTML);
})
I am able to identify it and find the HTML used - it is not graced with an id, but we can use the innerHTML property (as identified) to get it and then simulate a click- viz:
var divs = document.querySelectorAll('button');
divs.forEach((div) => {
// NB 'DOC' is the text property of my custom button
if (div.innerHTML === '<span class="tox-tbtn__select-label">DOC</span>') {
// now we can simulate a click on it:
var evt = new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true
});
div.dispatchEvent(evt);
return;
}
})
(Thanks to the second answer, by Derek, here:
How to simulate a mouse click using JavaScript?
for the simulate click code)
[edit] better to use a for-loop rather than forEach as there's no sensible way to break out of the latter - that "return" doesn't actually do anything.
I am using the following to create a bootbox prompt message.
(The title and the default value are obtained via an ajax request.)
bootbox.prompt({
title: response.message,
value: response.value,
buttons: {
confirm: {
label: 'Ok'
}
},
callback: function (result) {
}
});
Although i have setup only confirm button, the prompt displays also the Cancel Button.
What am i doing wrong here?
I have tried hiding the cancel button via css with no success like so
.btn btn-secondary btn-default bootbox-cancel{
visibility:hidden;
}
I really don't recommend doing this - standard user expectation for a prompt is to have an obvious way of cancelling it.
That being said... the d-none class, when added to the Cancel button, will hide it:
bootbox.prompt({
title: 'Please enter something:',
callback: function(result){
console.log(result);
},
buttons: {
cancel: {
className: 'd-none'
}
}
});
Demo: https://jsfiddle.net/t3o5Lcnb/
You can't remove the Cancel or Confirm/OK buttons from the bootbox.alert, bootbox.confirm, or bootbox.prompt dialogs, but you can customize them (change the text, add icons, set the button classes, or add custom classes). In this case, adding the d-none Bootstrap class adds a display: none; rule to the Cancel button.
You can find a few examples of customizing the buttons on the Examples page: http://bootboxjs.com/examples.html#confirm-alternate-text-color
Currently I am having an ion-button with click event which calls a method.
<ion-button expand="full" color="primary" (click)="sendMsg()">Tap</ion-button>
sendMsg method contains the statements to push the objects to an array and opens modal on some condition.
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
this.openModal();
}
async openModal() {
const myModal = await this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
});
It's a chat page where we get the messages on click of TAP button and while tapping in between we show an ion modal . The issue here is when we tap super fast and modal comes up in one of the click event and since we are clicking fast I could see the messages displaying which are suppose to display after the modal comes up..
To avoid this , I thought of adding debounceTime which can have some time delay and considers the latest click event and this was working in normal angular world.
I have followed https://coryrylan.com/blog/creating-a-custom-debounce-click-directive-in-angular but it didn't work under ionic..
Any thoughts are really appreciated..
use a subject as event emitting source and control the click rate from there
const openModalAction=new Subject()
sendMsg = () =>{
// statements to push an objects to an array(this is an array displays on chat page);
openModalAction.next()
}
const openModal=defer(()=>from(this.modalController.create({
component: ModalPage,
componentProps: {
firstAction: this.firstAction,
secondAction: this.secondAction,
thirdAction: this.thirdAction
},
cssClass: 'modal-css',
backdropDismiss: false
})))
const openModalAction.pipe(dounceTime(1000),switchMap(_=>openModal)
I have a Slides Page consisting of 5 Slides. On the 5th Slide I have my "Login Page". Whenever I logout from the Application, I want to be redirected to the 5th Slide.
For Logging Out, I am using an Alert Controller, to provide the user with a confirmation, If he/she wants to logout. When the user Clicks Yes, it will redirect the user to the Slides Page, but It loads the first Slide. I want it to go to my 5th Slide which is my Login Page.
The Buttons for the Alert Controller are below:
{
text: 'Log Out',
handler: () => {
this.globalService.setToken(null);
this.navCtrl.navigateRoot('/welcomepage');
}
},
{
text: 'No',
role: 'cancel',
handler: () => {
}
}
Update your alertController code to this
{
text: 'Log Out',
handler: () => {
this.globalService.setToken(null);
this.navCtrl.navigateRoot('/welcomepage');
this.events.publish("eventOnSliderVisible", this.splashScreen);
}},
In your Slider Page,
use below code to move your slides component to 5th slide
ionViewWillEnter() {
this.events.subscribe("eventOnSliderVisible",handler => {
this.slides.slideTo(5,10);
});
Don't forget to add private events: Events in your class constructor.
Documentation:
'slideTo': (index: number, speed?: number | undefined, runCallbacks?: boolean | undefined) => Promise;
I'm having a problem clicking on a button that is on a modal or on a page after a modal is supposed to have been closed. Here is my experience:
I have a modal i'm dealing with. I create the actions to have it displayed. I have a wait function that waits for one of the modal's items to be "clickable" (This allows it to be both present and displayed). I then verify the text on the modal.
All of the above is successful. However, when I try to click on the button to close it, I'm getting an error stating that another element on the page would be clickable. I'm thinking I need to disable angular (and CSS?) animation. Is this answer still relevant to the latest version of protractor?
How to disable animations in protractor for angular js application
The problem I have with the above answer is that typescript didn't recognize the "angular" object.
I also see this question: Click on a button in a Modal Window - Protractor But the "answer" is to sleep for 2 seconds. Not my desired solution (if at all possible).
In any case, I found a way to reproduce what I'm talking about. The following spec will load the angular materials page to the dialog demo page. It will click on the Confirm Dialog button, verify the header text on the modal, click the close button, then try to repeat the steps a second time. It fails on the second time, even though it is supposed to have waited until the button is clickable.
/**
* modal.conf.js
*/
exports.config = {
framework: 'jasmine',
specs: ['modal.spec.js'],
useAllAngular2AppRoots: false,
jasmineNodeOpts: {
'stopSpecOnExpectationFailure': true,
showColors: true
}
};
'use strict';
/**
* modal.spec.js
*/
var headerText = "Would you like to delete your debt?";
describe('Click Modal and Close test', function () {
beforeAll(function () {
browser.get('https://material.angularjs.org/latest/demo/dialog')
});
it('should click to open modal', function () {
confirmBtn.click().then(function () {
WaitForLoad(cancelBtn).then(function () {
expect(headerTextEl).toEqual(headerTextEl);
});
});
});
it('should click to close modal', function () {
cancelBtn.click().then(function () {
WaitForLoad(confirmBtn);
});
});
it('should click to open modal', function () {
confirmBtn.click().then(function () {
WaitForLoad(cancelBtn).then(function () {
expect(headerTextEl).toEqual(headerTextEl);
});
});
});
it('should click to close modal', function () {
cancelBtn.click().then(function () {
WaitForLoad(confirmBtn);
});
});
});
// region Page Objects
var confirmBtn = $('.layout-margin > button:nth-child(2)');
var headerTextEl = $('.md-title');
var cancelBtn = $('button.md-cancel-button');
// endregion
// region actions
var WaitForLoad = function (el, timeout) {
var EC = protractor.ExpectedConditions;
return browser.wait(EC.elementToBeClickable(el), timeout);
};
// endregion