I created an ionic2 alert and I have to disable a button according to a condition.
This is a simple structure of my code:
import { AlertController } from 'ionic-angular';
export class MyPage {
constructor(public alertCtrl: AlertController) {
}
showCheckbox(condition) {
let alert = this.alertCtrl.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: data => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
alert.present();
}
}
I have to disable Okay button if given condition is true (parameter 'condition' that passed to the showCheckbox() function).
I know the question was asked over a year ago, just in case someone other needs it.
I've created a little, I would say, "workaround", which works like a charm.
alert.present() offers a Promise, so we can listen to it, after the alert was successfully created.
Now, here's what I've done:
alert.present().then(() => {
/** disable the confirm button initial */
document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');
return;
});
It's a bit hacky to access the confirm button via document.querySelector(); and the above query, but the confirm button does not has a unique identifier as I've seen it, something like role="confirm" or so.
So You need to write a function, which will be triggered on each click on Your inputs (via handler).
alert.addInput({
type: 'checkbox',
label: 'testLabel',
value: 'testValue',
handler: () => {
functionToCheckConfirmButtonState();
}
});
There You need to check Your checkbox values inside the functionToCheckConfirmButtonState(); function and enable the confirm button with:
document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').removeAttribute('disabled');
or disable it again with:
document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');
Hope I could help.
Cheers
Unkn0wn0x
Related
I am using angular-silkgrid with angular 7. I am using inline editing feature. I am using single select editor for inline edit. Currently I want to achieve this functionality:
As soon as user click on the editable field , the select drop down will be visible.On select any option from select dropdown the inline mode should exist and column value should be updated.
currently I need to click on other field to exit from inline mode(I want to achieve this on select option select)
editor: {
// display checkmark icon when True
enableRenderHtml: true,
// tslint:disable-next-line:max-line-length
collection: [{
value: 1,
label: 'Sucessful'
}, {
value: 2,
label: 'Unsucessful'
}],
model: Editors.singleSelect, // CustomSelectEditor
elementOptions: {
autoAdjustDropPosition: false,
onClick: (event, rr) => {
// here i want to write some code which can trigger to grid to start update
}
}
}
Thanks All for the answers. I have solved my issue as below:
editor: {
enableRenderHtml: true,
collection: [{ value: CCLStaus.Sucessfull, label: 'Sucessful' }, { value: CCLStaus.UnSucessfull, label: 'Unsucessful' }],
model: Editors.singleSelect,// CustomSelectEditor
elementOptions: {
onClick: (event) => {
const updateItem = this.angularSilkGrid.gridService.getDataItemByRowIndex(this.rowInEditMode);
updateItem.status = +event.value;
this.angularSilkGrid.gridService.updateItem(updateItem, { highlightRow: false });
this.angularSilkGrid.gridService.renderGrid();
}
}
}
Generally,
grid.getEditorLock().commitCurrentEdit()
will commit and close the editor.
Also, any of
grid.navigateRight()
grid.navigateLeft()
grid.navigateDown()
grid.navigateUp()
grid.navigateNext()
grid.navigatePrev()
will commit and exit gracefully. In the select2 editor, you'll notice:
this.init = function () {
...
// Set focus back to select2 element on closing.
$input.on('select2:close', function (e) {
if ((e.params.originalSelect2Event && e.params.originalSelect2Event.data)
|| e.params.key === 9) {
// item was selected with ENTER or no selection with TAB
args.grid.navigateNext();
} else {
// closed with no selection
setTimeout(function () {
$input.select2('focus');
}, 100);
}
});
};
this.destroy = function () {
$input.select2('destroy');
$input.remove();
};
, noting that args.grid.navigateNext() will commit and close the editor, including calling the destroy() method at the appropriate time.
From the Angular-Slickgrid Editor Example there's a checkbox in the example to auto commit and that is a setting to you need to enable in your Grid Options
this.gridOptions = {
autoEdit: true,
autoCommitEdit: true,
}
The lib will internally call grid.getEditorLock().commitCurrentEdit() like Ben wrote in his answer, in Angular-Slickgrid you can just set the autoCommitEdit flag that I added.
I am working on extjs 3.4.0 and I wanted to add extra parameter in request to identify whether respective button is clicked or not (lets say clear filter button).
I have added that parameter in following way-
tbar: new Ext.PagingToolbar({
pageSize: 25,
store: PHOPHTStore,
displayInfo: true,
displayMsg: 'Displaying reports {0} - {1} of {2}',
emptyMsg: "No reports to display",
plugins: [PHOPHTFilters],
items:['-',{
text: 'Clear Filters',
iconCls:'x-btn-text-icon',
icon:'../images/tmp/cancel.gif',
tooltip:'Clear currently applied filters',
handler: function() {
PHOPHTGrid.filters.clearFilters();
PHOPHTStore.load({ params: { actionFilter: "clear" } });
}
}
})
Now the situation is I have added this { actionFilter: "clear" } when clear filter button is clicked.But this parameter is carried forward in every next request.I want to remove this as soon as this request is occurred OR when next request is demanded like ascending/descending column OR any other request.
I was planning to to this in -
listeners: {
'beforeload' : function() {
loadMask.msg = "Loading Reports(s), please wait...";
loadMask.show();
},
'load' : function() {
loadMask.hide();
}
}
Is there any other any way to store this parameter at this button click
OR
How can I remove this added parameter in any way?
please suggest
You can try Ext.Ajax.extraParams. I use this approach when loading data from server.
Partial example:
xloaddata: function() {
var me = this;
var v = me.edit_search.getValue();
me.store.proxy.extraParams = {
tablename: me.xtablename,
filter: v
)
};
me.store.loadPage(1);
me.store.proxy.extraParams = {
tablename: me.xtablename
};
}
I have a JSF commandButton that calls onclick function to confirm the action. See:
<h:commandButton actionListener="#{myMB.go}" onclick="return confirmYesOrNo('Remove Row','Are you sure ?')" />
The problem is my commandButton is clicked independent of result in confirmYesOrNo function. See:
function confirmYesOrNo(title, content, actionYes, actionNo) {
var confirmReturn;
if (!actionYes){
actionYes = function(){
return true;
}
}
$.confirm({
theme: themeDefault,
title: title,
content: content,
buttons: {
sim: {
text: 'Sim',
action: confirmReturn = actionYes,
},
nao: {
text: 'Não',
action: confirmReturn = actionNo
}
}
});
return confirmReturn;
}
AS you can see i'm trying to catch the return of button Yes(Sim) and Button No(não) to send as a return (confirmReturn). The problem is that variable confirmReturn returns before user can click in a option.
If i use normal confirm() everything works fine, the javascript waits for a option and return to onclick, but i need a more "pretty" component than default confirm().
I think you should add for both buttons :
action: function () {
return actionYes
}
action: function () {
return actionNo
}
and remove the return from below
I have a config list for buttons like this:
var config = [{
name: 'first',
insertionConfig: {
title: 'first button',
onsubmit: function(){
// do sth
}
}
},{
name: 'second',
insertionConfig: {
title: 'second button',
onsubmit: function(){
// do sth
}
}
}
]
and in my TinyMce plugin I want to add all buttons according to their config. So it would end up like this:
tinymce.PluginManager.add('myPlugin', function(editor, url) {
for (var i in config) {
item = config[i];
editor.addButton(item.name, {
text: item.name,
onclick: function() {
editor.windowManager.open({
title: item.insertionConfig.title,
onsubmit: item.insertionConfig.onsubmit
}
};
}
});
but when I click on first button, it shows the second button's title. all configs of buttons refer to last added button. I know problem is something about the 'item' in the loop (all buttons refer to same item object which is the last one) but I don't know how to fix it.
Try creating a locally scoped variable for item inside the onclick function:
The issue you are running into is how variables are managed in JavaScript at the time the function is actually run. The click function is not actually run until you click an item and at that time item is pointing to the last item in the array.
EDIT: Check out this TinyMCE Fiddle for how this may happen: http://fiddle.tinymce.com/REfaab/1
I have an issue with the next code block:
run: function(e, row){
var me = this;
var container = Ext.getCmp('centercontainer');
try {
container.removeAll();
} catch(e) { }
// This block is called from another file, I just put it here to show you.
me.panels = [{
xtype: 'tabpanel',
id: 'containertabpanel',
items: [{
itemId: 'package',
title: me.PackageTitle
},{
itemId: 'excursion',
title: me.ExcursionTitle
}]
}];
// Reset
container.setTitle(me.EditDestinationTitle + row.data.name);
container.add(me.panels);
me.tabs = container.getComponent('containertabpanel');
// console.log(Ext.ComponentQuery.query('#containertabpanel > #package'))
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > package': {
mouseover: me.doPackage
}
})
},
Anyone knows how do I get to catch the click event of "package" item of tabpanel component?
I saw when I use just "tab" selector on this.control query, that work, but I can't get only "package" tab component.
Thank you in advance.
In your definition of your tabpanel you can specify -
listeners:{
click:{
fn: function(){
//click handling code goes here
}
}
}
If I understood correctly this is controller code and you are trying to catch an item click on the panel which is one of many in a tabpanel
What you can do is identify your panel by any property that is unique to it via the component query syntax like this: button[myprop=blah]
This syntax will match any buttons on the page with the following config:
{
xtype:'button'
myprop:'blah'
}
In your case you can try tab[itemId=package]
What you also need to be careful about is controller can listening only for events that are fired by the components. Make sure the event you are listening for is fired (check the docs). You can always fire custom events if necessary.
You need to do this
me.control({
// Work with
// 'tab': {
// Doesn't work
'containertabpanel > #package': {
mouseover: me.doPackage
}
})