I'm making ionic 3 application. There is verify otp functionality in a sign up page. When the user clicks on sign up button then an alert will be open with otp input with cancel, verify and resend button. What I want to do when user clicks on resend button the same alert should open. I have done this by copying the whole alert code in resend button handler. but it's just opening in first time only. I want to reopen this alert infinitely when a user clicks on resend button.
Below is my alert code
{
let alert = this.alertCtrl.create({
title: 'OTP Sent. Verify OTP',
inputs: [{
name: 'otp',
placeholder: 'OTP',
value: this.otp
}, ],
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Verify',
handler: data => {
console.log(data.otp);
if (this.responseData.data.otp_sent == data.otp) {
console.log("verfiied");
} else {
// invalid login
return false;
}
}
},
{
text: 'Resend',
handler: data => {
this.authService.postData('mobile=' + this.responseData.data.mobile, 'user/resend').then((result) => {
// console.log(this.otpResend);
let alert = this.alertCtrl.create({
title: 'OTP Sent. Verify OTP',
inputs: [{
name: 'otp',
placeholder: 'OTP',
value: this.otp
}, ],
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Verify',
handler: data => {
console.log(data.otp);
if (this.responseData.data.otp_sent == data.otp) {
console.log("verfiied");
} else {
// invalid login
return false;
}
}
},
{
text: 'Resend',
handler: data => {
this.authService.postData('mobile=' + this.responseData.data.mobile, 'user/resend').then((result) => {
// console.log(this.otpResend);
});
}
}
]
});
alert.present();
});
}
}
]
});
alert.present();
}
Make a resend function
resend(){
this.authService.postData('mobile=' + this.responseData.data.mobile, 'user/resend').then((result) => {
// console.log(this.otpResend);
let alert1 = this.alertCtrl.create({
title: 'OTP Sent. Verify OTP',
inputs: [{
name: 'otp',
placeholder: 'OTP',
value: this.otp
}, ],
buttons: [{
text: 'Cancel',
role: 'cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Verify',
handler: data => {
console.log(data.otp);
if (this.responseData.data.otp_sent == data.otp) {
console.log("verfiied");
} else {
// invalid login
return false;
}
}
},
{
text: 'Resend',
handler: data => {
this.authService.postData('mobile=' + this.responseData.data.mobile, 'user/resend').then((result) => {
resend();
// console.log(this.otpResend);
});
}
}
]
});
alert1.present();
}
Then call it
{
text: 'Resend',
handler: data =>{
resend();
}
}
Related
I'm trying to develop a custom TinyMCE plugin which will load the items for a selectbox list based on the options of another selectbox list. However, I cannot figure out how to detect any even on the selectbox list.
The documentation is almost entirely useless, as it provides no mention of custom plugin options - only the boilerplate code to start off.
How can I detect an onchange event when the select lists's selection is altered?
tinymce.PluginManager.add('custom', function(editor, url) {
var openDialog = function () {
return editor.windowManager.open({
title: 'Custom',
body: {
type: 'panel',
items: [
{
type: 'selectbox',
name: 'options',
label: 'Options',
items: [
{text: 'Primary', value: 'primay style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
onchange: function() {
alert('hi');
},
flex: true,
}, {
type: 'selectbox',
name: 'selection',
label: 'Selection',
items: [
],
flex:true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
primary: true
},
],
onSubmit: function (api) {
var data = api.getData();
/* Insert content when the window form is submitted */
editor.insertContent(data);
api.close();
}
});
};
/* Add a button that opens a window */
editor.ui.registry.addButton('custom', {
text: 'Custom',
onAction: function () {
/* Open window */
openDialog();
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration
*/
editor.ui.registry.addMenuItem('custom', {
text: 'Custom',
onAction: function() {
/* Open window */
openDialog();
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: function () {
return {
name: 'Example plugin',
url: 'http://exampleplugindocsurl.com'
};
}
};
});
I am trying to add input fields in chaining modals (queue) using sweet alerts.
Reference http://www.inetcnx.net/sweetalert/index.html#chaining-modals
Problem: I want to add validation on each input field. Lets say; to make it required field, therefore user must need to enter value in input before proceeding to next step.
Code:
$('body').on('click','.apt_action',function() {
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
})
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something"
},
{
title: 'Sales Person',
text: 'Product sold by?'
},
{
title: 'Additional Details',
text: 'Coments or additional notes'
},
]
swal.queue(steps).then(function (result) {
swal.resetDefaults()
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
})
});
Js Fiddle :https://jsfiddle.net/mvohq23z/3/
Just add a preConfirm function block at each step you want to validate and do the validation using the variable value as you wish. Call the resolve() method for success or the reject('text error description here') to display an error message and prevent the chain modal to proceed to the next step.
Here's an example using your code in order to make all the input fields required:
JSfiddle here: https://jsfiddle.net/davidtoledo/ymb38u6t/1
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
animation: true,
progressSteps: ['1', '2', '3']
});
var steps = [
{
title: 'Customer Name',
inputId: "customer_name",
inputPlaceholder: "Write something",
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 1!');
}
});
}
},
{
title: 'Sales Person',
text: 'Product sold by?',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 2!');
}
});
}
},
{
title: 'Additional Details',
text: 'Coments or additional notes',
preConfirm: function(value)
{
return new Promise(function(resolve, reject)
{
if (value) {
resolve();
} else {
reject('Please type something in the step 3!');
}
});
}
},
];
swal.queue(steps).then(function (result) {
swal.resetDefaults();
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
(result) +
'</pre>',
confirmButtonText: 'Lovely!',
showCancelButton: false
})
}, function () {
swal.resetDefaults()
});
Cheers,
David Costa
Is it possible to add custom buttons to the Ext.MessageBox.confirm. By custom I mean custom text and custom number of buttons...
Ext.MessageBox.confirm('Delete', 'Are you sure ?',
function(btn){
if(btn === 'yes'){
return true;
}
else{
return false;
}
});
Try setting the buttonText, like:
Ext.MessageBox.show({
title: 'Delete',
message: 'Are you sure ?',
width: 300,
buttons: Ext.Msg.YESNO,
buttonText: {
yes: 'Yesssss!!!',
no: 'Nooo!!!'
}
});
Example: https://fiddle.sencha.com/#fiddle/12bq
Try using below
Ext.Msg.show({
title: 'Enter Message',
msg: null,
buttons: [{
itemId: 'ok',
text: 'Send',
ui: 'action'
}, {
itemId: 'cancel',
text: 'Cancel'
}],
prompt: {
maxlength: 180,
autocapitalize: false
},
fn: function(text,btn) {
// do some stuff
}
});
I have a custom confirm dialog and I want to have the tabindex on the btn-danger button so I can submit the form with enter.
How to achieve that?
var config = {
title: 'Confirm approval removal',
message: "<em>" + self.$label.text() + "</em> is about to be removed. Please confirm the action.",
buttons: {
'cancel': {
label: 'Keep approval',
className: 'btn-default'
},
'confirm': {
label: 'Remove approval',
className: 'btn-danger'
}
},
callback: function(result) {
if (result) {
self.$approvedCheckbox.prop('checked', false);
} else {
self.$approvedCheckbox.prop('checked', true);
self.$requiredCheckbox.prop('checked', false);
}
self.markRequiredFields();
}
};
bootbox.confirm(config);
I tried adding tabindex attributes but it did not work.
The button which has the btn-primary class will get autofocus for enter completion. It also works together with btn-danger:
var config = {
...
buttons: {
'cancel': {
label: 'Keep approval',
className: 'btn-default'
},
'confirm': {
label: 'Remove approval',
className: 'btn-danger btn-primary' // this button will get the index and will be submitted on enter
}
},
...
};
bootbox.confirm(config);
I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk