You can take advantage of AJAX while developing web 2.0 applications with XPages.  There are 2 features that provide built-in AJAX support.  

These are:

• Ajax Type Ahead
• Partial Page Refresh

Below I will walk you through step-by-step on how to implement these features in an application.  You can also download a sample database by clicking here: xPageAjaxExample.nsf

Ajax Type Ahead

The Ajax type ahead feature can be added to any edit box control.  It allows you to provide a list of values to the user by either entering a static list or computing the list via a formula.  There is also a choice for retrieving a list from a URL, though I have not tried this option myself.

In this screen shot I have clicked on an "Edit Box" control and then selected the "Type Ahead" tab:
- I clicked on "Enable Type Ahead"
- Selected "Full" mode
- For suggestions I selected computed and added a @DbColumn formula (next screen shot)
- I unchecked "Case-Sensitive"
* The help has a full description of the options



For the type ahead suggestions, I want to return a list of Sales Representatives from a view.  I selected computed by clicking the diamond and entered the following formula:



Here's the results if I enter the letter "s" in the SalesRep field in the browser.  The user is provided with a drop down of choices to select from:






Ajax Partial Page Refresh

The partial page refresh is available on any event.  You select "Partial Update" on the event tab and then select the element you only want to have updated when the event is fired.  

In this example, I only want a table on the page to be updated when the user clicks the Lookup button.  Here is what the settings look like.  The table ID I want to refresh is "OtherCustomers":


This is the screen shot prior to clicking the button.



This is after the button is clicked.  Screen shots do not really do this feature justice, you'll need to try in in your browser to see the effect.


This example is a very simple one where I have no business logic behind the button event.  The button's sole purpose is to force a round trip of the page to the server and provide the partial page refresh.  

There is a computed text field on the form that performs an @DbLookup based on the SalesRep field.  Here is the code for that computed field.  Note: I implode the array and use "<br>" as a separator so I get a line break.  On the computed field there is an option to set the "Content Type" as HTML.  This equates to pass thru HTML in Domino.  Here's the formula for the lookup:



As you can see, it is very easy to take advantage of these 2 features.  Domino 8.5 also ships with the Dojo toolkit available on the server.  You will be able to utilize the library in you client side script for additional AJAX features.

Additional xPage examples on this site can be found here:  Domino 8.5 - XPages examples

John

Technorati: Domino 8.5 XPages

1. Vijaya Kumar07/08/2008 02:21:30 PM
Homepage: http://www.qafco.com.qa

Dear John,

Thanks for sharing easy to use effective features of AJAX by simple steps.
Thanks to IBM Lotus Notes 8.5 development team

---

2. Stefaan Somers07/08/2008 06:21:54 PM

Can I find anywhere this kind of javascript/HTML coding to obtain the samen effect in Domino 6.5

---

3. John Mackey07/09/2008 11:10:30 AM
Homepage: http://www.jmackey.net

@Stefaan. You definitely can, look at the dojo toolkit (there are others too). I'll email you some info.

John

---

4. Dave Armstrong07/13/2008 12:09:16 PM

Any tips on debugging your app if type-ahead just doesn't work?
I set up a basic type-ahead field, matches everything you have shown... but nothing happens in the browser.

I'm sure it is something simple, but with how new xPages are, I haven't yet got a handle on how to troubleshoot problems when it does not work as expected.

Thanks...

---

5. John Mackey07/15/2008 01:00:21 AM
Homepage: http://www.jmackey.net

@Dave, I have been using mostly print statements to debug my server side javascript via the console. If you still have issues you can send me the code to take a look at it....I dropped you an email.

I'll look into debugging methods. It might be an interesting topic to blog on.

---

6. Philippe Poupeleer09/29/2008 08:23:18 AM

Hi,

I have the same problem as Dave, the Ajax type ahead doesn't give me any sugguestions when I type in 's'. I tried on Beta 1 of D8.5 and later on upgraded to Beta 2, but still the same problem. Any ideas ?

I also created an empty XPAge with just 1 edit field with the same settings as described above, without any result.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="{ Link }

<xp:inputText id="nameField">
<xp:typeAhead mode="full" minChars="1" ignoreCase="true">
<xp:this.valueList><![CDATA[#{javascript:@DbColumn(@DbName(),"vSalesReps",1)}]]></xp:this.valueList>
</xp:typeAhead></xp:inputText></xp:view>

---

7. John Mackey10/01/2008 05:34:58 AM
Homepage: http://www.jmackey.net

@Philippe, it looks correct but could be the @dblookup is failing. Try hardcoding values in the list instead. That will tell you if it's the lookup or if something else is going on. I'll drop you an email and you can send it to me the db to look at....

John

---

8. Lothar Mueller10/10/2008 06:02:33 AM

Hi,
thanks for your numerous and very helpful examples, too bad I only found them today; would have saved me some trouble in the past few weeks...

OK, 2 questions:
- re: partial refresh: having installed Beta 2 I can't see any trace of the settings visible in your screenshots; the only trace of "partial refresh" I could find so far was in the "pager" control (and that results in strange behaviour if used in conjunction with a DominoView...). HAve there been changes regarding that option as of Beta 2?
- over the last few days I tried and tried to make use of @DbColumn and @DbLookup formulas but without any success:
- - if used for filling the values list of a combo / list box this simply results in error 500 ("HTTP Web Server: Command Not Handled Exception"), although the formula is just THAT simple (@DbColumn(@DbName(),"By Category",1), the view is there, the first column sorted etc.
- - if used with the type ahead feature, the page renders alright, but there's no suggestion made. Type ahead , however, works fine if I enter the suggestions statically as a list
No more ideas on my side, I have to admit...

any help or hint is highly appreciated!

Best regards,
-Lothar

---

9. John Mackey10/18/2008 07:09:02 AM
Homepage: http://www.jmackey.net

@Lothar, though we spoke via email I just wanted to respond here for others who may have the same issues:
- the partial page refresh options is located on the events tab, on the right hand side. Depending on your resolution, you might need to scroll to the right to see the options.

- @DbColumn or @DbLookup, if there is only 1 result the @formula does not return a list , a js array type, but it returns a string. You might want to always wrap the result with an @Explode(). Lothar reported this to IBM as a potential bug.

John

---

10. Vanessa11/06/2008 02:22:45 PM

hi,
thanks vor good blog.

but I have the same behavior as Lothar, static values are successfully but computed via @dbcolumn doesn't works.
and I can't open the xpages in your example DB in the browser.
Error 403.
DB is normaly copied to server, ACL is copied too, so the default user have a manager access.
Did I something wrong ?

thanks..Vanessa

---

11. Vanessa11/06/2008 02:42:55 PM

PS:
the type ahead doesn't works on my browser in discussion DB 8.5 from IBM too (on the Tags-field is type ahead enabled ).
Even yesterday I saw the feature working by one college.

Is it possible, that it is a server-side problem?
any tasks or settings must be enabled ...

---

12. John Mackey11/07/2008 06:28:53 AM

@Vanessa, Lothar's issue was that he only had one value being returned and needs to do an @Explode() to force it into an array.

The only serverside script being executed would be the @DbColumn on the page load. I would try a different browser. I have not seen anyone else post this issue on the forums, so I believe it is an isolated incident. If you want me to take a look, you can send it to me. My email can be found here: { Link }

John

---