Search Results for: multiselect

son of multiselect

There have been a few fixes and upgrades to the multiselect code since the last announcement.

For those of you new to the idea, the multiselect is a tool for providing a more friendly version of HTML’s <select multiple>, using checkboxes, instead of the clumsy CTRL+click method that was there before-hand.

To make sure of backwards-compatibility, the script uses what has become known as “Unobtrusive JavaScript” – ie; if you don’t have JavaScript enabled, it will make little difference to the end result.

here is the example.

The new code adds the following functions:

  • The all, none, reset links may be turned off by changing the show_toplinks variable in the source to false.
  • The script does not force you to use ‘[]‘ symbols. This is good news for JSP developers, and other users of non-PHP languages.
  • You may now mark individual <option>s as disabled.

As usual, instructions for use are:

  • Get your multiple select working properly in plain HTML first.
  • Link to the external script.

Thank you to all the commenters on the previous version.

multiselect updates

Thanks to all the people who have tested and used the multiselect before. I’ve taken the improvements, suggestions, and bug-fixes and am now happy with a new version of it.

Multiselect takes a normal <select multiple="multiple"> and converts it dynamically into a more user-friendly interface.

An example of the new and improved version can be found here.

Points of note

  • you can now “select all” and “select none”
  • a new “reset” link brings the select box back to how it was originally
  • the script works even if you have more than one multiselect box

caveats: the name of the <select> must end in ‘[]‘. While this is specifically against W3C rules, there does not seem to be any alternative method to pass on multiple values for one variable.

To use, simple download the script and link to it in your webpage.

This script should work in all major browsers. If it doesn’t work in the one you’re testing in, then please alert me.


NOTE: This post is now obsolete. Please click here to find the most recent mention of the script.

Donncha pointed this out to me. It’s an improvement over the standard multi-line select box in that you don’t need to know the magic key combination for selecting a second item without losing the first.

I didn’t like that it adds to the bulk of the source code, though! So, here is an improvement.

As usual, I’ve left the source as simple as possible. The javascript checks the document for any select lists that have multi-line support, and converts them to a checkbox list instead.

To use, simply copy the javascript to your site, link to it in your document, then make a multi-line select box as you normally would.

NOTE: Your multi-line select box’s name must end in ‘[]’. While this is against some rules for HTML, it is, AFAIK the only way to make a multi-select work in any case.

update: Michel pointed out that the code only works on the first select box found. I’ve updated the code to fix this. Thanks, Michel!

update (2004-10-07): Thanks to Shaun Walbridge for spotting an intermittent NULL problem. Code has been updated to reflect that.

update (2004-11-04): Thanks to Jeff Hansen for requesting that the script support the HTML disabled attribute. It now does. – an example of the tool being used for selection from a large list.

update (2004-12-02): Thanks to Bruno Henry of UPS France for pointing out that the script does not initialise pre-selected items correctly in IE. This was because of this bug here. The script has been corrected to reflect this.

update (2004-12-16): Thanks to Cameron for his interesting method of defining whether a select box is multiple or not. It has been incorporated.

new irish plans (a construction industry thing)

We’ve just released, a site for finding commencement notices. This is extremely useful for people in the construction industry, as I’ll explain.

Companies that work in construction need to be constantly on the lookout for new projects that are starting up. If you find a project just before it starts, you can call up and advertise your business, instead of waiting for the project manager to get around to finding someone else when the time comes.

As an example, if you sell bricks, it is better to call the manager of a house-building project just before they start building the house, than to not call at all, and realised when the house is built that the manager found a different brick supplier and didn’t realise you even existed.

You need to time the call as well – if you call too late, it’s obviously too late, but if you call months before the project starts, then the manager may totally forget you exist by the time the build actually needs your wares.

One way to find these builds that are starting up is to go around to all the planning authorities in your area of interest, and inspect any “commencement notices” that have been submitted since the last time you visited. A “commencement notice” is notification that you are about to start work on your build. All planning applications have this as a requirement.

Obviously, this can take hours out of your working week (and therefore, money), and even after you have the notice, you need to match the notice to the application and see if you’re actually interested in it at all.

The new irish plans project does this all for you. At the moment, the project covers about 17 counties, but we are always adding to this. For example, I’m working on getting Fingal added to the mix at the moment.

An account on the site costs 35 euro a month, and with that, you get an email once a week telling you of any commencements that the system has uncovered during that week.

But anyway – €35 euro a month. Just over one euro a day, and it’s all emailed to you.

If you know anyone in construction (does windows, landscapes, roofs, electrics, etc.) that is looking for work, tell them to go to – the information is handed to you on a plate.

On the programming side, we wanted to make the search engine stand out, so we used the inline multiselect jQuery plugin (with a few small modifications) to help make selection of features and dates easier.

When I first came across that plugin, I was surprised and kinda proud to find that it’s based on some of my own work from 5 years ago! Open source is brilliant – you write a small piece of code and give it away, then 5 years later you find that someone has taken it and improved it vastly.

Commencements go through a “vetting” process. When a commencement is found, details about it are placed in a system where someone reads through the planning application, and marks down any interesting features about it. Those that have been vetted are then imported once a day into the main site itself, where you can search for them online, filtered by whatever interests you.

The system has been very long in the building, and has changed quite a bit over time. We’re very happy to finally make it public!

There’s still a few things that need to be completed on it (for example, we’re still organising WorldPay integration, but in the meantime we have PayPal), but on the whole, it’s ready for public use.

inline multi-selects

I just came across this project while looking through referers to this site.

Inline multi-selects – the examples show exactly what is meant – what a brilliantly usable way to select options! I’ve never thought of doing anything like that before. It’s human-readable, and much more friendly than the usual selectbox method.

What’s particularly usable about it is that the selected items are presented as an inline list using natural human language (English for example), instead of a long list with some options ticked.

And I was impressed with myself to see that I might have helped influence it, as my own multi-select widget from 4 years back is referenced.

Cool work, bjorsq (you?), and I /know/ that I will be using that one. I can already imagine using it to select what mailinglists I would want to send an email to (my latest PHP&jQuery project – yet to be properly announced)

dynamically loading external JavaScripts with AJAX

I have a lot of JavaScript in my sites. In order to allow the user to view the site without having to download hundreds of K of scripts, though, I need to split the scripts up into many different files.

The files load upon certain conditions. For example, my multiselect code is only invoked when the document contains a <select> box, and my shopping cart code is only invoked when there is an element in the page with the class shoppingcart (btw: that’s a funky shopping cart, I think you’ll agree 😉 ).

So – I needed a function that could dynamically load the scripts that I need.

Up until today, I did this by adding a script element to the head of the document, but I found that this method crapped itself when I tried it in Konqueror.

I hit on the idea of loading up the code with AJAX, then using eval() to activate the code.

Here is the function I had:

var loadedScripts=[];
function loadExternalScript(url){
  var r=new XMLHttpRequest();'GET',url);
      var script=r.responseText;

I tried that out, with some alert()s placed in the external scripts to prove the files were being loaded, and that was fine.

Then I tried to run functions from those scripts… I got errors that they did not exist!

It turned out that the eval() from that function was running the code from the scripts with a scope local to that function – so when the context left the function, the external scripts were scrubbed from memory.

So – a quick think later, and I came up with this amendment:

function loadExternalScript(url){
  var r=new XMLHttpRequest();'GET',url);
      var script=r.responseText.replace(/function ([^\( ]*)/g,'window.$1 = function');

Note that this will affect all functions in the included script, including those which were intended to be used as class methods (I don’t do classes). Note also, that global variables will need to be addressed – but you get the idea.