Skip to main content

Quicktip: Elements need IDs to attach client-side events

By
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

Post a Comment

Popular posts from this blog

Pass data between XPages and existing LS scripts

By
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:
6 comments
Read more

XPages Application Framework (Part 1?)

By
Note: I changed projects and priorities after my last POI article, resulting in a long hiatus. I anticipate using that framework on my current project and will likely refine and complete my related article series. For the past several months, I've been fortunate enough to lead a project overhaul from traditional Domino Webapp to XPages. I had a few goals in mind, but the top three were integrating Bootstrap, embracing MVC principles, and eliminating all SSJS . I imagine the motivation for Bootstrap integration is self-explanatory. There is an OpenNTF project out there called Bootstrap4XPages. I didn't use that for a number of reasons - the main being a policy in the current environment. But you may ask yourself (if you didn't follow that link), why so much hatred for SSJS? I have a litany of reasons. It impacts readability of the XPage source; it hurts maintainability when logic is scattered across dozens of XPages, custom controls, and script libraries; it mixes log...
Post a Comment
Read more

Quick tip: Convert a number to String in EL

By
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.
Post a Comment
Read more