Programmatically press Enter through JavaScript Code in Mendix through HTML Snippet Widget - Mendix Forum

Programmatically press Enter through JavaScript Code in Mendix through HTML Snippet Widget

0

Goal: DataGrid which updates everytime somebody types into search bar. So with every keypress the DataGrid should update.

What I tried:

I found this piece of Code in another post:

https://forum.mendixcloud.com/link/questions/93149 

in my case the given Code didnt work and I had to make some small changes. My updated Version Looks like this:

//find the datagrid
var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');

//find the select element and search button
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField1')

var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')

//whenver the select option is changed trigger a click on the search

itemsSelect.onchange=function() {
   searchButton.click();

When I run it like this it doesn’t work at all. it does not find the search button. 

I tried different approaches. One of them was to programmatically trigger an Enter press but that also did not work the way it should.

I would have loved to include what I wrote but as I do too often I didnt save any of the versions and so my half working Code ist lost and I cant remember it after this long day. 

 

asked
4 answers
1

The function does work, but this is only triggered on change of the search field.

Using the code below the user enters a character in the search field and when clicking somewhere else the search button is clicked:

var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField2')
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button')
itemsSelect.onchange=function() {
   searchButton.click();
   };

What you are looking for is the keypress function or keydown.

See for examples: https://api.jquery.com/keypress/

Hope this helps in finding a solution for your use case

answered
0

Perhaps it is usefull to take a look at the OnChange Inputbox widget in the appstore. For my own needs I customized it to also listen to keypresses by adding the code below to _setupEvents. This allows you to write some custom code under   _eventKeypress: function(event) {}   

The event parameter is usefull to get the key code of the key that was pressed. 

Code:

this.connect(
                    this.inputBox,
                    "keypress",
                    lang.hitch(this, this._eventKeypress)
                )

answered
0

The issue is caused by the event listener that has already been added by Mendix to the search field.

If you inspect the field and look at the event listeners you’ll see this in chrome:

If you hover over the listener you’ll get the option to remove the listener. After removing the code below will perform like you want.

var dataGrid = document.querySelector('.mx-datagrid.mx-name-grid1');
var itemsSelect = dataGrid.querySelector('.mx-grid-search-input.mx-name-searchField2');
var searchButton = dataGrid.querySelector('.mx-grid-search-controls > button.mx-grid-search-button');
itemsSelect.onkeyup=function() {
   searchButton.click();
   };

You’ll need to find a way to remove the keyup listener from the javascript you’re inserting, I suggest googling for this.

answered
0

I made a little bit of progress since first asking this question but I still could not find a solution. I opened another thread on stackoverflow if you want to take a look at it.

https://stackoverflow.com/questions/55967992/trying-to-trigger-enter-programmatically-in-mendix-with-a-javascript-snippet-wid

thank you to all who take their time to look at it.

answered