JavaScript Module Tutorial

Created by: Lee LaMont Bell Jr., Last modification: 23 Feb 2005 (05:01 UTC) by SEWilco
This page is not finished!!! It Should NOT be considered anything more than a rough draft. While the information in it is essencially correct - there may be errors.

Introduction

A while ago - I spent a little time browsing the library sites for JavaScript code. One of these is The JavaScript Source at http://JavaScript.internet.com where I found a nice little routine that I rewrote as a module for ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and bitweaver and TikiWiki. This tutorial explains the steps taken, why they were taken, and how this can be beneficial to any administrator or beginning developer. In the process, this module was included and is available in bitweaver.

What Does It Do?

The JavaScript code is fairly simple. See for yourself at http://JavaScript.internet.com/forms/dictionary.html#source. It allows a user to enter a word / select either a Dictionary or a Thesaurus / and then look up a definition for that word.
I liked the idea of this, but I did not care for the implementation due to the following reasons:
  1. The routine directed the user away from my site.
  2. It was limited - there are other sources available that are just as valuable if not more so.
  3. It used checkboxes - which simply take too much room in a module. 2 checkboxes with long names like Dictionary and Thesaurus require a line each. Add 4 or 5 more and the module looks very clunky.
The solutions seemed obvious. The first problem could be avoided by opening a second window to the lookup site instead of redirecting the current window there. The second and third problems could be remedied by rewriting the form using a pull-down selector.
In the process, I added:
  • Acronyms
  • AskJeeves
  • Google
  • eLibrary
Other search sites can be added easily.

So Where Is The Source Code?

In making this tutorial - I had a choice to make. This module could be added as a complete Package - or – it could be added to an existing Package in bitweaver. I didn’t think this little module added enough functionality to claim to be a Package – and it was sort of related to an existing Package – so I added it the Search Package.

The primary files are named “mod_dictionary.php” and “mod_dictionary.tpl” which should be located in the search/modules directory and the JavaScript source was added to the file kernel/tiki.js file. All of these files are attached to this page.

The Code – How Does It Work?

  • - The first file “mod_dictionary.php” is a placeholder that doesn’t DO anything.
  • - The second file “mod_dictionary.tpl” contains the form that is used by the JavaScript code.
  • - The JavaScript code (located in the file Tiki.js) is executed when the user enters a search term and hits the button.

The PHP File – “mod_dictionary.php”

[+]

The TPL File – “mod_dictionary.tpl”

[+]

The ))JavaScript.Code(( In Tiki.js

[+]

How Do I Modify This For Myself?

As stated earlier, other search sites can be easily added to this module. The key to this is the Option Statements in the file “mod_dictionary.tpl”. The following steps were taken when Google was added.
  1. Open a browser window to Google
  2. Do a search using a unique name – Aardvark
  3. Copy the resulting URL to the clipboard – The URL was http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=Aardvark
  4. Add another option statement to the list of options
  5. Paste the URL into the option statement – be sure to remove everything following the original search word (Aardvark) – In this case the URL is http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=
    Please Note: Some search sites add session data or other junk to the URL that is not needed.
  6. Give the option a meaningful name – In this case – Google