keithstric.com :: Here we go again....

Here we go again....

OK, here we go again. It seems that the onClick event of a link is again firing at page load. Here's what I'm attempting to do. I've got a link with an onClick event that builds a dojo._Calendar widget and displays it on the page. When a date is selected we hide the widget and set a sessionScope variable. The widget has an event defined for onValueSelected that runs when a date is selected within the widget. Now, we're wanting to change a sessionScope variable when a new date is selected within the widget and then reload the page so that the new date is used to build the month/day/week calendars talked about in the SnTT series on building a functional XPages calendar. Now I think this is running at page load time because:

The sessionScope.dispDate variable is changing to December 1, 0001 on page load instead of retaining today's date.
The date at the top of the page which resides over the field is keeping the proper sessionScope variable value.
Everything below the field is built using the date value from the field.

I believe the December 1, 0001 date is being set because I'm using the value returned from a selection made within the dojo._Calendar widget. At page load there is no value being returned, so it's just picking the December 1, 0001 date for whatever reason. Now, last time I complained of onClick/PageLoad weirdness, it turns out it was my own fault, which I suspect may be the case here, but I find it odd that I encounter all this weirdness within link\onClick events.

So, to ensure I'm not crazy I'm posting the code below. The part of this that making me think this is running at page load is the onValueSelected part. I'm thinking maybe I can just put code here but for some reason it seems I read that it's expecting a reference to a function, which may be causing this behavior:
This is the link's onClick event:
//Get the coordinates of the selectCalView div which stretches the // entire width of the screen and holds everything for this custom // control. We get the width and then divide the width by 2 // to determine where to place the dijit on the screen var datePickerLinkID = '#{javascript:getClientId("selectCalView");}'; var dispCalLink = dojo.coords(dojo.byId(datePickerLinkID)); var curStyle = dojo.style(dojo.byId("displayCal"),"display"); if (curStyle != "none") { dojo.style(dojo.byId("displayCal"),"display","none"); }else{ dojo.style(dojo.byId("displayCal"),"display","inline-block"); //Get the current sessionScope.dispDate so we can set the date on the // widget to that date upon display. This way we know if the date // changes var dispdateYr = '#{javascript:sessionScope.dispDate.getFullYear();}'; var dispdateMo = '#{javascript:sessionScope.dispDate.getMonth();}'; var dispdateDt = '#{javascript:sessionScope.dispDate.getDate();}'; //Now create the dijit and set some of the parameters and what // to do when a new value is selected. We don't use onChange because // that seems to fire when the dijit is displayed so we use // onValueSelected instead. The last statement places this widget // as a child of the "dispCal" DOM Node var calDijit = new dijit._Calendar({ onValueSelected:function(val){ var fieldDate = new Date(dojo.query("[id$='DispDate']")[0].value); var fieldDateMo = fieldDate.getMonth(); var fieldDateYr = fieldDate.getFullYear(); var fieldDateDt = fieldDate.getDate(); var valMo = val.getMonth(); var valYr = val.getFullYear(); var valDt = val.getDate(); var fieldFullDate = fieldDateMo + "/" + fieldDateDt + "/" + fieldDateYr; var valFullDate = valMo + "/" + valDt + "/" + valYr; var dispFullDate = dispdateMo + "/" + dispdateDt + "/" + dispdateYr; if (valFullDate != fieldFullDate && valFullDate != dispFullDate) { //alert("valFullDate=" + valFullDate + "\n" + "fieldFullDate=" + fieldFullDate + "\n" + "dispFullDate=" + dispFullDate); dojo.query("[id$='DispDate']")[0].value = val; var dateSent = '#{javascript:setSessScope("dispDate","DispDate","date",true);}'; alert(dateSent); dojo.style(dojo.byId("displayCal"),"display","none"); } }, style:{ "display":"inline-block", "position":"absolute", "z-index":"10", "margin-top":"3px", "top":dispCalLink.h + "px", "left":(dispCalLink.w/2) + "px" } }, dojo.byId("displayCal")); //Set the date the dijit diplays calDijit.setValue(new Date(dispdateYr,dispdateMo,dispdateDt)); //Display the dijit dojo.byId("displayCal").appendChild(calDijit.domNode); }

This is the function setSessScope() which is used only for setting sessionScope variables from client side JavaScript. This function is contained within a Server Side JavaScript library. Of note here, the context.reloadPage() call doesn't work when the function is called via the onClick event, but seems to work when called during Page Load:
function setSessScope(key,fieldName,fieldType,refreshPage) { var returnVal = "false"; var fieldVal; if (fieldType == "date") { var dateVal = new Array(); fieldVal = new Date(getComponent(fieldName).getValue()); dateVal[0] = fieldVal.getMonth(); dateVal[1] = fieldVal.getDate(); dateVal[2] = fieldVal.getFullYear(); if (sessionScope.put(key, new Date(dateVal[2],dateVal[0],dateVal[1]))){ returnVal = "true"; } }else if (fieldType == "boolean") { fieldVal = getComponent(fieldName).getValue(); if (fieldVal == "Yes" || fieldVal == "yes" || fieldVal == "True" || fieldVal == "true") { if (sessionScope.put(key,true)) { returnVal = "true"; } }else{ if (sessionScope.put(key,false)) { returnVal = "true"; } } }else{ fieldVal = getComponent(fieldName).getValue(); if (sessionScope.put(key,fieldVal)) { returnVal = "true"; } } if (refreshPage == true) { context.reloadPage(); } return returnVal; }

Now, I understand that this whole exercise is really an exercise in futility as surely IBM will release calendar support in XPages at some point in time, but I've learned a lot from members of the community about XPages and just building this entire app as a whole. It incorporates using Client Side JavaScript to manipulate the DOM and interacting with Server Side JavaScript. It uses Dojo pretty extensively, scoped variables, property definitions, plus a whole array of other techniques which I've scraped from various parts of the Yellow Verse. And maybe, just maybe been helpful to other folks who need a calendar of some type right now, at least I hope it's been helpful.

So that's it. Hopefully someone will enlighten me on the intricacies of the onClick event and reassure me it's my fault and not the product's.

Comments

ID: 1
Date: 03/30/2010 01:56:28 PM
Name: Jeremy Hodge
Website: http://www.hodgebloge.com

Keith, curious to know, have you installed firebug? If you use firefox, install firebug, and then put as the first line in the event that is supposed to run as an onclick the following:

console.log('I got clicked!');

then you'll be able to see in the console whether or not the event is getting executed.

ID: 2
Date: 03/30/2010 01:56:39 PM
Name: Sean Cull
Website: http://www.seancull.co.uk

My simple question is should I edit the code in the event panel or the "all properties panel" ?

I understand that there is a bug but putting the bug to one side should you be able to edit in both or are they different ?

I have now seen buttons and links that contain different versions code in those two properties.

ID: 3
Date: 03/30/2010 03:16:33 PM
Name: Keith Strickland
Website: http://www.keithstric.com

@1 - OK, I do have firebug installed and I added the line you suggested. It seems the onClick code isn't being called at page load. However, the code in the onClick event, if I remove the call to the function that changes the sessionScope variable, the date is set as it should be. Kind-of weird.

@2 - In my brief experience you shouldn't use the "All Properties" panel to edit events. It makes weird things happen. However, in my opinion, you should be able to edit it in either place with the same results and if you aren't meant to edit it in a particular place you shouldn't be able to. But that's just my opinion and the more I mess with this stuff the more I realize that I don't know or understand.

ID: 4
Date: 04/09/2010 02:25:04 AM
Name: Terry Boyd
Website: http://www.saxonsystems.com.au

Hi Keith,

First of all, thanks very much for publishing your code - It's been extremely helpful.

I wonder if you have had any luck unraveling the mysteries behind this issue? I am having a very similar problem, and cannot understand why it is occurring.

I have a repeat control that displays a list of items in a cart-like interface. When the visitor clicks a button next to any one item, a dojo dialog box is displayed to collect the number of items the visitor would like to order.

Upon closing that dialog box, I would like to save the quantity entered in a sessionScope variable. Funny thing is, that variable is set as soon as I load the page and I cannot change the variable value with anything that refreshes the page (because refreshing the page resets the variable value, the same as when the page is loaded).

It's almost like the call to set the sessionScope variable is compiled with the page, and any subsequent calls to the function are irrelevant.

If you find an answer to this, I'd sure appreciate it if you could let us know. This one is driving me nuts!!

In essence, I am storing a shopping cart in sessionScope variables (as explained here: { Link } If anyone has an alternative method of setting sessionScope variables with client-side script, I'd sure like to hear how to do it!

Thanks again Keith,

T.

ID: 5
Date: 04/09/2010 09:52:12 AM
Name: Keith Strickland
Website: http://www.keithstric.com

Terry,

While working with Jeremy Hodge (Thanks Jeremy!) it was explained to me that code such as:

var something = '#{javascript:sessionScope.var = "value";}'

will run at render time (if I'm remembering correctly, been super busy lately and haven't been messing with XPages as much).

I tracked down the chat I had with Jeremy and here is an excerpt (I hope you don't mind Jeremy):

5:46:34 PM Jeremy Hodge: Ahh, ok ... there's the problem ... the SSJS embedded in Client-side javascript actually executes when the page is rendered, and its results are inserted into the script at the position of the ${javascript: } or #{javascript: } ..
5:46:48 PM Keith Strickland: oh
5:47:52 PM Jeremy Hodge: yeah, a bit confusing I know ... but basically anything in SSJS happens at time of render to produce output ...

I think I got around that, I made a function in a SSJS script library (you can call function from a SSJS script library from client side javascript, just add it as a resource). The problem is it still calls that function at render time, but you can put logic in the function to determine if it needs to be executed at that time.

I know this probably isn't the answer you're looking for, but it's where I'm currently at with this whole thing, so I hope it helps some.

ID: 6
Date: 04/14/2010 09:23:34 AM
Name: Sudatta
Website: http://null

Hi,

I'm using a client side javascript library in my xpage which has the below code,trying to execute this using dojo onClick event:
var something = '#{javascript::@DbName();}' ;

alert(something );

However, it does not give me the database name returns a string "#{javascript:@DbName();}"

Please suggest something on this.

Thanks a lot in advance for the help.

ID: 7
Date: 04/14/2010 10:14:59 AM
Name: Keith Strickland
Website: http://www.keithstric.com

Hi Sudatta,

SSJS will not execute in a client side javascript library. That's something else Jeremy showed me. You could pass the value of @DbName() as a parameter to the function that's in your library.

Keith