Tuesday, December 30, 2014

<SELECT> with <OPTGROUP> doesn't have .remove() implemented [IE9+]

I found this semi-official link (because it's part of Microsoft.com, but a forum of sorts)

TL;DR - my way
var opts = selectControl.options;//I was doing other stuff with the options
opts[deleteIndex].parentElement.removeChild(opts[deleteIndex]);
 
The above was modified based on what was contributed by Abhisek Gupta:
selectControl.options[deleteIndex].parentElement.removeChild(selectControl.options[deleteIndex]); 
The explanation was something about .remove() not being in ECMAScript to begin with...

The root of the solution is to use .removeChild() but this one-liner is slightly more elegant:
  1. retrieve the HTMLOptionElement from its HTMLSelectElement;
  2. call its parent; in other words, our offending HTMLOptGroupElement;
  3. instruct for it to removeChild;
  4. pass in part 1. as argument to part 3.
You can alternatively check this other link.

Additionally, I wanted to detect for the presence of HTMLOptGroupElement. I added this to check:
function hasOptGroups(selObj) {
    if(selObj instanceof HTMLSelectElement) {
        var selCN = selObj.childNodes;
        if(selCN && selCN.length > 0) {
            for(var x=0;x<selCN.length;x++) {
                if(selCN[x] instanceof HTMLOptGroupElement) {
                    return true;
                    break;
                }
            }
        }
    }
    return false;
}



This way, I still get to use the original .remove() if there are no <OPTGROUP>'s present.

Monday, December 22, 2014

External Maxtor hard disk failed

I have a Maxtor OneTouch 1TB connected to my router as a NAS. So while trying to access it earlier, it couldn't be connected to successfully. The router browser UI showed the drive mounted but didn't show any read/write permissions like it used to.

I connected its USB to my laptop directly. Windows Explorer was able to display the drive (F: in my case here) but complained of the drive "File or directory is corrupted  or unreadable". My heart sank. Until I found this lifesaver. Most of the suggestions linked to shady blogs which I felt reluctant to try. Until I scrolled down to the solution suggested by kwagalamoshe.

Hello,

Try this 1

Click on Start --> Run --> Type cmd and press Enter.

"Command Prompt" will be opened.

Since you are having problem with G & H drivers, enter the below command

chkdsk /f g: --> Press Enter.

chkdsk /f h: --> Press Enter.

Good Luck 

It seemed straightforward enough, and it was utilising a system tool. No harm trying, so I decided to give it a shot. And it totally worked! CHKDSK was able to recover the filesystem with a couple of fixes to repair whatever was damaged.

I'm glad I found this solution but was surprised at the lack of information anywhere else. If you ever encounter anything similar, give CHKDSK a shot first (assuming you can still see the drive in Windows Explorer, hopefully). Good luck!

Thursday, December 18, 2014

Starhub TV and Fibre Termination

For the record, I called Starhub (1633) to ask what exactly do I have to return, if I want to cancel my Fibre Broadband and TV subscriptions.

The prompt reply:
  • Starhub Cable TV
    • Set-top box;
    • Power supply;
    • Remote;
    • and RCA cable (the one with the white-red-yellow connectors)
  • Starhub Fibre Broadband
    • Optical Network Terminal (likely Nucleus brand, white box);
    • Power supply;
    • and optic fibre cable (yellow, with green ends, connected to the wall terminal)
These items have to be brought to one of their Customer Service Centre outlets to be returned.

Tuesday, December 2, 2014

Select tab by its name to display as active for jQuery Tabs widget

There is a widget in the jQuery UI library known as "Tabs". Quite simply, it can be used to display tables in multiple tabs. I had the opportunity to figure out how to programmatically trigger a specific tab to be the currently active one to be displayed.

Here's what you need
  • the use of Active option
  • locating the tab by name like this
The HTML snippet is as follows:

<div id="tabs">

  <ul>
   <li><a href="#actionTab1"><span>One</span></a></li>
   <li><a href="#actionTab2"><span>Two</span></a></li>
   <li><a href="#actionTab3"><span>Three</span></a></li>
 </ul>
</div>
The script snippet is as follows:
<script>
//search tab index for value matching specific tab
var displayTab = $('#tabs a[href="#actionTab2"]').parent().index();
$("#tabs").tabs({active: displayTab});
</script>


In accommodating our server-side logic, a modification was done thus,

//variable set from server

var displayTab = $('#tabs a[href="#${svTab}"]').parent().index();

And because it may fail to find the item and return -1,

var displayTab = $('#tabs a[href="#actionTab2"]').parent().index();

if(displayTab == -1) {
  displayTab = 0; //default to first tab
}


"A negative value selects panels going backward from the last panel."

The final version I used:

<script>
//search tab index for value matching specific tab
var displayTab = $('#tabs a[href="#${svTab}"]').parent().index(); 

if(displayTab == -1) {
  displayTab = 0; //default to first tab
}
$("#tabs").tabs({active: displayTab});

</script>

In short:
  1. Identify the <div> of the tab heading,
  2. Filter for its <a> children with the matching href attribute,
  3. Return the (zero-based) index of the parent <li>
  4. Create a JSON object setting the index into the name "active"
  5. Call the widget with the JSON object as the argument
It is possible to simply call Tabs with {active: 1} but I felt that it was more readable to be able to search and set the index value according to the tab name instead, so that it can work even if the tab items get rearranged.

And that was it. Have fun!