Javascript Cascades - part 1
In the ten years that I’ve been doing online programming, I’ve spent at least half of that time working on the backends or administrative portions of content management systems. Content Management Systems or CMS as they’re often called are dynamically driven websites. Great, but what the hell does that mean? A CMS is an online tool that allows users to build very large websites without needing knowledge of the workings behind the text.
Take WordPress for instance, it’s a blog publishing tool (and happens to be the tool I chose to publish this blog entry). It’s also a variation of a CMS. It allows users to enter text in a similar way to writing in Microsoft Word and have it appear on a website following a specific template. Once the CMS templates are setup, the display will have the same formatting even though the content is different. The user just writes the content and chooses when to display it. The programming behind the scenes decides how to display it and how to manage all the rest of the workings.
One of my clients wanted a way to edit multiple entries at a time which is fairly simple, you output the listings into a grid display in a table; I won’t bore you with how to do that. The complex part was finding a solution to choose multiple blocks of entries to edit, kind of like a select all but not quite, more of a select some but faster than selecting them one by one.
Either he or one of his programmers decided top create a cascading tool that would allow users to select a row, click on the submit button in that row and each of the rows below that one selected. By contrast, deselecting the row further down the page and hitting that row’s submit button would deselect all the rows below that one.
Here’s an example and below is the Javscript I created to do this:
// JavaScript Document
function cascSelect(theElement) {
var theForm = theElement.form;
var startBox = theElement.name;
for(z=0; z<theForm.length;z++){
if(theForm[z].type == 'checkbox' && theForm[z].name != 'checkall'){
var checkNames = theForm[z].name;
if(checkNames == startBox.replace(/pos/, 'chk')) {
var startValue = (theForm[z].checked);
var startKey = z;
}
if (z > startKey) {
theForm[z].checked = startValue;
}
}
}
}
You might be wondering what the usefulness of the cascade might be. Think about having 200 rows on the page instead of the six I placed on the examples. What if you wanted to change the values for twenty of those rows without having to select each one individually. This will facilitate that goal.
I’ve used similar solutions which were stored in session cookies and selected via submit rather than javascript functions however using javascript will allow us to cascade values as I will show in my next entry. I hope this is helpful to someone, I might have saved a bunch of hours had I known this solution existed.
Charles
February 1st, 2008 at 8:21 am
A very simple basic script.
February 11th, 2008 at 6:12 am
Top of the morning to you! Wow what a fantastic article about Content Management Tool! Your keen insight into Content Management Tool is informative and creative. I look forward to reading other articles you have. Thanks.
February 22nd, 2008 at 3:47 pm
I love CMS i use joomla on most of my sites. They have a great community.
April 16th, 2008 at 11:15 pm
fgdghd
May 3rd, 2008 at 7:37 pm
I’m okay with hhtml, css and php and stuff. Where can I find some good resources for a dumbass like me to learn Javascript?