gregs

The unofficial Google Shell… I like it!

Or more appropriately what is it? Fascinating…

I found myself having to trap a user attempting to refresh a page for one of our web apps. After a little bit of digging I stumbled across this solution:

To use it simply embed or include it into your template

Eventhough the article says this is a IE specific event/feature it also works in FireFox. You should be aware that whenever the user leaves the page, they will be prompted about their impeding data loss, which can get a little tedious while developing.

Again this became a handy feature for our AJAX apps as most of the processing is done in the background without the page reload, a user could accidentally hit the back button and loose where they were at.

What with the buzz going on around xmlHttpRequest, I decided to have a little play with the technology (yes I know very me too of me). One tutorial/example site I stumbled across "Guide to Using XMLHttpRequest (with Baby Steps)" used some interesting JavaScript: Conditional Compilation. Here is an example:

From the looks of it, it's an IE only thing, but I wonder what the advantages are of using this code over a regular browser check? Is this a more reliable way than using window.ActiveXObject and, if you are specifically playing around with xmlHttpRequest, based on that condition making the correct create object call?

Imagine a situation where you have a search form, with different search options based on different categories (such as Search all, news, weather, entertainment, etc...). Now when you submit your form you won't users to either select the Search All option or the different categories, but not both (i.e. the form is to be cleared of all the different categories if Search All is selected and vice versa when you select a different category the Search All option is to be cleared). In the following I will talk you through a script I wrote to achieve just that effect.

Let's start off with the actual form:

<form name="example" action="<your destination page>">
<input type="Checkbox" name="test" onclick="javascript:SetOther()" checked> Search All
<input type="Checkbox" name="test2" onclick="javascript:SetAll()"> News
<input type="Checkbox" name="test2" onclick="javascript:SetAll()"> Weather
<input type="Checkbox" name="test2" onclick="javascript:SetAll()"> Entertainment
<input type="Checkbox" name="test2" onclick="javascript:SetAll()"> Music
<input type="Submit" value="Search">
</form>

For the script to work it is very important to give the form a name so that the JS can reference the script. Else there is nothing special about the <Form> tag. The checkboxes contain all onclick event handlers and they call different functions (to carry out different actions, more on that when we review the script). Also note that the different categories checkboxes have the same name. The final component is the search button.

Now let's look at the script:

<SCRIPT LANGUAGE="JavaScript">
<!-- hide script from older browsers
function SetAll() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   var i = 0;
   for(i = 0; i<len; i++) {
      if (dml.elements[i].name == 'test2') {
         dml.test.checked = val;
      }
   }
}
function SetOther() {
   dml = document.example;
   len = dml.elements.length;
   val = 0;
   var i = 0;
   for(i = 0; i<len; i++) {
      if (dml.elements[i].name == 'test2') {
         dml.elements[i].checked = val;
      }
   }
}
-->
</script>

Right let's take a look at the first function, called SetAll. This functions controls the behaviour of the Search All checkbox, i.e. if the any of the different categories checkboxes are ticked remove the check for Search All checkbox. On the first three lines of that function I set a bunch of variables to make the coding easier (i.e. shorter). The variable dml stores the form name, len stores the number of elements elements (checkboxes) of said form, val is set 0 and I also set i to 0. Next I looped (for statement) over the number of elements, checking which elements named test2 are checked (if statement). Now you can see why I gave the form elements for different categories the same name, because the behaviour dictated that if any of the different categories is checked the script was to remove the check from Search All. The statement between the if clause does exactly that, it sets for element test to val, which is 0.

The second function displays a similar behaviour. The difference is that when the Search All checkbox is ticked, the tick in all the other categories is removed. I hope all this made sense and that you found it useful, so until the next time!!