I am trying to implement an autocomplete input by using mdc web components. I have a menu selected event listener, where I want to deactivate focus on a textfield. I have tried that by using MDCTextFieldFoundation deactivateFocus method:
const inputFoundation = new MDCTextFieldFoundation(
document.querySelector(".mdc-text-field")
);
menu.listen("MDCMenu:selected", e => {
console.log(inputFoundation);
input.value = e.detail.item.dataset.value;
inputFoundation.deactivateFocus();
});
But, that is not working. In the console, I can also see that input's property isFocused is false, when textfield is still focused. You can see the whole codesandbox here. What am I doing wrong here and what is the correct way of deactivating focus from a textfield?
From docs:
Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
So deactivateFocus updates the state of the component, but it doesn't change focus.
You need to call blur yourself. For example like this:
document.activeElement.blur()
Related
I would like some advice on how to specify the element for certain event handler. I'm trying to change the color on a paragraph when I click on it but it change the color regardless of where I click on the browser.
function onmouseA(){
document.getElementById("test").style.color = "#C5D9FF";
}
document.onmousedown = onmouseA;
I actually did specify the with the id="test", but it doesn't work properly, need some advice, thanks.
I hav TabBar app using Nativescript Angular. I want to change the Action Bar buttons based on the selected tab.
I just follow this tutorial https://www.youtube.com/watch?v=7go3L70QfIQ
But, don't know how to use TabView.selectedIndexChangedEvent in Angular.
If anyone has done this, please share the piece of code.
Thanks
Use this example as a reference on how to use the selectedIndexChange event in Angular based application.
For example:
<TabView selectedIndex="0" (selectedIndexChange)="onIndexChanged($event)">
<!-- more code follows here -->
And then in the component file use the onIndexChanged callback
public onIndexChanged(args) {
let tabView = <TabView>args.object;
console.log("Selected index changed! New inxed: " + tabView.selectedIndex);
}
I solve the issue using rxjs/Observable notifications. Logic is post a notification when the tab changes happen. Based on the tab index, I can decide the action bar button tap event methods.
// send notify to child components
let message = {
"tabIndex" : this.tabIndex,
"tappedButton" : "someButton"
};
this.notifyService.send(JSON.stringify(message));
I've been trying to implement what's been asked in this Stack Overflow question, here:
Calculation for status in Archer GRC based on date
Trying to create a status field based on a number of Value Lists that
users select from, but a request has been made that we check a date
field for a value to ensure an estimated date has been set so that the
calculation can determine if the status of the record is "In
Progress", "Late" or "Not Started".
...and now, I have a requirement for an actual popup warning message of some sort to prompt the user to make sure the date field is not blank.
How would I add this functionality?
In order to deliver the functionality you are looking for you have to use a "Custom Object". It is an object you put on the layout of the application in Archer that contains JavaScript code. This code will be executed as soon as the form of the application is loaded. There is a special type of the field "Custom Object" available in the Layout editor for each application in the Application Builder in Archer.
Note - I don't recommend to use custom objects in general and neither RSA Support. Every time you modify the layout in the given application, you have retest and sometimes correct IDs for your custom object. You can write an ID independent custom object and use field names, but in this case custom object will have more code. I prefer to make custom objects as short as possible.
Your custom object should do the following:
Override the behavior of the "Save" and "Apply" button in the top tool bar available for every application form in Archer.
Once "Save" and "Apply" buttons are "overwritten", every time they are clicked on your function will be called. So you need to create a click handler function.
Your click handler function will check values user is required to populate and will either return warning, or will call the original handler for "Save/Apply" buttons.
This is a code template you can start with:
<script type="text/javascript">
// ids are used to locate buttons
var buttons_ids = [
"master_btnSave", // "Save" button ID
"master_btnApply" // "Apply" button ID
];
// parameters are used in the "onclick" default handlers to call original handlers
var buttons_parameters = [
"master$btnSave", // "Save" parameter
"master$btnApply" // "Apply" parameter
];
document.getElementById(buttons_ids[0]).onclick = function(){ Validator_of_required_fields(buttons_parameters[0])};
document.getElementById(buttons_ids[1]).onclick = function(){ Validator_of_required_fields(buttons_parameters[1])};
// end of the script body
//==== Validator function attached to Save and Apply buttons
function Validator_of_required_fields(parameter){
// ids of the input fields to validate
var inputs_to_validate_ip_address = [ "master_DefaultContent_rts_XXX_YYY_t" ];
// jQuery selector is used here. Archer v5.x has jQuery library loaded by default
// you will need to modify this selector
var field_value = $('#'+inputs_to_validate_ip_address[0]+':first').val();
if(field_value.length = 0) {
// Here you are calling Archer Warning function
var msg = "[Text to display to user]";
var title = 'Required Field';
WarningAlert(msg,title);
return false;
};
// default onclick processor
ShowAnimationAndPostback(parameter);
return false;
};
Some comments on this code:
You will need to modify the validation function to work with values stored in the fields you need.
I used a rather 'unusual' way to override the behavior of the "Save" and "Apply" buttons using the following code:
document.getElementById(buttons_ids[0]).onclick = function(){ bla, bla, bla }There are simpler way to do the same, but this way custom object works fine in IE8-11, FF, Chrome and Opera. Let me know if you find a simpler way to override buttons that is browser agnostic.
Function WarningAlert(msg,title); is a build-in Archer warning message function. It worked fine in Archer v5.4. You might need to use simple JavaScript Alert function if WarningAlert doesn't work in your version of Archer.
Note that behavior of the "Save" and "Apply" buttons might be overwritten back to default in case if user opens up any pop-up dialog windows to populate a value list or cross-reference field. If that is the case, you will have to wrap the code provided into another function and attach it to the OnLoadWindow event (or similar).
I try to avoid using any JavaScript libraries in my custom objects. This way it is simpler to support them and you have less dependencies. I used jQuery in the provided example only because Archer already uses this library once the page is loaded.
Flak, make sure to test your custom object very well and good luck!
Does anyone know how to catch the 'scroll' event in CKEDITOR? there is easy to identify change and other events, but I am unable to cathc Scroll event..
CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
but when want to use same for scroll it does not working
CKEDITOR.instances[i].on('scroll', function() {alert('I am scrolling!');});
does anyone know some workaround?
Thx a lot
M
First thing you need to know is that CKEditor's instance (which you get from CKEDITOR.instances object) is not a DOM element. It indeed fires some events like change, focus, blur, or save, but they are just short cuts or facades to more complex things.
Therefore, if you want to add a DOM event listener, then you need to retrieve the "editable" element (an element in which editing happens). It can be accessed by the editor.editable() method. However, the tricky thing about editable element is that it's not always available, it's not ready right after starting editor initialization and that editor may replace this element with a new one (usually after switching between modes). Therefore, editor fires a contentDom to notify that the new editable is available and the editable has an attachListener method which, unlike the on cleans the listener when editable is destroyed.
The way to use all those methods is explained in the documentation and there are code samples, but just to save you one click:
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editable.getDocument(), 'scroll', function() {
console.log( 'Editable has been scrolled' );
});
});
Update: I forgot that for 'scroll' event you have to listen on document. I updated the code above.
So I have created a context box upon right click that has Add/Edit/Delete Rows. I also have a bunch of code launched before the Dialog is shown. My problem is that when I use the context menu it doesn't go through some of the code. I have tried to call on the functions directly but it doesn't format correctly.
I am mainly concerned with the edit button, here is the code I am using to bring up the edit Dialog
function editRow() {
var grid = jQuery("#<%= Jqgrid1.ClientID %>");
var rowKey = grid.getGridParam("selrow");
if (rowKey) {
// I have tried calling functions here and it still doesn't work
grid.editGridRow(rowKey, grid.editDialogOptions);
}
else {
alert("No rows are selected");
}
}
So if I use this to display the editform it isn't formatted correctly nor does it go through the functions all correctly.
I am using the ASP Webforms version of Jqgrid so I call the function by doing this
<cc1:JQGrid1 ID="Jqgrid1
//other attributes
ClientSideEvents-BeforeEditDialogShown="ChangeMonitor"
//Rest of code />
So this works just fine, and I'm trying to get the Edit button on the context menu to display correctly.
My thought was to use Jquery to trigger a click on the actual Edit button once someone used the context menu. I couldn't find an ID that would work however.
Is there an easy way to connect my context menu Edit button, with the actual Edit button in the toolbar?
Well I found a solution to my problem.
The id field of the button was edit_ct100_cpMainContent_Jqgrid1_top so I just triggered a click with this code.
$("td[id^=edit][id$=top]").trigger("click")
For some reason when I used the _ct100_cpMainContent_Jqgrid1 it wasn't working, but now it does. Hope this helps someone.