Why is this jQuery function throwing an error in IE8-9?

Question

I'm building an open-source web-application that navigates ancient documents for online publication (in action at http://ocp.tyndale.ca/testament-of-abraham ). It includes one function that adds a new column to the text display by inserting a <div> dynamically. (The function is triggered by clicking on the grey-circle in the right-hand margin with the white plus-sign on it.)

This works nicely on all browsers except IE (even 8 and 9), where it throws an error. Since there's nothing like firebug for IE I'm having a heck of a time figuring out what's causing the error. (It doesn't help that I'm not a professionally trained programmer--I'm an academic who has picked javascript up piecemeal over the years). Here's the function that seems to cause the problem:

function addVersion(){
  //count the current columns
  var versionCount = $('.versionColumn').size();
  //make sure there are not too many columns for the window width
  if(versionCount > 5){
    alert('Sorry, the maximum number of columns is already open!');
  }
  //insert another column
  else{
    var oldMax = $('.versionColumn:last').attr('id');
    oldMax = oldMax.substr(1,1);
    newMax = parseInt(oldMax)+1;
    $('.versionColumn#v'+oldMax).after('<div id="v'+newMax+'" class="versionColumn"><div class="versionHeader"><form><select class="versionSelector"></select></form><a class="versionCloserLink" href="#" title="Click to close this language version"></a></div><div id="c'+newMax+'" class="containerCell"><div id="tt'+newMax+'-1" class="textType"><div id="n'+newMax+'-1" class="msNavRow"><form><select class="msSelector"></select></form><a href="#" class="msCloser" title="Click top close this text type"></a></div><div id="dd'+newMax+'-1" class="msDisplayRow"><img src="sites/all/modules/bookDisplay/images/ajax-loader.gif" /><div class="textScroller" id="ts'+newMax+'-1"></div></div><div id="h'+newMax+'-1" class="textHandle"></div></div><div class="textAdder"><a class="textAdderLink" href="#" title="Click to add another text type"></a></div></div><div id="a'+newMax+'" class="apparatusCell"><div id="ah'+newMax+'" class="apparatusHandle"></div><table class="apparatusTable"><tr class="apparatusHeaderRow"><th class="apparatusHeader"><span>Text Types</span></th><th class="apparatusHeader"><span>Reading</span> <a class="apparatusToggle">X</a></th></tr></table><span class="apparatusLabel">Click on a section of blue text to view available textual variants for those words.</span></div></div>');
    setVersionSelectors();
    setTableWidth();
    var fontCookie = parseInt($.cookie('text_size'));
    $('#v'+newMax+' .textScroller').css('font-size', fontCookie);
  }
}

Can anyone see what might be causing the error? If not, do you have any suggestions about how to debug javascript in IE?

PS The culprits don't seem to be the functions setVersionSelectors() or setTableWidth() since these are called when the page initializes and don't throw errors at that point.

Thanks!

Answer 1

try switching .size() to .length which is the preferred method anyways. and have you tried a more straightforward clone?

$('.versionColumn:last').clone().attr('id','v'+($('.versionColumn).length+1)).appendTo('#parentElementIDOrSelectorHere');

or (!untested)

$('.versionColumn:last').clone().attr('id','v'+($('.versionColumn).length+1)).appendTo($(this).parent());

Answer 2

Use the IE Developer Tools (under Tools menu, or F12) to debug in IE.

I checked and found that in the code above the "fontCookie" variable gets set to NaN, so that causes problems when trying to set the font-size to a value that is not a number. This line

var fontCookie = parseInt($.cookie('text_size'));

needs to be investigated to see why the variable is not getting populated as you expect in IE. Perhaps you need logic to default to a set number for visitors who don't have a cookie.