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);
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'm using Gijgo Grid and I have added a button to the grid rows using the cellDataBound event but I can't get the button click event to fire. Anyone any idea what the issue may be ?
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
}
}
});
$('#btnCompanyUserSubscribed').on('click', function (e) {
alert('Button has been clicked')
})
I think that would be best if you use column.renderer about this. You should assign the click event right after the creation of the element.
<table id="grid"></table>
<script>
var subscribeRenderer = function (value, record, $cell, $displayEl) {
var $btn = $('<button type="button" class="btn btn-danger">Renew</button>').on('click', function () {
alert('clicky');
});
$displayEl.empty().append($btn);
};
$('#grid').grid({
dataSource: '/Players/Get',
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name' },
{ field: 'subscribe', renderer: subscribeRenderer }
]
});
</script>
The code above should be also useful with cellDataBound event.
Give the event click function inside the columns and use cellDataBound.Like this
reportGrid = $('#eventReportData').grid({
primaryKey: 'UserPrivilegeRequestsID',
autoLoad: false,
responsive: true,
bodyRowHeight: 'fixed',
dataSource: '/Admin/GetDiscrepencyReport',
columns: [
{
field: 'UserName', title: 'Trainer', sortable: true,
events: {
'click': function (e) {
var userName = e.data.record.UserName;
popupGrid(userName);
}
}
},
{ field: 'Organization', title: 'Organization', sortable: true },
{ field: 'Country', title: 'Country', sortable: true },
{ field: 'Action', width: 170, renderer: editManager }
],
params: { sortBy: 'UserName', direction: 'desc' },
pager: { limit: 10, sizes: [5, 10, 15, 20] },
});
reportGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('UserName' === column.field) {
$displayEl.html("<div data-toggle='modal' data-target='#myModal2' >" + record.UserName + "</div>");
}
});
function popupGrid(userName) {
alert(userName);
}
Make it a function and do it like this:
$(document).ready(function () {
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
$('#btnCompanyUserSubscribed').on('click', CompanyUserSubscribed);
}
}
});
});
function CompanyUserSubscribed() {
alert('Button has been clicked');
}
you can create your button this way:
$(document).ready(function () {
function Edit(e, type) {
alert("Button was clicked for row: " + e.data.record.recid)
}
grid = $("#myGrid").grid({
dataKey: "recid",
uiLibrary: "bootstrap",
dataSource: //SomeURL,
columns: [
{ field: 'recid', title: 'RecordID', width: 20, resizable: true, align: 'center' },
{ title: 'Edit', field: 'Edit', width: 15, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit }, align: 'center' }
]
});
});
Most important part is calling your Edit function here:
events: { 'click': Edit }
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();
}
}
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 know, no one uses tinymce in this site. Because I asked 2 question before related tinymce. No one visited the pages. But again, I have a problem. I coded like this:
editor.addButton('site_link', {
icon: 'fa-heart',
tooltip: 'Internal link',
onclick: function() {
editor.windowManager.open({
file : url + '/link.php',
width : 500,
height : 200,
title: 'Internal link',
buttons: [
{
text: "Get Link",
classes: 'widget btn primary',
id: "link",
onclick: function() {
var link = $('#bag_link').val();
alert(link);
}
},
{
id: "close",
text: 'Kapat',
onclick: 'close'
}
]
});
}
});
And the "link.php" page is like this:
When click "Get Link" button, I want to get values form elements which located in the "link.php". But I did not manage it. Could you help me ? How can I do this?
I had to wrestle through this too, but i came up with something like this.
Instead of calling the windowmanager i had the following inside the onclick function:
function showDialog()
{
var var1, var2;
// do whatever you need here
var win = tinymce.ui.Factory.create({
type: 'window',
layout: "flex",
pack: "center",
align: "center",
onClose: function() {
ed.focus();
},
onSubmit: function(e) {
var x,y,z;
e.preventDefault();
// read Field!!!!!
x = win.find('#my_content_field').value();
// Do whatever you need here
// Dialog schließen
win.close();
},
onPostRender: function(){
ed.my_control = this;
},
buttons: [
{
text: "Paste",
onclick: function() {
win.submit();
}},
{
text: "Cancel",
name: 'cancel',
disabled: false,
onclick: function() {
win.close();
}}
],
title: 'my title',
items: {
type: "form",
padding: 20,
labelGap: 30,
spacing: 10,
items: [
{
type: 'textbox',
multiline: true,
name: 'my_content_field',
value: 'standard text'
}
]
}
}).renderTo().reflow();
};