Easy Javascript Popups in Coldfusion--tutorial.jcwcn.com

Introduction:

Javascript popups are very usefull for a wide variety of situations when building web applications, whether you are using ColdFusion or some other web programming language. The example I will use for this tutorial will be an employee lookup. For this application, we will use a hypothetical form that we are filling out. We will use a Javascript Popup to select the person we want to add to the form. The joy of this simple technique is that you can use the same technique for any popup form you may need. Most of the code uses the power of ColdFusion, not Javascript. This technique has been tested on both Internet Explorer, Firefox and Opera on a Windows PC.

Basics:

The basic popup form we will use will show the first and last name of all the people in a database. You will be able to click on the person's first or last name, which will close the form and populate the form you are trying to complete. Just to show you some fun you can have with it we will fill out the following items on the form, the first name, last name, email address and their employee id number.

A number of naming conventions that I will use in this tutorial are:

Parent window/page: the page that has the form I am trying to fill out. The page that launches the popup window.

Child window and popup window will be used interchangeably. They are the small window that is being used to lookup a person and on the click event, populating the form on the parent page, then closing.

Parent Form:

I will make a very basic form, nothing stylish about it. The only real important part of the form is adding id's to the form elements and also how you launch the popup form. So to start out with the Javascript window launcher, I am just using a simple javascript in a link.

[<a href="javascript:;" 

onClick="window.open('popup_child.cfm', 'Lookup', 

'width=525,height=400,scrollbars=yes');">Open Window</a>]

So what this does, is open the file 'popup_child.cfm'. If you need to pass parameters to the form you can do that to by adding it into the url string (i.e. 'popup_child.cfm?note=2&note2=3'). Here is the very basic form that I built for this tutorial.

<form action="" method="post">

<input name="firstname" type="text" id="firstname" /><br />

<input name="lastname" type="text" id="lastname" /><br />

<input name="email" type="text" id="email" /><br />

<input name="employeeid" type="text" id="employeeid" /><br />

</form>

Again this is not a complete form, simply built for the tutorial. The important part to notice is that the form elements have a name value as well as an ID value. These ID's are used to reference them from the popup form. I have found that it is more consistent accross browsers doing it this way then trying to send values in Javascript other ways.

Child Form

Here comes the part that shows the simplicity of the design. The popup form can be built any way you want. You have to use Coldfusion to build most of it then just put a little javascript on the top. Below is the query and the output that shows up on the popup. Notice there is nothing but a coldfusion query, the ouput of that query and a link pointing to the same page and passing the unique id of the record. Pretty simple so far right?

<cfquery name="records" datasource="#datasource#">

Select 

employeeid, firstname, lastname, email

From tblpeople

Order by lastname

</cfquery>

<ul>

<cfoutput query="records">

<li><a href="#cgi.scriptname#?id=#employeeid#" target="_self">

#lastname#</a>, #firstname#</li>

</cfoutput>

</ul>

Here is the easy Javascript part. At the top of your page place the following code.

<cfif isdefined('url.id')>



<cfquery name="selectedrecord" datasource="#datasource#">

Select

employeeid, firstname, lastname, email

From tblpeople

Where

employeeid = <cfqueryparam cfsqltype="cf_sql_integer" value="#url.id#">

Order by lastname

</cfquery>



<cfoutput>

<script type="text/javascript" language="JavaScript">

window.opener.document.getElementById('firstname').value='#selectedrecord.firstname#';

window.opener.document.getElementById('lastname').value='#selectedrecord.lastname#';

window.opener.document.getElementById('email').value='#selectedrecord.email#';

window.opener.document.getElementById('employeeid').value='#selectedrecord.employeeid#';

</script> 

</cfoutput>

<script type="text/javascript" language="JavaScript">

window.close()

</script>

</cfif>

So what this does is it checks to see if someone clicked on one of the links first (the ISDEFINED part). If someone did click on a link, it uses the value passed in the url string to query the record. You could actually pass all of your values in the url string and not requery the database if you wanted to. Then come the two javascript pieces. The first populates the fields on the parent form, the second Javascript piece closes the popup window. The first Javascript is using the 'window.opener.document.getElementById' syntax. This is the reason that you have to use the ID values in the parent form. So as long as you name the ID's in the form the same as the Javascript syntax in the popup form, it should populate the parent form. Then once that occurs the popup window closes.

Expanding It

Here is one tip you can use to expand the possibilities of this technique. Say you had one form field that you want to add multiple values into (like a 'To' field on an email). All you need to do to customize the Popup form would be to delete the second Javascript at the top of the page that closes the form so that it reloads the form and lets you select another name. Then in the first Javascript section, add a plus sign in front of the equal sign for the form field you would like to allow multiple values. Below is an example.

window.opener.document.getElementById('email').value+='#selectedrecord.email#,';

All the plus sign does is tells the Javascipt to add the value to any already existing value in the form field. Without the plus sign it just overwrites any values that may be in the form field with whatever value was sent to it.

Conclusion

As you can see from the example, this method is very simple and yet very powerful. It allows you to focus on coding you know (presumably Coldfusion) and not get bogged down by having to learn a lot of Javascript (not that learning Javascript would be a bad thing of course). The bulk of the work is handled by Coldfusion with just a simple and customizable Javascript section. This allows you to add or delete the number of fields you are able to populate on the parent form.

discuss this topic to forum

[Print][Close][Bookmark:digg+,reddit+,del.icio.us+,dzone+]