ExplodeBox

I wrote an "ExplodeBox". It's a select list that contains all the data from multiple text inputs. So say you wanted to make a list of your computers and their properties. This is for exactly that scenario. You input the computer's information into the text inputs, hit "add", and it is all stored away in one of the select's <option> objects.

To use ExplodeBox, you name all your elements using a baseId. So for instance, one of your text inputs might be named "ebtest_ipAddress", with "ebtest_" being an example common prefix for all the form fields you want associated with the ExplodeBox. You can name the text inputs anything you wish, as long as you use the prefix. For the select box, the add button, and the remove button, they have to have specific names. The select box must be named "ebtest_box", the add button "ebtest_add", and the remove button "ebtest_remove" (with "ebtest" standing for whatever your prefixId is).

Clear as mud? Without further ado, here's the code:

            /*
             * ExplodeBox!
             * 
             * Have a select list that breaks out data into sub-fields for editing.
             */
            var ExplodeBox = function(baseId, parts) {
                this.baseId = baseId;
                this.boxId = 'select#'+ baseId +'_box';
                this.addId = 'input#'+ baseId +'_add';
                this.removeId = 'input#'+ baseId +'_remove';
                this.cancelId = 'input#'+ baseId +'_cancel';
                
                this.partIds = [];
                for (var i = 0; i < parts.length; i++) {
                    this.partIds.push('#'+ this.baseId +'_'+ parts[i]);
                }
                               
                var box = this;
                $(this.addId).click(function() {
                    box.addEditItem();
                });
                $(this.boxId).change(function() {
                    box.showItem();                
                });
                $(this.removeId).click(function() {
                    box.removeItem();
                });
                $(this.cancelId).click(function() {
                    box.cancelEdit(); 
                });
            }
            
            ExplodeBox.itemIndex = 0;
            ExplodeBox.prototype.addEditItem = function() {
                var box = $(this.boxId);
                var addMode = ($(this.addId).val() == 'add');
                            
                var opt = null;
                if (addMode) {
                    box.append(''+ $(this.partIds[0]).val() +'');
                    ExplodeBox.itemIndex++;
                    
                    opt = $(this.boxId +' option:last');
                }
                else {
                    opt = $(this.boxId +' option:selected');
                    opt.text($(this.partIds[0]).val());
                    $(this.cancelId).hide();
                }
                
                for (var i = 0; i < this.partIds.length; i++) {
                    opt.data(this.partIds[i], $(this.partIds[i]).val());
                }
                                
                if (addMode)
                {
                    for (var j = 0; j < this.partIds.length; j++) {
                        $(this.partIds[j]).val('');
                    }
                }
            }
            
            ExplodeBox.prototype.cancelEdit = function() {
                $(this.boxId).val('');
                $(this.addId).val('add');
                $(this.cancelId).hide();
                
                for (var j = 0; j < this.partIds.length; j++) {
                    $(this.partIds[j]).val('');
                }                               
            }
            
            ExplodeBox.prototype.showItem = function() {
                var opt = $(this.boxId +' option:selected');
                                        
                for (var i = 0; i < this.partIds.length; i++) {
                    $(this.partIds[i]).val(opt.data(this.partIds[i]));
                }  
                 
                if (opt.length == 0) {
                    $(this.addId).val('add');
                    $(this.cancelId).hide();
                }
                else {
                    $(this.addId).val('save');
                    $(this.cancelId).show();
                }
            }
            
            ExplodeBox.prototype.removeItem = function() {
                $(this.boxId +' option:selected').detach();
                
                for (var j = 0; j < this.partIds.length; j++) {
                    $(this.partIds[j]).val('');
                }
            }
            /* End ExplodeBox */
           
           Page.explodeBox = new ExplodeBox('ebtest', ['hostname', 'ipAddress', 'purchasedDate', 'description']);

Light Peak

It sounds pretty cool. Fast transfer speeds, and new universal bus for everything to plug into, but will it catch on? No one really needs 100 gigabit transfer speeds. That's faster than a hard drive can copy. Where I can see it really taking over is as a networking standard, surpassing ethernet. But in any case, I do hope that Apple puts either USB 3.0, eSATA, or Light Peak on the new MacBook Pros (not that i can afford one right now... anyone want to hire me?)

selenium and windows

running selenium tests from linux on windows is a little difficult. first, the easy step: open port 4444 through your windows firewall. second step, download the slenenium jar to your windows machine, and run it with -trustAllSSLCertificates. next step, download all your browsers. safari, chrome, you'll have ie... then you go over to your linux box, go to eclipse, do run as > testng test.... and watch everything fail! using ie (either *iexplore or *iexploreproxy or using *custom) you'll get an "access is denied" javascript error for each selenium call. not very useful. *firefox will work just fine out of the box. *safari won't work, but using *custom to safari will work great on non-https. same for *googlechrome or *custom for google chrome. you have to remember to always set your proxies for the browsers to be 127.0.0.1:4444 before you run your tests.

more as i figure stuff out.

---

so if you run selenium server as administrator, you can get further with ie. firefox will continue to work, chrome and safari will continue to fail, but *iehta works if you run selenium server as administrator.