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");
}
}
}
})
});
Related
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 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 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 have the error Uncaught TypeError: Object #<Object> has no method 'apply' when I click on Edit button. Here is my panel :
Ext.define(
"ux.panel.MyPanel", {
extend : "Ext.form.Panel",
xtype : "MyPanel",
title : "Bla bla title"
initComponent : function () {
ux.panel.MyPanel.superclass.initComponent.call(this);
},
init : function (initParameters) {
this.initParameters = initParameters;
this.removeAll(true);
if (this.initParameters == null)
return;
},
editSomething : function () {
alert("editTV");
},
tbar : [{
text : "Edit"
iconCls : "silk-edit-16",
id : "editbutton",
disabled : false,
listeners : {
click : {
scope : this,
fn : this.editSomething
}
}
}, {
text : "Remove",
iconCls : "silk-delete-16",
id : "removeButton",
disabled : false,
listeners : {
click : {
scope : this,
fn : function () {
alert("RemoveTV");
}
}
}
}
]
});
This panel is included in a page composed of many other panel. I'm doubting that this in the this.editSomething is not pointing to my panel. I don't have any clue about how to deal with this.
Anyone has any idea about the reason please?
That is because this is not what you expect it to be.
Add the tbar in the initComponent function, like:
initComponent: function () {
Ext.apply(this, {
tbar: [{
text: "Edit",
iconCls: "silk-edit-16",
id: "editbutton",
disabled: false,
listeners: {
click: {
scope: this,
fn: this.editSomething
}
}
}, {
text: "Remove",
iconCls: "silk-delete-16",
id: "removeButton",
disabled: false,
listeners: {
click: {
scope: this,
fn: function () {
alert("RemoveTV");
}
}
}
}]
});
this.callParent(arguments);
}
http://jsfiddle.net/gkcU7/
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()