Category: Jquery

Categories
HTML Javascript Jquery Programming

Updated Table

I’ve spent these last few days refactoring and improving the table component over at Clickschool. It now renders the data over 20% faster than before and has increased functionality.

The improvements have largely been achieved by removing non-essential elements from the page and completely changing how events are handled when using the keyboard or mouse to navigate the table.

Yes I could have used a pre-made component, but where’s the fun in that? And would it have the functionality I wanted?

The table has editing capabilities (with control over which cells can or can’t be edited), validation and split navigation -just to name a few features.

It’s not supposed to act entirely as a spreadsheet but designed for specific tasks. It is all built from HTML elements but I guess for maximum flexibility you’d probably want to use the canvas.

I’m pretty pleased with it. It does what I need it to do at the moment.

Categories
HTML Javascript Jquery

JQuery SELECT selectedIndex solution

I swapped what I thought would have been a restful afternoon after looking at A-Level projects with fixing a minor irritating problem with forms.

The problem: JQuery does not copy across the ‘selectedIndex’ of SELECT elements when using clone() or makeArray. In fact it does not appear to copy anything from SELECT elements at all. See https://bugs.jquery.com/ticket/9997

It does however clone values from INPUT and TEXTAREA elements.

Because of the way I traverse through records on a dynamic form to generate JSON data, I needed to implement a solution.

It might not be the best way, but for the time being I simply add a corresponding hidden INPUT element with the same key field as the SELECT element which is used to mirror the value of SELECT. When traversing the ‘records’ it ignores the SELECT values and picks up the value from the hidden INPUT instead. And Voila.

So something initially like this (excuse the rubbish variable names, I know)

Then something like this on the blur event:

Hopefully you get the idea…