SkeyMedia

YSlow is an add-on for the popular FireBug add-on for the popular browser, FireFox. Confused?

It has neat tools to help you to improve your site’s load times, and rates you accordingly. I scored an F on my blog. haha

Check it out: YSlow

I got an email tonight to take some free online tests. I took a couple, and scored pretty high in many areas, as I expected to, but also got stumped on a couple of the performance related issues (as I rarely deal with them). It’s fun to see how you compare to others who have taken the same test.

You can view my complete transcript here:

Brain Bench Transcript

I recently spent a lot of time debugging this code i was working on for what I thought would be a simple onchange event.

The Issue:
I have sizes and colors, but not all sizes are available in all colors, so onchange of the color select box, i need to load the correct size options select box.

Between a lot of back-end manipulation, I was able to create my front-end JS arrays of colors with the sizes that are available. I ran into the issue that my passed in variable to the function was becoming the array, instead of calling the array.

For example, If I passed in “BLK” for Black, I was getting:

array[0] =>B
array[1] =>L
array[2] =>K
array[N] => undefined

where the Nth options looped through undefined until my for loop for the options of my color box’s length had been reached.

The Solution:
After scratching my head for hours and trying 232132 things, It turns out all I needed to do was to use the eval() function to evaluate my variable first, instead of treating it like a literal string.

Here’s the completed working source:

function popsizes(colorcode) {

var BLK= ["2XL","3XL","4XL","5XL","LG","MD","SM","XL","XS"];
var WH= ["LG","MD"];
// etc, many more color arrays

elem = document.getElementById("selcolor");
sizelist = eval(colorcode);

for (i=0; i<elem .options.length; i++) {
  document.getElementById("selsize").options[i] = new Option(sizelist[i]);
}
}

That script is powered by the onchange event from the form:

<tr>
  <td>
    <select "id="selcolor" name="color" onchange="popsizes(this.options[this.selectedIndex].value);">
      <option value="WH">White</option>
      <option value="BLK">Black</option>
      <option value=""> Many more colors, etc .... </option>
    </select>
  </td>
  <td>
    <select "id="selsize" name="size">
      <option value="">Select Color First</option>
    </select>
  </td>
</tr>