Skip to main content

Quicktip: Elements need IDs to attach client-side events

I ran across something today that took me a few minutes to figure out, so I thought I'd share it.

I was trying to make a column heading toggle the display of the column below when clicked. So I wrote up a quick function like this:


function toggleDivDisplay(divId) {
// call with toggleDivDisplay('#{javascript:getClientId("**XspIdHere**")}');
var div = document.getElementById(divId);
if (div.style.display == "") {
div.style.display = "none";
} else {
div.style.display = "";
}
}


This function was called from the onclick event for the heading Div I had created, and everything worked swimmingly. However when I used the same technique on a different column, it failed. I spent a few minutes making sure the target ID matched what I was sending, and sure enough it did, and I was left scratching my head.

That was when I realized how client-side JS is actually attached: it isn't added to the HTML element itself. A listener is created. And how can a listener listen to something with no ID? I checked, and sure enough the heading Div had been created with no ID at all. So I quickly added id="div1" and voilĂ  - everything worked.

Comments

Popular posts from this blog

Pass data between XPages and existing LS scripts

I'm working on modernizing a fairly hefty application with a lot of existing script libraries which we want to leverage within the XPages environment. Here is a technique that works very well. First, create an in-memory document in SSJS. We can set any input values needed for the back end. Then we pass that document to a LS Agent which can work it's magic using the values set in SSJS and use the same document to return values back to the XPage. Here is how it works in detail:

Quick tip: Convert a number to String in EL

I just had a need to do this and a Google search didn't immediately turn up a solution. So I thought for a couple of minutes and came up with this: value="0#{numberVar}" This takes advantage of the way Java auto-converts objects to strings when doing a concatenation. So if your number is 13, Java EL turns this into new String("0"+13), which becomes "013". You can then strip off the leading zero or just parse the string back into a number.

Project in Review - Part 3: What didn't work

Of course, not everything was an unmitigated success. I tried many things that didn't work out. Much of which I've removed and forgotten about, but a few things remain - either scarred into my psyche or woven too deeply to fix. What didn't work Storing my entire configuration in application.properties Using properties files is great. It let me get configuration out of a profile document and into something much easier to edit - particularly configuration that users will never see or maintain (and thus there is no need for an interface for). But I took it too far. The paths to the other databases are there, and that's good. But view aliases are also there, and that was a mistake. I already have a ViewDefinition enum that describes each view and all the information I need to know about it. I could have set view names there, but instead I'm reading them from the application config. I can change where a view is pointing without having to go into my code. Except of co