Copying Selections With JavaScript

One thing I’ve started to do for web based admin systems is a far greater use of JavaScript.

One task I find I do quite frequently is copying from a list of options to a sublist of selected options. For example, a list of all blog entries to a sublist of related blog entries.

I do this by using a version of the following JavaScript. It takes a <select> HTML element with the property multiple="multiple" set, and copies to another <select> HTML element, also with multiple="multiple" set. I have a button set to execute the JavaScript via an onClick handler.

Lets have a quick look at the code…

First we need to define our function. Here I’ve called it doCopy and it takes two parameters which are the two <select> elements from the DOM, eg document.formname.selectname.

function doCopy(list1, list2) {

Now we need to iterate over the first list to check each <option> to see if it has been selected.

for (var i=0; i< list1.length; i++) {
if (list1.options[i].selected == true) {

If the current <option> is selected, we need to iterate over the second list, making sure we don’t already have it in the list. I’m setting a temporary variable, cancopy that is set to false if we find we already have it in the second list.

var cancopy = true;
for (var j=0; j< list2.length; j++) {
if (list1.options[i].value == list2.options[j].value) {
cancopy = false;
break;
}
}

If cancopy is true, then we’re OK to copy the item over to the second list. To do this we have to create a new Option object. Let’s have a quick look at the Option class in JavaScript. We can constuct a new Option like this…

new Option(text, value, defaultSelected, selected)

Where text is the text to show, value is value, defaultSelected is a boolean defining if we want the defaultSelected property set, and selected is a boolean defining if we want the selected property set.

We need to initialise our new Option with the value and text of our original option from list one, and set it as selected. We insert this into the secondlist by adding it to the very of its array. This will grow the list automatically.

if (cancopy == true) {
list2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
}

Lets put this all together for our final code…

function doCopy(list1, list2) {
for (var i=0; i< list1.length; i++) {
if (list1.options[i].selected == true) {
var cancopy = true;
for (var j=0; j< list2.length; j++) {
if (list1.options[i].value == list2.options[j].value) {
cancopy = false;
break;
}
}
if (cancopy == true) {
list2.options[list2.options.length] = new Option(list1.options[i].text, list1.options[i].value, false, true);
}
}
}
}

Here is some example HTML that uses the JavaScript to copy from list1 to list2.

<form name="mytestform">
<select name="list1" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
<input type="button" value="Copy" onClick="doCopy(document.mytestform.list1,document.mytestform.list2);" />
<select name="list2" multiple="multiple">
</select>
</form>

We should now be able to copy between the lists when we click on the Copy button.

Checking Variables Exist In JavaScript

I came across a problem with JavaScript earlier trying to see if a variable actually exists or not. For example…

if (x) {
// x exists.
} else {
// x doesn't exist.
}

Unfortunately this causes an error if x hasn’t been defined, eg…

var x = "robs test";

The solution came after a read of JavaScript: The Definitive Guide chapter 4. It explains about the Global Object, and that all global variables are located there. For client side JavaScript this is the Window object. So to see if x has been defined we need to check window.x, eg…

if (window.x) {
// x exists.
} else {
// x doesn't exist.
}

This means if I forget to define x it will default to the block of code saying that x doesn’t exist. Of course, I shouldn’t really be in a situation where variables haven’t been defined, but sanity checking is always a good idea, especially with development code.

RDF::Simple And Proxies

I was trying to work with Jo Walsh‘s RDF::Simple 0.12 Perl module, but it kept failing as it wasn’t able to connect past the office proxy server.

It turned out the solution wasn’t too hard. I tweaked the RDF::Simple::Parser to accept an http_proxy parameter in its new method. The ua method then checks this when it creates a LWP::UserAgent object, and either sets the proxy method directly, or uses the settings from environment variables.

The following patch has already been emailed to Jo for her to consider inclusion in the next module release, but in the mean time it is available here.


--- Parser.pm Wed Apr 28 11:20:00 2004
+++ Parser.pm.robsnew Wed Apr 28 11:19:52 2004
@@ -4,9 +4,9 @@
use XML::SAX qw(Namespaces Validation);
use LWP::UserAgent;
-our $VERSION = '0.1';
+our $VERSION = '0.2';
-use Class::MethodMaker new_hash_init => 'new', get_set => [ qw(base)];
+use Class::MethodMaker new_hash_init => 'new', get_set => [ qw(base http_proxy)];
sub parse_rdf {
my ($self,$rdf) = @_;
@@ -36,7 +36,15 @@
sub ua {
my $self = shift;
- $self->{_ua} ||= LWP::UserAgent->new(timeout => 30);
+ unless ($self->{_ua}) {
+ $self->{_ua} = LWP::UserAgent->new(timeout => 30);
+ if ($self->http_proxy) {
+ $self->{_ua}->proxy('http',$self->http_proxy);
+ } else {
+ $self->{_ua}->env_proxy;
+ }
+ }
+ return $self->{_ua};
}
package RDF::Simple::Parser::Handler;
@@ -481,6 +489,11 @@
'base' supplies a base URI
for relative URIs found in the document
+
+ 'http_proxy' optionally supplies
+ the address of an http proxy server.
+ If this is not given it will try to use
+ the default environment settings.
=head2 parse_rdf($rdf)

LWP::Simple And Proxies

Some Perl scripts I’ve been writing lately have to connect to remote pages to collect data. Normally I use LWP::Simple, but this hasn’t been working too well since we started having to use a proxy server in the office.

One solution is to either set the environment variable http_proxy with the address of the proxy server.

Another is to export the useragent variable $ua when you use the module, and set the proxy details directly in the resulting LWP::UserAgent object.

As an example, we’ll download the contents of my homepage in the variable $page.

use LWP::Simple qw($ua get);
$ua->proxy('http','http://lonsqd01.emap.net:3128');
my $page = get 'http://www.robertprice.co.uk/';

I also came across a useful piece on Perl Monks called Getting more out of LWP::Simple, that has lots more useful tips on it.