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.
Related
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 try to write a plugin for the CKEditor (Version 4.x), with a Dialog UI element.
the definition of the dialog looks like:
CKEDITOR.dialog.add('abbrDialog', function(editor) {
return {
title: editor.lang.abbr.title,
label: editor.lang.abbr.title,
minWidth: 400,
minHeight: 200,
contents: [{
id: 'abbreviation-dialog',
label: editor.lang.abbr.label,
elements: [
{
id: 'abbreviation-found-label',
type: 'html',
label: editor.lang.abbr.found,
html: '<span id="foundLabelId">'+ editor.lang.abbr.found + '<\/span>'
},
{
id: 'abbreviation-current-item',
type: 'html',
label: editor.lang.abbr.currentLabel,
html: '<span id="currentLabelId">'+ editor.lang.abbr.currentLabel + '<\/span>'
},
{
id: 'abbreviation-replace-button',
type: 'checkbox',
label: editor.lang.abbr.replaceButton,
onClick : function() {
replaceAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-next-button',
type: 'button',
label: editor.lang.abbr.nextButton,
onClick : function() {
nextAbbreviation(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
}
},
{
id: 'abbreviation-all-button',
type: 'button',
label: editor.lang.abbr.allButton,
onClick : function() {
replaceAllAbbreviations(editor.lang.abbr.currentLabel, editor.lang.abbr.noMore);
//alert('Replace all!!');
}
}]
}],
buttons: [CKEDITOR.dialog.okButton],
onShow: function() {
initDialog(editor.lang.abbr.found, editor.lang.abbr.currentLabel);
},
onOk: function() {
// nothing to do
}
In one function i try to disable a button. This looks like:
CKEDITOR.dialog.getCurrent().getContentElement("abbreviation-dialog", "abbreviation-replace-button").disable();
Unfortunately this button gets not disable (but the additional CSS-class cke_disabled is added).
Also strange: if i turn that abbreviation-replace-button into a checkbox, this checkbox gets disabled (with no further code modifications).
My Questions:
How can i disable a button on a plugin dialog?
Why gets the checkbox disabled but the button not?
Where is my mistake?
I think you need to call a special method to disable buttons,
i.e. `disableButton('btn')
you can disable ok or cancel button by following way
CKEDITOR.dialog.getCurrent().disableButton('ok')
CKEDITOR.dialog.getCurrent().disableButton('cancel')
in your case you can try
CKEDITOR.dialog.getCurrent().disableButton('abbreviation-next-button')
I want to hide the destructiveText property conditionally, is that possible? So, say there is a variable called showDelete. I want to show destructiveText to show only when showDelete = true. Is it possible to conditionally exclude it from the json?
$ionicActionSheet.show({
buttons: [
{ text: 'Share' },
{ text: 'Report'},
],
destructiveText: 'Delete', //I want to hide this delete element when showDelete is false
titleText: 'Actions',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
},
...
Define your config object outside of the function call, then you can modify properties using conditionals as well as use methods like angular.extend()
var opts = {
buttons: [
{ text: 'Share' },
{ text: 'Report'},
],
titleText: 'Actions',
cancelText: 'Cancel',
cancel: function() {
// add cancel code..
}
}
if(showDelete){
opts.destructiveText = 'Delete';
}
$ionicActionSheet.show(opts);
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();
}
},
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()