I have a DataGrid with a search function and I want the Website to automatically refresh the grid with every key pressed in the search bar, just like modern search engines do. Imagine it like Pressing enter after every key pressed, or clicking on the search button. The only way in Mendix to do it is with external Widgets (cant use them cause most of them Arent able to search for related entities in the database) or to use JavaScript Snippets which I did.
I have already tried to programmatically press enter, but I cannot get the Code to do it.
Another Option I tried was to programmatically click the search bar after every key pressed which in itself works but the Problem here was that the selection jumps out of the Input field and onto the search button and there is also no Input in the search field.
Option 1: Programmatically clicking the search button
defining the Elements on the page
var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')
defining the function
function clickSearchButton() {
searchButton.click();
};
triggering the function with every Change in the input
itemsSelect.onkeypress = function(){clickSearchButton};
Option 2: Programmatically hit Enter
It's Pretty much the same Code as above and the way I would prefer it.
I tried many variants but the only Thing I want in the end should look like this:
itemsSelect.onkeypress = function(){*call a function to programmatically press enter*};
I tried Solutions from all over the place for example:
Is it possible to simulate key press events programmatically?
I want to press enter key by programmatically when user do some stuff in js
and many other Sources, some claiming that it is not possible because of security reasons. Is that true?
I'm trying to solve this since around two weeks, with Pretty much no success. Have I overlooked anything, is there another solution that I did not think of? Not using Mendix is not an Option. It's for a huge Project at work.
First, figure out the class and the id of the textfield and the button you are interested in. Usually those start with mx-name- prefix. In this example they are called mx-name-confirmPasswordInput and mx-name-confirmChangePassword.
Then, use the HTML Snippet custom widget to insert this piece of Javascript in your page:
(function() {
document.addEventListener("keydown", function(e) {
if (e.keyCode !== 13) return; // ignore if the pressed key is not 'Enter' key.
var inputField = document.querySelector(".mx-name-confirmPasswordInput input");
var btn = document.querySelector(".mx-name-confirmChangePassword");
if (inputField && btn && document.activeElement === inputField) {
inputField.blur && inputField.blur(); // not necessary any more in 7.22 and up
btn.click();
}
});
})();
That should do the trick!
Related
I have a task where I need to automate Sign in form authentication. For this example, I'll show you Tiktok authentication form (Mobile interface, not desktop. E-mail and password option)
If I enter text values into the fields programmatically, the Login button won't become active, and if I manually focus on the fields with a mouse click, the value disappears. These are two lines of code I run to put the value in:
let email_input = document.getElementsByName("email")[0];
email_input.value = 'sample#email.com';
I understand it needs to trigger a certain event to assign a value into it's JS model, but I can't figure out how to do it. I have tried sending change or input events onto this text field with no luck using this code:
let email_input = document.getElementsByName("email");
email_input[0].value = 'sample#email.com';
custom_event = new Event('input');
email_input[0].dispatchEvent(custom_event);
// tried also change, textInput like so:
custom_event = new Event('change');
email_input[0].dispatchEvent(custom_event);
But this does not seem to help.
So my goal is to put values into both fields Email and Password in the way it will be detected and Log in button would become active.
Any suggestion would be much appreciated
You should first focus needed input element and then execute document.execCommand with insertText command:
let email_input = document.getElementsByName("email");
email_input[0].focus();
document.execCommand('insertText', false, 'sample#email.com');
With this method input\textarea value modification should be captured by all major frameworks including Angular and Vuejs. This modification will be processed by frameworks the same way as if user pressed "Paste" option in browser main menu.
It all depends...
Who/what are you? A normal browser user? A bot? The browser author?
Because code like this is useless...
let email_input = document.getElementsByName("email")[0];
What document are you referring to? Who's document? Did you inject this instruction into the page and executed it?
You're not telling us where you're coming from, but anyway...
If you are the browser author, or you can run JavaScript macros from your browser (ie: the Classic browser) then you can do something like this...
var Z=W.contentWindow.document.querySelectorAll('input[type="password"]');
if(Z.length>0){
Z[0].value='password123';
Z=W.contentWindow.document.querySelectorAll('input[type="email"]');
if(Z.length>0){Z[0].value='email#abc.com';}
}
To automatically populate such fields, and if you also want you can SubmitButtonID.click() the submit button for as long as the isTrusted property is not tested by the website.
Continued...
Test if normal (non-custom) submit button exists and click...
Z=W.contentWindow.document.querySelectorAll('input[type="submit"]');
if(Z.length>0){
if(Z[0].hasAttribute('disabled')){Z[0].removeAttribute('disabled');} <--- Enable it if disabled
Z[0].click(); <--- automate click
}
I have a .pdf document that contains custom links which run Javascript code.
There is no issue with the actual functionality of the working portion of the JS, but I do have one formatting/display problem that I havent been able to solve:
Is it possible to write JS that will alter the appearance of individual links as they are clicked?
I know I can programmatically change the appearance of all links on a page by looping through the doc.getLinks result and applying formatting changes to each element of the getLinks array. But I don't know how to refer to a specific link, as/after it's clicked, either by referencing that link's index location within the getLinks array, or by referring to it by any other name, handle, etc.
I would think that this is probably possible to do, but I'm at a loss.
Thanks in advance for any pointers!
EDIT: One thing to clarify...I can do everything I need to do for a single button. That is, I can manually find the button name, and manually enter the JS code to change the appearance of that particular button. To do this, I need to physically look up the name of the button using a few mouse clicks, and then hard code that button's name in my JS getField command. This requires different code for each and every button.
Is it possible to accomplish the same function using the same code for each and every button?
My ultimate objective is to be able to reproduce this function on a series of .pdf files that will, jointly, have thousands of individual buttons. So any manual component of this process will make implementation impractical.
I should have originally phrased the question in terms of, is it possible to write JS code that can automatically detect the name of the button which is calling the code? (ie, how would I implement a self-referential feature for a generic button?)
As wished by the OP…
When a script should refer to the field on which it is running, the field object to use is event.target.
An example:
You have a button which, when clicked, should change the width of the border between 1 and 3. The mouseUp event would containt this piece of code:
if (event.target.lineWidth == 1) {
event.target.lineWidth = 3 ;
} else {
event.target.lineWidth = 1 ;
}
Or another example: when the number in the calculated text field is negative, it should be in red, otherwise in black:
In the Format event of that field, you would add:
if (event.value*1 < 0) {
event.target.textColor = color.red ;
} else {
event.target.textColor = color.black ;
}
And that should give an idea on how to use event.target.
I am trying to figure out how to do something but can not figure out the correct terminology to do so.
What I am trying to do is have a textbox (#price) that when clicked once it will open up a pdf calculator that will then either prefill the textbox when completed or will then allow the user to enter the amount in. But I also want this to work if the textbox is "tabbed" over to also instead of the onClick. (Maybe onBlur) Basically anytime that textbox is used I need it to work like that. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?
What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.
Does anyone have any suggestions or pointers in how I can achieve this goal?
1. A textbox (#price) that when click once it will open up a pdf calculator
Use jQuery's click() handler or bind("click", ...)
var $price = $("#price");
$price.click(function() {
$("#pdf_calculator").fadeIn();
});
2. But I also want this to work if the textbox is "tabbed" over to also
Use the focus event to know when an input is active (i.e, has been "tabbed" to). Alternatively, the blur event can be used if you want to know when a user is "leaving" the input field. ('blur' is the opposite of 'focus')
$price.on("focus click", function() {
$("#pdf_calculator").fadeIn();
});
3. But how do I make the onClick know when the amount is ok to be entered or if the calculator needs to open?
Grab the amount typed in by the user, convert it to a numerical value, then perform your validation steps.
$price.on("focus click", function() {
// Do some validation checking on the amount entered.
var enteredValue = parseFloat($price.val());
if (!isNaN(enteredValue) && enteredValue > 0) {
$("#pdf_calculator").fadeIn();
}
});
4. What also makes this tricky is I need to have an On/Off switch basically a checkbox that when checked it allows that pop up pdf calculator and when its not checked it just ignores it and allows the price to be entered still.
Simply check that the checkbox is checked using jQuery's is(":checked") then combine the steps above, and your fully working code looks like this:
var $price = $("#price");
$price.on("focus click blur", function() {
// your checkbox element
var checkbox = $("#show_calculator");
// Check if the checkbox is checked
if (checkbox.is(":checked")) {
// convert the entered string to a number
// then validate it according to your needs
var enteredValue = parseFloat($price.val());
if (!isNaN(enteredValue) && enteredValue > 0) {
// if all conditions are met,
// show the pdf calculator
$("#pdf_calculator").fadeIn();
}
}
});
Click here to review a working jsfiddle of these ideas.
As for the pdf form (and getting values in and out again of a pdf form) there isn't a straight-forward method that doesn't involve a 'hack' (that may or may not work across different browsers). If the pdf only has ONE input, then you can capture the keyboard events on your form popup, and send them back to the HTML form (which is an ugly hack), but if this were my project, I would just convert the pdf functionality to javascript, and then you have all the freedom you need, and your calculator is 100% compatible with the rest of your application.
Hope this helps!
The event(s) you are looking for is onFocus and onBlur. I would bind a function to the onFocus event that first checks if the corresponding checkbox has a "true" (or "checked") value, then continue if it does and do nothin if it doesn't.
I'd create an example in jsfiddle for you if I wasn't answering this from my phone.
Bind event handler to focus event (blur is for when control looses focus).
$("#price").on({
"focus": eventHandler
})
Then in your eventHandler() check if calculator needs to be invoked, by checking if it's already opened: $("#calculatorDiv").is(":visible"), and checking if your checkbox is 'checked': $("#checkboxId").is(':checked'), and depending on that open it.
I'm currently trying to change the default behaviour of a multiselect element, so that a user can select and deselect multiple values, without having to press the Ctrl key all the while.
I found a simple solution here, but this does not work in ie8 (because in ie, the onmousedown does not apply to option elements).
But I figured, that one could just simulate a pressed control key, whenever the mouse hovers over a multiselect:
$(document).ready(function() {
$('select').hover(function(e) {
var kde = jQuery.Event("keydown");
kde.ctrlKey = true; //something like this
kde.keyCode = 17; //or this - i don't know
$(e.target).trigger(kde);
});
});
Why does this not work?
Is the Ctrl key directly being released again?
Is something wrong with the code?
Am I missing something else entirely?
You can't simulate such events by programmatically pushing keyboard buttons, just like you can't produce a capital A by simulating the shift key while the user pushes the a key on their keyboard. Besides, even if it would work it wouldn't work: on Macs you press cmd, not ctrl, to select multiple elements.
So unfortunately you'll have to drop this approach and look for other options.
You probably need to add a check box for each of your items, rather than a multi select control.
It is easier in code to write functions which uncheck the others when a new one is selected than to prevent this default behaviour.
I'm making a grid control in HTML/JS and I'd like it to behave as much as possible like Excel. I've got most of the navigation and editing done already but there's one thing I can't figure out and everything I've found online didn't work in my case.
First I'm going to explain a bit how I've implemented it:
I've made the grid using a table and inserted a textbox in each td. The textboxes do not get the focus unless you double click in the cell (much like in Excel). In other words, clicking a cell simply select it and you can edit it by double clicking. You can navigate around by using the arrow keys, this was done by attaching a keypress event handler on the document.
Now, when a cell is selected, I'd like to be able to start editing it simply by typing. To do this, I added some code in my event handler that controls the navigation that checks if the user is typing visible characters (e.charCode != 0) and set the focus in the textbox of the selected cell. That works fine except that the first character the user types isn't received by the textbox. Apparently .trigger is the way to go; here's what I've tried so far
self.editCell.trigger(jQuery.Event('keypress', {which: e.charCode}));
I tried passing more parameters like keyCode, charCode... etc without success.
So what would be the best way to pass the keystroke to the input control?
The only behavior that you are changing is that you want to navigate between other cells with the arrow keys, correct?
Instead of whitelisting actions, why don't you just let the native code handle the heavy lifting and only detect the usage of the arrow keys?
something like:
function cellKeyDown(e) {
if (e.keyCode > 36 && e.keyCode < 40) {
// select a new cell
}
}