I am using Jquery noty to display notification to the user,
I need to know how can I catch the confirm buttons click event to
preventDefault for each button.
noty({
text: message,
layout: position, "type": type,
buttons: [
{addClass: 'btn btn-primary', text: 'Ok', onClick: function ($noty) {
$noty.close();
}
},
{addClass: 'btn btn-danger', text: 'Cancel', onClick: function ($noty) {
$noty.close();
}
}
]
});
Please Advice,
Use preventDefault() like this:
{addClass: 'btn btn-primary', text: 'Ok', onClick: function (e,$noty) {
e.preventDefault();
$noty.close();
}
},
Related
I have a Ext.toast and Ext.Msg to be displayed on button click. So on click of button the content of toast and messagebox should be read.
I have applied ariaLabel but its still not readable, tried setting focus and containsFocus as well but still no luck, when I set defaultFocus:1 on messagebox it works for the first time only. Any hints please.
Ext.toast({
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
ariaLabel: 'My Title Data Saved'
});
Ext.Msg.show({
title: 'Invalid search criteria',
msg: 'check',
ariaLabel:'Invalid search criteria check',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
Screen reader to be used - NVDA
Fiddle can be found here
The problem is that attribute aria-labelledby is always set automatically. (and has the higher precedence ariaLabelledBy). I did not find a way to avoid automatic substitution, so I created an override that does this for window instances
Ext.define('Ext.window.WindowAriaOverride', {
override: 'Ext.window.Window',
afterShow: function () {
this.el.dom.setAttribute('aria-labelledby', null)
this.el.dom.setAttribute('aria-label', this.ariaLabel)
}
});
Fiddle
If you will look at the documentation of the Ext.Msg.show, you will not find there any aria* config/param. This config is available only to Ext.window.MessageBox class.
I have changed your fiddle example to force it work, but unfortunately this aria features looks like to be buggy.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.Button', {
text: 'toast',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.Toast', {
html: 'Data Saved',
title: 'My Title',
width: 200,
align: 't',
containsFocus: true,
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show();
}
});
Ext.create('Ext.Button', {
text: 'msgbox',
renderTo: Ext.getBody(),
handler: function () {
Ext.create('Ext.window.MessageBox', {
closeAction: 'destroy',
ariaLabel: 'ARIA_LABEL_VALUE',
//ariaLabelledBy: 'ARIA_LABELLED_BY',
ariaDescribedBy: "ARIA_DESCRIBED_BY",
listeners: {
show: function () {
console.log(
this.el.dom.getAttribute('aria-label'),
this.el.dom.getAttribute('aria-labelledby'),
this.el.dom.getAttribute('aria-describedby')
);
}
}
}).show({
title: 'Invalid search criteria',
cls: 'error-message',
msg: 'yooo',
containsFocus: true,
ariaLabel: 'msg yoo',
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK,
});
}
});
}
});
fiddle
I have a button with an onclick bootbox, inside the bootbox I wanna have some buttons that redirects to other websites. How do I manage this.
I get the following error:
Uncaught Error: button key btn1 is not allowed (options are ok)
What did I mess up ?
let infoButton=$('<button/>',
{
'class': 'btn btn-info',
'data-toggle':'modal',
'data-target':'#infoModal'
}).html('<i class="fas fa-info-circle fa-fw"></i>').on("click", function()
{
bootbox.alert(
{
title: "title",
message: "text",
buttons:
{
btn1:
{
label: "Button 1",
callback: function()
{
window.open.href("http://www3schools.com");
}
},
btn2:
{
label: "Button 2",
callback: function()
{
window.open.href("http://www3schools.com");
}
}
}
})
});
I have a method to ask the user to edit the text,
swal({
text: "Edit your Task",
content: {
element: "input",
attributes: {
value: data,
}
},
buttons:{
cancel: {
text: 'Cancel',
value: 'cancel'
},
edit:{
text: 'Edit',
value: 'edit'
}
}
}).then((value)=>{
console.log(value);
})
This is my code, now how to get the updated input text when the user clicks the Ok button
take a look at the Doc , https://sweetalert.js.org/guides/ at ajax requests, you need to search before ask here
I want to localize jQuery confirm buttons in WordPress. For this I coded in PHP file like this:
function Confirmation()
{
// Register the script
wp_register_script('eux-conf', '/js/eux-js.js');
// Localize the script with new data
$translation_array = array(
'confirmation' => __('Confirmation', 'eux-loc'),
'message' => __('Do you want to delete this item?', 'eux-loc'),
'yes' => __('Yes', 'eux-loc'),
'no' => __('No', 'eux-loc')
);
// Enqueued script with localized data.
wp_enqueue_script('eux-conf');
wp_localize_script('eux-conf', 'meta', $translation_array);
}
add_action('admin_print_scripts', 'Confirmation');
And jQuery codes:
jQuery('.delete').click(function()
{
jQuery.confirm({
'title': meta.confirmation,
'message': meta.message,
buttons: [
{
text: meta.yes,
classes: 'widget btn primary',
id: "yes",
onclick: function() {
}
},
{
text: meta.no,
classes: 'widget btn secondary',
id: "no",
onclick: 'close'
}
]
});
EDIT: After David Lee's answer, I realized, if I write "This is a String" instead of meta.yes, I get 0 and 1 again like here:
buttons: [
{
text: "This is a String",
classes: 'widget btn primary',
id: "yes",
onclick: function() {
}
},
{
text: meta.no,
classes: 'widget btn secondary',
id: "no",
onclick: 'close'
}
]
I think firstly, I must correct my buttons parameters, but I don't know.
But this gives me like here:
You see, my buttos are Yes and No, but the code shows 0 and 1. How do I correct this?
try
function Confirmation()
{
// Register the script
wp_register_script('eux-conf', '/js/eux-js.js');
// Localize the script with new data
$translation_array = array(
'confirmation' => __('Confirmation', 'eux-loc'),
'message' => __('Do you want to delete this item?', 'eux-loc'),
'yes_s' => __('Yes', 'eux-loc'),
'no_s' => __('No', 'eux-loc')
);
// Enqueued script with localized data.
wp_localize_script('eux-conf', 'meta', $translation_array);//this one first
wp_enqueue_script('eux-conf');
}
add_action('admin_enqueue_scripts', 'Confirmation');
and in jQuery:
jQuery('.delete').click(function()
{
jQuery.confirm({
'title': meta.confirmation,
'message': meta.message,
buttons: [
{
text: meta.yes_s,
classes: 'widget btn primary',
id: "yes",
onclick: function() {
}
},
{
text: meta.no_s,
classes: 'widget btn secondary',
id: "no",
onclick: 'close'
}
]
});
i changed the order, you need to localize first then enqueue, also i changed the hook to admin_enqueue_scripts, and changed the name of the variables since no is a reserved one.
Try,
jQuery.confirm({
'title': meta.confirmation,
'message': meta.message,
buttons: {
yes: {
text: meta.yes_s, // OR text: "'"+meta.yes_s+"'",
classes: 'widget btn primary',
id: "yes",
onclick: function() {
}
},
no: {
text: meta.no_s, // OR text: "'"+meta.no_s+"'",
classes: 'widget btn secondary',
id: "no",
onclick: 'close'
},
}
});
jQuery Confirm is just a plugin and not just one. There are one more plugins named jQuery.confirm. Which is your plugin jQuery-Confirm or BootboxJS or others. I suggest that update your plugin. Because Jaydip Nimavat's example works.
I'd like to close the dialog within the onclick function of the first button, I've tried running the close() function that I've found on the windowManager object through console.log but it doesn't work.
when I do:
console.log(editor.windowManager);
I see the following output:
Object {windows: Array[1], open: function, alert: function, confirm: function, close: function}
and then I call that close function you see in the output above like so
editor.windowManager.close();
and then I get:
Uncaught TypeError: Cannot call method 'close' of undefined
here is my code
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: 'close'
}]
})
}
});
You can close the popup like so:
tinymce.PluginManager.add('jbimages', function (editor, url) {
function jbBox() {
editor.windowManager.open({
title: 'Upload an image',
file: url + '/dialog-v4.htm',
width: 350,
height: 135,
buttons: [{
text: 'Upload',
classes: 'widget btn primary first abs-layout-item',
disabled: false,
onclick: function(){
$('#mce_39-body iframe').contents().find('#upl').submit();
editor.windowManager.close();
}
}, {
text: 'Close',
onclick: editor.windowManager.close()
}]
})
}
});
Looking at the provided plugins, the more common way it to assign editor.dom to a var and call close on that, like so:
var win = editor.dom
...
win.close()