http://coldfusion.com logo
#cfml-general
Title
# cfml-general
d

Dave Merrill

03/25/2022, 7:33 PM
Javascript question. I want to trigger the onclick handler of an element, without the normal effects of that click, for instance toggling a checkbox. I want its onclick to run, while the checkbox stays in the state it was in. I tried this:
document.getElementById('incidentsourceid_12').dispatchEvent(new Event('click'));
But that doesn't run the handler (or toggle the checkbox, which is fine). This does work, but eval is more or less against my religion:
eval(document.getElementById('incidentsourceid_12').getAttribute('onclick'));
Related, is there a general js Slack channel?
p

Patrick S

03/25/2022, 7:41 PM
I'm sure there are separate JavaScript orientated Slacks, but there is a dedicated JavaScript channel here too, FYI
d

Daniel Mejia

03/25/2022, 7:42 PM
what if you just add click handler to a paragraph or span or div? so you don't have to worry about the events triggered from a checkbox or <a>
I don't understand why you want to use a checkbox and then try to prevent it from doing what its suppose to do.
a

Adam Cameron

03/25/2022, 7:48 PM

https://i2.paste.pics/ec0298501f33eda7bc2deb0471c63136.png

d

Dave Merrill

03/25/2022, 7:52 PM
Thanks for jumping in Daniel and Adam. Let me pan back a bit to the actual thing I'm trying to solve. This form has a lot of dynamically shown and hidden elements -- choose Other, the Other field shows, that sort of thing. All that works as expected when you check or uncheck a checkbox, change a select or radio, etc, because there are onclick="showHideStuff()" attributes in the code. The issue is how to set the UI state correctly when the page is first displayed. The radios/checkboxes/selects get set by cf as per usual, but I'm trying to NOT duplicate the specific show-hide logic to apply display:none or block in cf. Make sense? I feel like this is problem that should have a known solution.
a

Adam Cameron

03/25/2022, 8:01 PM
If
showHideStuff
is what works as a click event handler to do the needful, why don't you just call
showHideStuff
?
d

Dave Merrill

03/25/2022, 8:35 PM
W e l l . . .
showHideStuff()
is really more like this:
"multi_ifothershowhide('transportedid', 1, 'transportedbyid,transportdestinationid');multi_ifothershowhide('transportedid', 2, 'transportedwhynotid');"
The closest I've come so far to running that without repeating it, and doing the same for all the other similar fields on the page, is the eval(getAttribute('onclick')) version. The code knows which fields I'm concerned with, so I just wrote a function to get the onclick and run it, I just don't love it. How are you folks handling this sort of thing?
d

Daniel Mejia

03/25/2022, 8:38 PM
I too have a legacy app with CF logic wrapped around form elements and yes I do have similar logic on the JS side and CF side which is needed when you want to use the same html form views for the create and update forms. How do I do new forms? well, the reactive forms way in Angular 🙂 Here is an idea, but would take some refactoring. Have a method that sets the state and values for all elements in the form. this method accepts a configuration object. Now you just need to build the configuration object the CF way. Then on server render you'd have something like
Copy code
<cfoutput><script>setInitialState(#serializeJson(FormConfiguration)#);</script>
the javascript method
setInitialState()
takes that object and calls all your inner show/hide methods.
d

David Buck

03/25/2022, 8:41 PM
Try this:
myForm.myInputElement.onclick()
, replacing
myForm
with the value of the
name
attribute of your form element, and
myInputElement
with the value of the name attribute of the input element whose onclick functions you want to run.
d

Dave Merrill

03/25/2022, 9:05 PM
@Daniel Mejia I hear you about generating the whole form in js, but not today. @David Buck well plork me, someElement.onclick() or onchange() seems to work fine. So I ended up so far with this:
Copy code
if (changingField.tagName === 'SELECT')
	changingField.onchange();
else
	changingField.onclick();
Just goes to show, asking dumb questions helps!
d

David Buck

03/25/2022, 9:37 PM
Dumb questions are the only kind I'm qualified to answer 😉 . There is one caveat with this approach: if the elements have any event handlers that were added the "proper" way, via
element.addEventListener()
, those event handlers won't execute.
d

Dave Merrill

03/25/2022, 9:39 PM
understood, but not an issue 🙂
4 Views