OpenNTF.org - AJAX Phone Directory Portlet
    Advanced
   OpenNTF Code Bin
Edit Document Code By Rating > Code Document
About This Code
Brief Description:
AJAX Phone Directory Portlet 
Rating:
Rating: 5 , Number of votes: 1 
Contributor:
Jeff Crossett 
Category:
Javascript, XML/XSL 
Type:
Webdevelopment 
Notes Version:
R6.x 
Last Modified:
15 Sep 2005 
OpenNTF Disclaimer

All of the program code and information presented in the OpenNTF.org Code Bin are provided "as-is", and should be used at your own risk. OpenNTF.org make no express or implied warranty about anything in the Code Bin, and OpenNTF.org will not be responsible or liable for any damage caused by the use or misuse of anything from this site. OpenNTF.org makes no guarantees about anything. Please thoroughly test all of the knowledge and code you find here before you attempt to use them in your production environment.

Code / Description
Ok, not really a portlet by JSR168 standards, but just an example of a portlet that uses AJAX methods to respond to phone directory queries. In a traditional directory portlet, a request to search for an incomplete employee last name would involve an HTTP post and a refresh of the entire page wrapper. This method does not rely on the portal server refreshing the entire page, but will query an XML view and display the results in a popup layer.


Usage / Example
This example uses the Domino "readViewEntries" view parameter but can be adapted to any back end system. Much of this idea is based upon Julian Robichauxs zip code lookup example, I just converted it to use an xml stream and changed some default behaviors.

There is an agent called "Populate Sample Data" that will create 80 names.

Not a complete solution, and there are some touch ups required in the javascript, so please forward any changes needed.
Code Attachments
AjaxPhoneDir.zip (50 Kbytes)
 Comments
Posted by lian fang on 09/14/2005 03:16:54 AMthe app not support chinese■H
thanks jeff,the app is very good,but i found a problem,it not support chinese?could you tell me how to resolve it ? my email:lian_fang@hotmail.com
Posted by Jeff Crossett on 09/14/2005 06:59:56 PMnot sure where to begin
wow lian, I have not given any thought to additional language support. I would imagine that maybe the keystrokes that you are catching in the onKeyPress events would have to change.
Posted by lian fang on 09/15/2005 03:55:20 AMfound the bug
jeff, i created many docs via the agent "PopulateSampleDate",and then i edit one doc's lastname.and then i use the page "testLookup.foo" to searching something, it will show a javascript error, and no search result.
Posted by Jeff Crossett on 09/15/2005 08:13:15 PMGood catch Lian!!
I made an error where my import created the EmployeeID and PhoneNumber fields as numbers but the form "Employee" had them set as Text. So when you saved the entry, it converted the phone and id fields to text, and my code was looking for a "number" node. I will change the attached template so that will not happen again.
Posted by lian fang on 09/15/2005 09:58:36 PMthanks jeff
i have found the question,just as you said, i edit the doc and save it ,the type of "Employee" and "PhoneNumber" have being set as Text.
thanks jeff.
Posted by lian fang on 09/16/2005 03:15:53 AMfound another bug
i input "a" and the result div display all name include "a",then i clear the "a",and focus other place,the div has being hidden.now i input the "a" second,the result div is not display
Posted by Dean White on 09/30/2005 09:22:16 AM404
Being a novice, I have a prob that may be blindingly obvious to most of you.. I hope. Installed the app on our server but when I select a returned name from a search I get the error 'Http Status code 404: file not found or unable to read file". In the address bar it shows http://ipaddress/detailPage.foo?empId=7764
Any ideas please ?
Thanks
Posted by Jeff Crossett on 09/30/2005 01:06:25 PMUnfinished functionality
Sorry Dean, I meant to create a basic detail page that can show more detail on the person you selected. There is nothing wrong with the baseline function of the app, but anyone can add a new "detailPage.foo" form which catches the query_string and parses the "empId" value. With this value the form can do a lookup to a view and populate other detail fields. I'll add the page in and repost tomorrow.
Posted by Christianne Gierloff on 10/07/2005 04:17:06 PMDiv reappears on refresh
Thanks, Jeff. Playing with this has helped me learn a lot. I just have one problem...
I added a "Notes" field titled EmployeeName to the form and added a 'save' button in order to save and store the selected name. When I save, the document reloads and the table (div) with the choicelist containing the selected name appears. Am confused because the InitQueryCode hides the div. Any recommendations on how to save the selected name without having the choicelist appear when the form reloads (is saved)? I am new to this.
Posted by Jeff Crossett on 10/07/2005 05:57:18 PM............
I need some clarification. You are using the drop down in a Notes form, and you are saving the form with the selected value? I would think the post-save form would still have some text in the input field? If you want the choicelist div to disappear on reload, you may need to have some javascript clear out the input field when the form reloads.
Posted by Christianne Gierloff on 10/10/2005 10:53:46 AMReappearing Div
Hi Jeff, The drop-down is on a "Notes" form that is used in a browser (IE6), not the Notes client. The form is saved with the selected value because I'm trying to give end users a "Notes-like" experience of a keyword drop-down. Since the (EmployeeName) field needs to be cleared in order for the div to hide, it sounds like I'm going to need to use 2 fields. One for the end user to select the value and a separate field to store and display the selected value to the end user after the form is saved and/or reloaded. What do you think?
Posted by Jeff Crossett on 10/10/2005 11:54:27 AMgot it..
Now I know what you are up to.
In your EmployeeName field onBlur() event, use this:
showDiv(0)
The showDiv function is what toggles the div. If the user were to place the cursor back in the field, they would see the div again with its old results.
Posted by lian fang on 03/06/2006 03:33:41 AMhow to add a scrolling bar in the result div
if the search result is too many in the div, then i want to add a scrolling bar in the div,how to do??
Posted by Stefan Deser on 03/06/2007 08:38:30 AMFix for Firefox...
First: Thanks Jeff for this wonderful piece of JavaScript-Code =)
You really saved me a lot of work..!
But if i use the code "as is", i got a problem with my Firefoxes (1.5 and 2.0+) every time a new http-request is sent to the server resp. received: Firebug complains about "globalDom", which - it says - has no properties:
"globalDom has no properties
[Break on this error] var entryNodes = globalDom.getElementsByTagName('viewentry');"
This problem only occurres the second time i enter a letter. So i tried to use
"alert(new XMLSerializer().serializeToString(globalDom));",
which causes Firefox to throw an exception... (but only the second time!)
After searching the web i found someone who got a similar problem. That guy solved his problem by using a new request-object for each request. So did i and it worked fine..!
So in the function "doRemoteQuery(queryString)" you have to alter the line:
"xmlHttp=getXMLHTTP();"
to:
"var xmlHttp=getXMLHTTP();"
and the fox is happy...
As this should not use more memory, you can consider it an little improvement on cross-browser-capability =)
Kind regards,
Stefan
 Add your comment!