I'm trying to set up a click listener on the marked input element in the screenshot wit GTM. When I click on it in the preview & debug mode it only returns gtm.element:object HTMLInputElemtent. Also form listener doesn't work for this element. Since there is no id, class etc. I have no clue how to deal with that.
Does anyone know how I can access this element and set it as as trigger on click.
Related
I have a table in which the last column of each row holds a Button that is intended to trigger a popup to "edit and save" certain values of that row in my React app. Part of the criteria was that clicking outside the popup would also close it while preventing the user from clicking things in the background until the popup closed.
To do this, I opted to use a package called reactjs-popup. Currently for all criteria, it works perfectly. The next step, though, was to run a function when the button is clicked so that I could pull data from the API to populate the fields. However, I found that I couldn't call any functions from the onClick of the button used as a trigger. This is the main snippet of code:
import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
trigger = {
<Button onClick = {() => { loadInfo() }}
}
modal
nested
>
{ close => (
<div className = "modal1" id = "popupForm">
// popup content with input forms with values to be populated
</div>
}
</Popup>
The main problem I have is the "onClick" part of the Button in the trigger. No matter what I put in there, it is never ran when I click it. When I test the same button as a standalone, and not as the trigger for the popup, it works fine.
I also tried using
onClick = {loadData()}
But this just caused the function to constantly run as soon as it was rendered, and inevitable break due to too many renders. Does anyone know why this reactjs-popup component does not allow onClick within its trigger? And if so, how to get around it? Thanks!
I believe you want to loadInfo when the popup opens.
For that, there is a prop onOpen in Popup which accepts a function . You can use that,
Or you can manually set open prop using state. Have a button outside popup and update the open state when it clicked.
I have a primefaces autocomplete element which works great except one thig. The problem is that when I enter a valid text (which is mappable to the data behind) but I don't select the element from the propositions, and don't press tab or enter, nothing happens.
So I enter a value and click into another field, the element is not selected and the validation fails. However, I don't want the user to force to explicitly select an item.
My ideas were, that i put an onchange listener to the input element and trigger the primefaces itemSelect event within. But I don't know how to do that, if it's even possible.
Or maybe there are other solutions?
Thanks in advance!
I found a way, although it might not be the most beautiful and easy one.
Maybe it helps somebody...
This is a specific solution for primefaces (5.3), but it should work for other versions too.
$('#form\\:txtAutoComplete_input').val('Foo');
$('#form\\:txtAutoComplete_input').trigger('keydown');
$('#form\\:txtAutoComplete_input').trigger('input');
$('#form\\:txtAutoComplete_panel .ui-autocomplete-item').trigger('click');
For some reason, after the value is entered into the input field, you have to trigger the keydown and the input event in that order. After these events the autocomplete list shows with the matching values. There you have to trigger click on a certain element, so all the backing bean stuff is properly executed.
There is an API for Primefaces widgets.
For instance ;
<p:autoComplete id="gtautoaomplet" value="#{item.soemprop}" completeMethod="#{bean_CrossCheckNew.completeText}" scrollHeight="250"/>
In JS code ;
widget_form_mapingGrid_0_gtautoaomplet.search('foo');
When you write "PrimeFaces.widgets" in your browser console you can see all the widgets available in your page.
For more datail :
https://primefaces.github.io/primefaces/jsdocs/index.html
Good luck.
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"
Working in both A2003 & A2007.
How do we ensure that a selected TextBox gets the focus when the form loads? If we put MyTextBox.SetFocus in the Form_Load then we get the error:
can't move the focus to the control
This form is designed for rapid data entry, and the form somewhat rearranges itself based on the last used settings. So there are several different textboxes any of which may need the focus depending on the user. We can't just fix it in design time by giving MyTextBox TabIndex=0.
The help says something about calling Repaint which just doesn't make any sense at all:
You can move the focus only to a
visible control or form. A form and
controls on a form aren't visible
until the form's Load event has
finished. Therefore, if you use the
SetFocus method in a form's Load event
to move the focus to that form, you
must use the Repaint method before the
SetFocus method.
The best bet in this case, is to ensure that the textbox to get focus is numbered 0 in the Tab Index property.
You cant set the focus as the controls don’t really exist yet, try putting the code in the OnActivate event instead
Or just put a DoCmd.Repaint in the OnLoad event before trying to set the focus. Both should work but I'm not near a computer to check
In my experience, I've always gotten that error when the control I was trying to set focus to was either 1)not visible or 2)not enabled. I assume you've already checked those, but it would be worth double checking at runtime when you get the error message (especially since you said you are shuffling the controls at runtime).
I use the .SetFocus method pretty regularly without trouble. I don't recall ever getting an error message when setting focus to a control that already has it as Remou stated in his answer.
I believe there is also a third case that occurs if you try to set focus to a control in the form header/footer of a bound form that has had all of its records filtered out. I know that situation causes "disappearing" contents in an unbound combo box, but I think it may also play havoc with the SetFocus method. If you are opening the form in Data Entry mode, though, that should not be an issue.
Move SetFocus to the form's On Current event. Should work then unless perhaps the form's record source contains no records and you've set the form's Allow Additions property to No. In that case your text box will not be available to SetFocus on, but in my testing it doesn't throw an error.
I have a method called checkKeyCode(obj) which simply takes the character you type into a textbox and replaces it with its keyCode.
This method is called from onkeydown attribute of textbox input (onkeydown="return checkKeyCode(this)").
The problem is then I want to be able to press tab and focus to the next element. I don't have to know the element's id or name or tag. Basically I want to combine my method's functionality with the default functionality of browser when you press Tab key (which sets focus to the next element in the form).
Can this be done. If so how?
Any help would be greatly appreciated.
Check the keycode in your handler and if the value is 9, it's a tab. Exit your handler if it is and return false.
Also, don't use the onkeydown event. Use onkeyup instead.