Entries Tagged as JavaScript

Refresh parent window from a pop-up

June 28, 2004 · 6 Comment s

It's amazing how many times I've had to use this simple little function in projects throughout the years. You've got a link that opens a pop up window whereupon you do something that updates your database. What you also need is for the pop up window to close and the parent window to refresh to reflect the database change.
/*
   Reloads the parent window
*/
function parentReload() {
   if (window.opener && !window.opener.closed) {
      window.opener.location.reload();
      self.close();
   }
}
The if statement is basically checking that the window that fired up the popup window is still available.

→ 6 Comment s Tags: JavaScript

Dynamic Lookup

June 22, 2004 · 1 Comment

On a new system I'm developing, I had the need for the user to type into a standard text box and for the cursor to move to the specific entry in a corresponding select box. Now, when you hit the first key, it does exactly what it should. For example, if you hit 'c' on your keyboard, the select box will highlight the first entry beginning with 'c'. The problem arises when you then type 'h', in that you're actually looking for entries in the select box that start with 'ch'. However, what actually happens is that the select box moves to the first entry beginning with 'h'. Definately not what I was after. The solution is a little bit of JavaScript. The HTML that makes up my form is like so...
<input type="text" name="Start" onkeyup="JumpTo(this.form)" class="standard" />
<br /><br />
<select name="centre_id" multiple="no" size="10">
<cfoutput query="select_centres">
<option value="#centre_id#">#centre_name#</option>
</cfoutput>
</select>
As you can see here, on every onKeyUp action for the text box, a function called JumpTo is called. The code for the JumpTo function is as follows:
function JumpTo(thisForm) {
   var SelectItem = 0;
   var stringSub =    thisForm.Start.value.toUpperCase();
   for (i=0; i� thisForm.centre_id.length; i++) {
      var stringMain = thisForm.centre_id[i].text.toUpperCase();
      if (stringMain.indexOf(stringSub) == 0) {
         SelectItem = i;
         break;
      }
   }
   if (SelectItem != 0) {
      thisForm.centre_id.selectedIndex = SelectItem;
   }
}
What the function does, is to simply match what we've typed into the text box against the entries in the select box, and if we have a match, then we set the selectedIndex property of the select box to that item.

→ 1 Comment Tags: JavaScript

JavaScript Laziness

June 22, 2004 · No Comments

One of the things that bugs me at work is the way JavaScript is written. Let me put it another way. Internet Explorer is the browser of choice throughout the company (approx 5,000 employees) and so the code written by the majority of the developers is written to cater only for IE. For me, this is nothing other than sheer laziness. The main culprit is the usage of
document.all.whatever

in the JavaScript code. As most people know, the usage of this bit of code is IE-only. Where this really becomes a problem for me is in that I use Mozilla Firefox as my default browser, but when I need to browse our Intranet I have to fire up IE as the HTML/CSS/JavaScript behind it all is so non-standards compliant it makes me grind my teeth. Just a rant...

→ No Comments Tags: JavaScript

JavaScript Mayhem

June 10, 2004 · No Comments

It seems that the project I'm working on just now is a never ending monster of JavaScript related nonsense. In addition to the wee bit of JavaScript I outlined in this earlier post, I've got dynamic rows and columns here, there and everywhere that have to be totalled on the fly ... and it's a lot of fun believe me. I can't, and shouldn't really complain though as it's been a while since I had to rely on JavaScript so much, so it's been a nice little refresher.

→ No Comments Tags: JavaScript

n-Related Selects

June 08, 2004 · No Comments

The current project I'm working on required the need for n-Related Select boxes, well in this case it was two. Basically, the user would choose a District and depending on the District chosen, the County Member select box would then be populated. If you then changed the District, the County Member select box would also change to reflect this District change. Surprisingly, n-Related selects are quite tricky, but luckily there is a brilliant open source JavaScript API out there called qForms Now, even though qForms takes care of the vast majority of work involved I wasn't quite finished. Consider I have a table in my database called tbl_Districts with two columns; district_id and district_name. I also have another table called tbl_County_Members, this time with three columns; county_member_id, county_member_name and district_id. Well, the following code uses these tables to pull everything together.
<!--- Grab all the County Members --->
<cfquery name="CountyMembers" datasource="#request.dsn#">
select
county_member_id,
county_member_name,
district_id
from
tbl_County_Members
</cfquery>
<!--- Grab all the Districts --->
<cfquery name="Districts" datasource="#request.dsn#">
select
district_id,
district_name
from
tbl_Districts
</cfquery>
<!--- Include the qForms API --->
<script src="lib/qforms.js"></script>
<script type="text/javascript">
<!--//
// set the path to the qForms directory
qFormAPI.setLibraryPath("lib/");
// this loads all the default libraries
qFormAPI.include("*");

// create a structure for a blank entry
stcBlank = new Object();
stcBlank[""] = " ";

stcDistricts = new Object();

>cfoutput<
   >cfloop from=1 to=#Districts.recordcount# index="i"<
   stcDistricts["#i#"] = new Object();
   >/cfloop<
>/cfoutput<
   >cfoutput query="CountyMembers"<
   stcDistricts["#district_id#"]["#county_member_id#"]=
"#county_member_name#";
   >/cfoutput<

   function init(){
      // initialize the qForm object
      objForm = new qForm("related_selects");
   }
>/script<
What we've done above is to create our association between the County Members and Districts and we'll exploit this in our >select< statement by using an onselect="". First though, let's initialise our qForm by calling init() from our >body< tag
>body onload="init()"<
Now let's set up our form and two select boxes.
>form name="related_selects" action="somewhere.cfm" method="post"<
Districts
>select name="districts" onchange="objForm.countymembers.populate(stcDistricts
[objForm.districts.getValue()], null, null, stcBlank);"<
   >option value=""<>/option<
   >cfoutput query="Districts"<
   >option value="#district_id#"<#district_name#>/option<
   >/cfoutput<
>/select<

>br /<>br /<
County Members
>select name="countymembers"<
   >option value=""<>/option<   
>/select<

>br /<>br /<
>input type="submit" /<
>/form�
And there you have it, when you choose a District, your County Members select box will be populated by the corresponding items. It's easy enough to rip this code off for your own usage, but if you need any help just give me a shout.

→ No Comments Tags: JavaScript