Ionic 2 : using Toast inside an alert handler throws an ExpressionChangedAfterItHasBeenCheckedException - javascript

I tried to display a toast after a user pressed a button in an alert but it throws an ExpressionChangedAfterItHasBeenCheckedException in dev mode. I believe it's an ionic bug. Has anyone experienced the same issue ? Can you confirm I'm not doing any mistakes ?
Here's the code :
let prompt = this.alertController.create({
title: 'Alert displaying a toast',
buttons: [{
text: 'Cancel',
role: 'cancel'
}, {
text: 'Display toast',
handler: () => {
displayToast();
}
}]
});
prompt.present();
and displayToast() :
displayToast() {
let toast = this.toastController.create({
message: 'toast displayed from inside an alert',
duration: 2000
});
toast.present();
}
To reproduce the Exception, you have to display the alert multiple times and press 'cancel' or 'display' buttons many times.
Cheers

Related

Is there a way to add a cancel button with an input field in Sweetalert, Reactjs

I'm trying to create an Swal alert that must contain an input field with a continue and cancel button in ReactJs. This is my code right now:
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: "input",
attributes: {
placeholder: title + " reason",
},
},
}).then(comment => {
if (comment === null || comment === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
})
This code only creates an 'OK' button and I get the input from the user in the comment variable, but I need to add a 'Continue' button and a 'Cancel' button to leave the alert. I've tried adding the button parameter in the swal options and this creates the buttons but I'm not able to get the input from the user.
I also have tried to add raw html in the content and get the input with a handle method but so far I haven't been able to do this.
Maybe the solution for this is easy but I am not able to get it. Thank a lot for the help
I found out a way to solve this in case anyone have to do something similar. I just created the input by doing document.createElement('input') and then I got the value depending on the user clicked on Continue or Cancel:
const cancellation_reason = document.createElement('input');
swal({
icon: "warning",
text: 'Are you sure you want to continue? This operation is not reversible',
content: {
element: cancellation_input,
attributes: {
placeholder: title + " reason",
},
},
buttons: {
continue: 'continue',
cancel: 'cancel'
}
}).then(option => {
switch (option){
case 'continue':
if (cancellation_input.value === null || cancellation_input.value === ''){
swal({icon: 'error', text: 'You need to type the cancellation reason'});
return false
}
prop(runID, null, path, cancellation_input.value).then(showMesagge);
break;
case 'cancel':
break;
}
})

explicitly release sweetalert popup after ajax call

I'm using sweetalert to ask user for an input to rename a tag. And then I make an ajax call to change the tag on server. If succeeded, I call a small callback function(postAction) which will update the UI and renamed the tag on UI. It works fine as long as little call back function has a statement "swal("done!");", so user clicks on this little confirmation message box, and sweetalert message box is released. I'm trying to see if there is a function I can call to release the input sweetalert pop up without the additional "swal("done")" statement, so user will have 1 less click. Is there an easy way to do this?
All I can find now is to add a timer in the second pop up. swal("Done!", {timer: 500}); It's OK but not ideal.
renameTag = function(tagId)
{
swal({
title: "Rename Gallery Tag",
text: 'Please provide a new tag name',
content: "input",
button: {
text: "OK",
closeModal: false,
},
})
.then(name => {
var tagName = name.trim();
if (tagName.length == 0)
{
swal({
title: "Rename Gallery Tag Failed",
text: "Tag name cannot be empty",
icon: "error",
button: "OK",
});
return;
}
else
{
ajaxAction("POST"
, "/User/RenameGalleryTag"
, { 'index': tagId, 'name': tagName }
, "rename gallery tag"
, {
'reload': false
, postAction: function () {
$(".selected-tag").text(tagName);
swal("done!");
}
});
}
})
}
You should be able to close it like this
swal.close()

Jquery : noty confirmation message

I am using JQuery noty plugin. I need Confirmation message box, how ever the Confirmation Message Box comes fine along with Buttons, but the Buttons Click Event are not working. When i click any of the Buttons. It gives me
HTTP Error 404.0 - Not Found.
The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. error. Below is my code.
noty({
text: 'Are you sure?',
type: 'confirm',
buttons: [
{
addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Ok" button', type: 'success' });
}
},
{
addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
$noty.close();
noty({ text: 'You clicked "Cancel" button', type: 'error' });
}
}
]
})
whats wrong with this.
Check if the scripts are really loaded via firebug/devtools and if your paths are correct. Tested your code and it worked for me.

Sencha Touch 2: Ext.Msg.show and tapping anywhere to hide

I want to display the popup message without any buttons. The message disappears if you tap on it. The code works fine and was taken from Sencha Touch 2: tapping Ext.Msg.show that have no buttons, thank you Viswa.
Ext.Msg.show({
title: 'Title',
message: 'Some text goes here...',
itemId : 'showMsg',
buttons : [],
listeners:[
{
element: 'element',
delegate: '',
event: 'tap',
fn: function() {
this.hide();
}
}]
});
How to make it disappeared when you tap anywhere on the screen, not on the popup message?
You can use the hideOnMaskTap config.
hideOnMaskTap: true

Add click listener on on button in Ext.window.MessageBox

I am creating dinamically a message box (Ext.window.MessageBox)
var msgBox = Ext.create('Ext.window.MessageBox', {
title: '',
//message in window
msg: 'message text',
icon: 'WARNING',
//buttons
buttons: 'OKCANCEL',
//onclick funciton
fn: myfunc
});
I am adding OK and Cancel buttons. Is it possible to add click listener on the OK button so that I can do my stuff only when this OK button is pressed?
Also is it possible to add specific ids to the OK and Cancel buttons so that I can distinguish them more easily, instad of using the pregenrated ids from ExtJS?
You may use the following construction instead:
Ext.MessageBox.show({
title: "",
msg: "message text",
icon: Ext.MessageBox.WARNING,
buttons: Ext.MessageBox.OKCANCEL,
fn: function(buttonId) {
if (buttonId === "ok") {
// do on OK pressed
}
}
});
Here the first argument in the fn handler is a string value of pressed button.
DEMO: http://jsfiddle.net/xj9qY/

Categories