Problem

The JavaScript object represented by ‘this’ does not appear to be as expected.

The problem is caused because of the way that XPages adds events to DOM objects through the <xp:eventHandler>

The Situation

I wanted to pass the id from a button to a function. Outside of XPages I would normally acheive this by passing a reference to the button(this) to a function (saySomething in this case) and then extracting the id from the object passed:

function saySomething(obj){
	alert("This is my object - "+this
		+"nnThis is my id - "+
		this.id)
}

Describing 'this' when passed from a button to a function

	<button id="markyButton" onclick="saySomething(this)"></button>

In this case I am passing the “this” object to the function.

this

is an object reference to the DOM element which it was generated from – for some serious stuff on ‘this’ check out this article

http://www.quirksmode.org/js/this.html

XPages fail

However when I add the JavaScript to the XPages button and add the code through the GUI Designer interface

Adding JavaScript through the XPages GUI

I do not get the expected result when I click on the button……

Not what we expected

The Explanation…

The reason this happens is because of the way that XPages assigns events to objects in the webpage. If you have ever looked at the source of an XPages you will almost certainly have seen a whole load code like this at the end of the page

XSP.addOnLoad(function() {
XSP.attachEvent(".....
}

and this is how the XPage adds the event to the object – in the case of this example the XPages creates our button in the HTML but as you can see there is no onclick event initially assigned to it

		<button class="lotusBtn" type="button" name="view:_id1:_id2:_id37:button1" id="view:_id1:_id2:_id37:button1">Click This</button>

and then at the bottom of the web page source code we can see the assignment of the event after during the “addOnLoad” which means after the page has loaded.

<script type="text/javascript">

function view__id1__id2__id37__id40_clientSide_onclick(thisEvent) {
alert("This is my object - "+this+"nnThis is my id - "+this.id)

}

XSP.addOnLoad(function() {
XSP.attachEvent("view:_id1:_id2:_id37:_id40", "view:_id1:_id2:_id37:button1", "onclick", view__id1__id2__id37__id40_clientSide_onclick, false, 2);
});

</script>

What is happening?

The XPage is adding the function “view__id1__id2__id37__id40_clientSide_onclick” to the “onclick” event of the “view:_id1:_id2:_id37:button1″ DOM element (our button in this case).

The nuances of this are subtle but important – the code is not adding “alert(whetever)” to the onclick event it is adding a function call to the onclick event.

So. when the button is clicked the function view__id1__id2__id37__id40_clientSide_onclick executes it’s code and in that situation ‘this’ no longer refers to the button.

The difference is clear when we look at the resulting code side by side

<button value="or Click this" id="button3" onclick='alert("This is my object - "+this+"nnThis is my id - "+this.id)'></button>

or

<button value="or Click this" id="button3" onclick='view__id1__id2__id37__id40_clientSide_onclick()'></button>

“this” is never passed to the view__id1__id2__id37__id40_clientSide_onclick() function and therefore any reference to the button is lost.

When the function executes – “this” refers to the function (which isn’t an object) and therefore we get the window (the webpage) as a failover.

The solution

If you need to do something like this then add the onclick event to the source pane.

Here is the XML markup for the XPages generated event (which fails me)

		<xp:button value="Click This" id="button1">
			<xp:eventHandler event="onclick" submit="false">
				<xp:this.script>
					<![CDATA[alert("This is my object - "+this+"nnThis is my id - "+this.id)]]>
				</xp:this.script>
			</xp:eventHandler>
		</xp:button>

and the XML markup  for the manually added onclick event (which works)

		<xp:button value="or Click this" id="button2"
			onclick='alert("This is my object - "+this+"nnThis is my id - "+this.id)'>
		</xp:button>

The demonstration

Here is a simple demo of the problem and the solution

Recent Blog Posts

195

Someone is having a laugh right? Fri, May 24th 2013 9:17a Mark Roden I got this in my email today – trying to help a friend out See if you can spot scary……….. Role: Lotus Notes Developer Location: CHICAGO, IL Duration: 6+ months Skillet required: Experience using and developing applications for Lotus Notes Version 8 Experience using and developing Domino web applications Knowledge & experience in Lotus Notes Administration processes 5+ Years experience developing Lotus Notes client applications Proficiency with the Lotus Note [read] Keywords: acl administration domino formula language lotus lotusscript notes notes client applications email microsoft security

95

Google Chrome 27 – now with added voice searching Wed, May 22nd 2013 9:04a Mark Roden The new Chrome v27 went live today with a new voice search capability using the HTML5 media capabilities the browser asks to use my microphone and when it does it allows you to speak your query rather than type it. It is similar to the capability which has been in Android Jelly Bean 4.2 for a while now which I find very useful and I am becoming more reliant on it – we still have some accent issue to get over though. Below is a quick video demonstrating that it still has some hurdles to get [read] Keywords: google

212

Writing a single library for SSJS and CSJS validation – failed attempt #1 Sun, May 19th 2013 6:04p Mark Roden In this article I will demonstrate my first futile attempt to consolidate CSJS and SSJS libraries so that we only have to write validation once. I will also discuss JavaScripts Closures which unless you have already encountered them will make your head hurt thinking about it Introduction I was reminded in one of the comments on my blog last week about how it is still a pain in the butt to have to write client side JavaScript validation (to provide a good user interface) and server side JavaScr [read] Keywords: ldd lotus dojo firefox interface javascript password server xml

201

XPages ND9 (Dojo 1.8) does not work with other AMD loaders (and the work around) Tue, May 14th 2013 6:10p Mark Roden Today I took a new jQuery plugin that I was playing with from an R8.5.3 environment where it worked, to an R9 environment and it failed – I figured it had something to do with something I had been reading about over the last month and in fixing my problem this lead to a more serious realization that I KNOW other people are also going to come across. Background A brief scan of the last month’s discussions on Xpages and jQuery Mobile 1.3 reveals a number of posts started by Dave Leedy [read] Keywords: domino ibm notes R8 xpages bug database dojo mobile properties

280

Server-side HTML vs. JS Widgets vs. Single-Page Web Apps – the XPages version Mon, May 13th 2013 8:13p Mark Roden Yesterday I came across this excellent article by Pamela Fox - http://blog.pamelafox.org/2013/05/frontend-architectures-server-side-html.html. In it she goes through how her company uses all three stated architectures, discusses why, and how they are used by the end users. It struck me as fascinating because I feel like we are going through this exact same struggle in the XPages community – what is the best architecture to create applications for our users? I also feel fortunate to have [read] Keywords: domino ibm lotus notes script library xpages ajax application applications community development enterprise interface javascript profile server twitter widget widgets

139

DCLUG – May 23rd – IBM Sametime Deployment – A look at where are we and where should we go Mon, May 13th 2013 11:48a Mark Roden This month we have Maurice Cogdell speaking to us about his recent experiences with Sametime and where it is going in the market. If you are to attend this meeting YOU MUST use the meetup site (listed below) to state you are attending – name badges will be created prior to the meeting as your access. Date 23rd May 2013 Address The meeting will be held at IBM Technical Exploration Center 401 Greensboro Drive, McLean, VA Agenda ————————R [read] Keywords: ibm lotus sametime show and tell community google networking

196

EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer Mon, May 13th 2013 5:29a Mark Roden In this article I will introduce the new EXTJS v4.2 Infinite scroller – the BuffererRenderer. The whole concept of infinite scrolling has been rewritten in the new version of the grid and it had made a huge difference to responsiveness and stability of the infinite grid. EXTJS in XPages series Here are links to all of the previous articles in this series EXTJS in XPages #8 – Selecting data from the grid and opening a document EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent [read] Keywords: xpages ajax application database javascript properties server xml

217

Shorthand Conditional JavaScript variable checking using || Sun, May 5th 2013 6:23p Mark Roden In this article I will highlight a shorthand method of JavaScript conditional variable checking. The || operator is commonly recognized as “OR” but it’s usage is broader than some people would think. You might have occasion to have a variable declaration purposefully override a desired value. In this example the start will be zero unless the start variable has been declared with and assigned value: Long Hand var start /*..bunch o' code..*/ if (!start){ start = 0 } [read] Keywords: javascript

241

jQuery in XPages #19 – Shadow (Add eye catching drop shadows to your page elements) Thu, May 2nd 2013 9:38p Mark Roden In this article I will describe how to implement and use the jQuery shadow plugin to create great looking shadowed panels within your XPages application. Demonstration The XPages integration of shadow is demonstrated here Download The demonstration database can be downloaded from the link above or from here Shadow Introduction “Adapted from Nicholas Gallagher’s CSS drop shadows without images demo “ Adding “depth” to the visual aspect of your website is one of tho [read] Keywords: xpages application css database dojo firefox integration interface widget

240

JavaScript variable hoisting Wed, May 1st 2013 8:16p Mark Roden In this article I will give a quick overview of JavaScript hoisting and explain why sometimes your variables are not doing what you expect them to. In the following example we have a very simple variable declaration and function: var msg = "hello world" function sayHi(){ alert(msg) } sayHi() If you run this through firebug you get the expected message in the browser However if you change the code slightly you do not get the initially expected response. When you run the following code [read] Keywords: javascript