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

Rows per page selection: Part 1

By
I was asked to create a control that would allow users to select the number of rows per page in a view/repeat control (the application uses both). It seemed simple at first, but I ran into a few issues that I thought I'd share the solutions to. First, lets start at the beginning. I went through the relevant design elements and set row="#{viewScope.tableRows}" , and I created an xp:comboBox with value="#{viewScope.tableRows}" and added items for 20, 30, 50, and 100, and I assigned it an onChange event handler that did a partial execution and partial refresh of a div containing the combo box, pager and the table. Then I started fixing all the problems. Problem 1: The combobox value was a string, but the rows parameter requires an integer. This was causing IllegalArgumentException / java.lang.String incompatible with java.lang.Integer. I added a NumberConverter, but this only slightly changed the exception message to java.lang.Long incompatible with java.lang....
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