dominoGuru.com

Your Development & Design Resource

Of life, of AJAX, and of things to come

02/03/2006 01:08 PM by Chris Toohey

Things have been busy around casa de Toohey lately, with me contributing content to various online resources, including the first in my series of articles for IntranetJournal.com and a podcast on an upcoming series on convergence device solutions on CIOPodcast.com, with a few items that I've been working on for this site (including an updated release of my CSS Builder), and with several customer deployments of Revolution CRM v1.0 - things have been relatively nonstop lately in my little part of the world.

That's not to say that I don't have some items to bring up that are Domino related, no sir/ma'am/reader! In fact, I have two!

The wonderful world of Ajax!

While working on a project, I ran into an issue - the client wanted checkboxes to display several entries (20-30, if not more), but wanted the selection area to take up only a small section in the UI. This was simple enough, using the following approach:



<div id="selectioncontainer">

<input type="checkbox" name="blah" value="1" />One<br />

<input type="checkbox" name="blah" value="2" />Two<br />

<input type="checkbox" name="blah" value="3" />Three<br />

...

</div>

I wrapped a DIV around my Domino-generated checkboxes. And now that I have my checkboxes... I use the following CSS (I'll remove non-function-specific CSS from the below example):



div#selectioncontainer {
	height: 200px;
	overflow: auto;
}

This gives you a very slick solution: a scrolling section of checkboxes - giving you an alternative to the Ctrl+Click-for-Multi-Select you have with a <select> field type with the multi attribute.

The above worked perfectly, until people would slip and not see that they had an option that was 10 options below the current visual display area selected - resulting in mis-categorization. The proposed solution? A selection preview. And while a good idea, this caused an immediate issue, as I could easily get a handle on the selected value from the checkbox, but not it's correlating label - I needed to display One if One was checked, even though my value was stored as 1.

With the help of Sean Burgess, I was able to successfully implement my first AJAX-based solution.

We started by getting a list of all of the selected values from the checkboxes, then passing the string of values to an agent via the QueryString of the URL to call said agent:


var xmlhttp=false;

/*@cc_on @*/

/*@if (@_jscript_version >= 5)

try {

 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

   } catch (e) {

  try {

   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

   } catch (E) {

  xmlhttp = false;

  }

 }

 @end @*/



 if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {

  xmlhttp = new XMLHttpRequest();

 }



function setpreview(checkboxname, targ) {



var h = document.getElementById(targ);

var x = checkboxname.length;

var t = "";


for (var i=0; i < x; i++) {

 if (checkboxname[i].checked == true) {

  if (t == "") {

   t = checkboxname[i].value;

  } else {

   t = t + "," + checkboxname[i].value;

  }

 }

}



xmlhttp.open("GET", "GetGroupInfo?OpenAgent&gpid=" + escape(t));

xmlhttp.onreadystatechange = function() {

 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

  h.innerHTML = xmlhttp.responseText;

 }

 return true;

 }

xmlhttp.send(null);

}

This will pass a value, for example, of 1,2,3 to the GetGroupInfo agent.

My agent, now parses those values and creates an array - [1][2][3], and feeds this array into an agent that runs a look-up to a view to find it's label (the same view, for this project, that I use to get the checkbox values in the first place). Below, is an excerpt from the agent code:


slist = Split(grp, ",")

Forall x In slist

 Set ludoc = luv.GetDocumentByKey (x)

 If Not (ludoc Is Nothing) Then

   htmltext = htmltext + ludoc.groupname(0) + "<br />"

 End If

End Forall



Print "Content-type: text/plain"

Print "Cache-Control: no-cache"

Print "" + htmltext + ""

VERY important information on the Cache-Control settings can be found here as well as some great information on building a simple AJAX-based @DBLookups.

From the Javascript above, you'll see that I'm expecting my agent to return a text string back to the function, which I will use to set the innerHTML of my target: the Selection Preview section, another DIV that, if 1, 2, and 3 are selected, will read:

One
Two
Three

Pretty simple, very fast, and a very utilitary implementation of AJAX.

File Upload Controls

While implementing Revolution CRM v1.0, I ran into an issue - one that's arguably a limitation in Domino, at least for the developer that doesn't wish to use normal functions to meet certain functionality.

My client, who hosts their website on Cold Fusion, need a Customer registration form on their site. Their former CRM provider, had them build a sign-up sheet in Domino. Due to the fact that they are several companies, which all now want the like functionality but with to maintain their own website's/company's look and function, we had suggested that they build and maintain their registration page on the same technology that the rest of their websites are built on - the form's POST would simply send the information to an agent, wherein we would read the REQUEST_CONTENT session variable and create the Contact document in the correlating companies instance of Addresses (Revolution CRM's contacts database/store).

Like before, everything was going fine until the client requested that we add a File Upload capability to the form(s). Now, in the real world, this would simply be a matter of changing the enctype of the form to multipart/form-data, and add an <input type="file" name="file1" /> to the given form. Sadly, this would not work.

I have a solution or two to address this functionality, but feel that it warrants further investigation before officially declaring it the way to accomplish this sort of thing. I expect to be able to return my findings via an article, which will appear on this site for all those who run into similar situations.

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.