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);
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 made a jQuery plugin where one of the properties needing to be passed is a multi-dimensional object, each requiring three properties. Problem is, I don't know how to send more than two. I have provided an example to show the current effect and the needed effect:
What I currently do:
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: {
"Yes": function() { /*some operation*/ }
}
});
What I need to do:
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: {
"Yes": function() { /*some operation*/ } : true
}
});
In order to show it's a special type of button (internally, the plugin would do something with the third value).
How is this achievable?
In this case, "Yes" is not a property ... it is a key and the function is the value. You need to add another key/value pair. Try ...
buttons: {
"Yes": function() { /*some operation*/ },
"Special" : true
}
Then you can check to see if Special exists and has the value of true.
You can put whatever operations before the closes.
$.dialog({
title: "Delete Comment",
text: "Are you sure you want to delete this comment?",
buttons: [{
"Yes": function () {
$(this).dialog("close");
}
}, {
"No": function () {
$(this).dialog("close");
}
}, {
"Maybe": function () {
$(this).dialog("close");
}
}]
});
I defined a class 'IMS.SellMgt.testForm'.when i click the button 'submit',i want to get 'var test = this.formPanel;',why test is null? if i want to get this.formPanel,how can i do?Thank you!
Ext.define('IMS.SellMgt.testForm', {
formPanel: null,
LoadForm: function () {
this.formPanel = new Ext.form.Panel({
renderTo: 'form-ct',
frame: true,
title: 'XML Form',
width: 300,
items: [{
xtype: 'fieldset',
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
emptyText: 'First Name',
name: 'first'
}
]
}],
buttons: [{
text: 'Submit',
handler: function () {
var test = this.formPanel;
}
}]
});
}
});
Ext.onReady(function () {
var frmTest = Ext.create('IMS.SellMgt.testForm', {});
frmTest.LoadForm();
});
try something like:
......
handler: function () {
var test = this.findParentByType(Ext.form.FormPanel);
}
....
handler is a simpler way of specifying a click event listener for the button. Since it is short hand, it has some drawbacks.
With handler, the context of the function is always the button. In other words, this inside the handler function is the button, not your form.
In order for this to be your class, use a listener with a scope specified:
buttons: [{
text: 'Submit',
listeners: {
click: function() {
this.formPanel; // will work now
...
},
scope: this // this is the key
}
}]
You can also use up to find the form:
handler: function() {
var form = this.up('form');
...
}
I have following problem. I have grid with tbar. Inside tbar I have number of Ext.form.field.Trigger.
When the user click on trigger button I want to filter the store using function that is provided with grid. I want to define functionality of triggerclick inside defined class, so I can reuse this component with different grid.
So, in short I want to find the panel where clicked component is placed and call panel function, or pass reference of panel to triggerclick, or fire an event with some parameter that will calculated based on where the button was clicked, or maybe there is a better method to accomplish this.
The code (FilterField -> extension of trigger):
Ext.define('GSIP.core.components.FilterField', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.filterfield',
initComponent: function() {
this.addEvents('filterclick');
this.callParent(arguments);
},
onTriggerClick: function(e, t) {
//Ext.getCmp('gsip_plan_list').filterList(); - working but dont want this
//this.fireEvent('filterclick'); - controller cant see it,
//this.filterList; - is it possible to pass scope to panel or reference to panel
//e.getSomething() - is it possible to get panel via EventObject? smth like e.getEl().up(panel)
}
});
code of panel:
Ext.define('GSIP.view.plans.PlanReqList', {
extend: 'Ext.grid.Panel',
alias: 'widget.gsip_devplan_list',
id: 'gsip_plan_list',
title: i18n.getMsg('gsip.view.PlanReqList.title'),
layout: 'fit',
initComponent: function() {
this.store = 'DevPlan';
this.tbar = [{
xtype: 'filterfield',
id: 'filter_login',
triggerCls: 'icon-user',
//scope:this - how to pass scope to panel without defining onTriggerClick here
// onTriggerClick: function() {
// this.fireEvent('filterclick'); //working event is fired but controller cant see it
// this.filterList; //this is working but i dont want to put this code in every filterfield
// },
// listeners : {
// filterclick: function(btn, e, eOpts) { //this is working
// }
// },
}];
this.columns = [{
id: 'id',
header: "Id",
dataIndex: "id",
width: 50,
sortable: true,
filterable: true
}, {
header: "Name",
dataIndex: "name",
width: 150,
sortable: true,
filterable: true
}, {
header: "Author",
dataIndex: "author",
sortable: true,
renderer: this.renderLogin,
filterable: true
}];
this.callParent(arguments);
},
filterList: function() {
this.store.clearFilter();
this.store.filter({
property: 'id',
value: this.down("#filter_id").getValue()
}, {
property: 'name',
value: this.down("#filter_name").getValue()
});
},
renderLogin: function(value, metadata, record) {
return value.login;
}
});
part of code of Controller:
init: function() {
this.control({
'attachments': {
filesaved: this.scanSaved,
}
}, {
'scan': {
filesaved: this.attachmentSaved
}
}, {
'#filter_login': {
filterclick: this.filterStore //this is not listened
}
});
},
filterStore: function() {
console.log('filtering store');
this.getPlanListInstance().filter();
},
Controller can listen to anything. Just need to specify exactly what to. But I would fire events on the panel level - add this into your trigger handler:
this.up('panel').fireEvent('triggerclicked');