Universally Related Popup Menus AJAX Edition: Part 1 / Page 3 | WebReference

Universally Related Popup Menus AJAX Edition: Part 1 / Page 3


[previous]

Universally Related Popup Menus AJAX Edition: Part 1

3: Modify Your HTML Page:

Add the following code to the HEAD of your document:

This code tells Internet Explorer to save the dynamically generated list options and selections between pages.

You must also add "class=saveHistory" to the select tags of each URPM so that I.E. knows which elements will keep their contents. For example:

Also add the following code to link the JavaScript to the Html page:

Convert the "reset" button, if applicable, to a simple "button" type and add the following code to the onClick() event.  This is done so that the form resets before the lists:

OPTIONAL STEP: Parameters are passed to the URPM_AJAX.js script via hidden fields. This saves you from having to muck around in the script. In fact, unless you want to do something special, you shouldn't have to modify the getListItems.asp or URPM_AJAX.js scripts at all! There are five parameters that can be set. The first is the showBlank field. It tells the script to include a blank item at the top of the list which would be used in the case of non-mandatory fields. It will accept any non-whitespace and non-zero value as true. Hence, "True", "true", "False", "dog", "whatever" would all evaluate to true. Conversely, a value of "0" or "false" would be interpreted as false. Moreover, the absence of a value or the hidden field itself will also default to false.

The next hidden field is promptText. If you'd rather have some text instead of a blank field, you can set the prompt text such as "Please Make a Selection" or "Levels" here. If you include a value in this field, showBlank is redundant and therefore not required.

The defaultIndex field sets the listIndex on the base list when the page first loads. It is zero-based and doesn't include the optional blank entry. The following HTML code will select the eleventh item as the default value if showBlank is false and the twelfth if it is true:

The final two fields relate to the location of your server-side script. The url field can be used to supply your own script instead of getListItems.asp.

The FileDSN field is used to provide your own file DSN for the database. The default path, stored in the getListItems.asp file is "c:\inetpub\URPMs dB\URPMs.dsn". If you want to store the DSN in a different folder, or wish to rename it, you'll have to use this field.

4: Copy the database, DSN, HTML, JavaScript, and ASP/server-side script to your server.

And that's it. You're good to go.

Conclusion

This week we looked at a brief overview of Ajax, relevant JavaScript 1.3 enhancements, how to run the example and using the script within your own Web page. Next week we look at an in-depth explanation of the JavaScript code.

About the Author

Robert Gravelle is a Senior Programmer/Analyst for the Canadian Border Services Agency as well as a freelance IT consultant. He specializes in Java, Perl, ASP, Microsoft application automation, JavaScript, VBScript, Web Development, and multi-tier systems. Feel free to contact him, but due to the volume of emails received, he cannot guarantee a response to every message.

Original: January 23, 2008

Digg This Add to del.icio.us


[previous]