Kick starting the code

Now that you have all of the Ajax code in place, it's not going to start by itself. You need to tell the browser that you actually want something to happen when an action is performed. You need to have some JavaScript events coded so the end user can kick off the Ajax calls when the user is interacting with the application. In this section, you will add the "onclick" event to the datasource lookup button.

1. Locate the init() function in the DBExplorer.js file. Add an event handler for the load data source button by inserting the following code into the script at the lines indicated.

   document.getElementById("datasource_button").onclick =event_setDataSource;

   
   This tells the browser to execute this function when the button is clicked. We could have added these event listeners directly inside the form input tags, but that is not near as much fun. When adding event listeners using this method, you add the actual function object, and therefore, do not include quotes or the parenthesis. The events for the other fields have already been coded for you. The table below contains the other "onXXX" events that are already coded and need no action by you. You can review these areas of the code if you wish to have a better understanding.
   
   

   Input field	Event	Handler function	Action performed
   Data source load button	onclick	event_setDataSource	Retrieves database properties and schema list.
   Schema select	onchange	event_setSchema	Retrieves the table list.
   Table select	onchange	event_setTable	Retrieves available columns.
   Available columns select	ondblclick	event_addColumn	Adds column to active columns list and retrieves table data.
   Active columns select	ondblclick	event_deleteColumn	Removes column from active columns list and retrieves table data.

   
   
   
2. Save your changes before continuing to the next step by selecting File -> Save from the menu or type Ctrl-S.

9 of 18 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Setting up
• Configuring project and import files
• Initial deployment and test
• It's a normal servlet, I tell ya
• Defining a JavaScript variable to address the servlet
• So where's the Ajax stuff?
• Configuring the Ajax calls and retrieving data
• Kick starting the code
• Deploying and testing the application
• Troubleshooting
• The magic behind the screen updates
• Appendix A. Configuring the sample database and data source
• Appendix B. Deploying the portlet
• Conclusion
• Download
• Resources
• About the authors

---

9 of 18 | Previous | Next

Next steps from IBM

• Try: Rational Application Developer for WebSphere Software
• Buy: Rational Application Developer for WebSphere Software

Dig deeper into WebSphere on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.