Script works in all browsers but IE

[jman78]

On the webpage I have a button (image link) that runs a javascript command to add a row to my table form.

 <a onClick="addRow(<%= @num_variants %>); return false;"><%= image_tag 'pages/classifieds/add-additional-row.png' %></a>

Here is the applicant javascript:

function addRow(fields) {
  var targetTable = document.getElementById("listing_table");
  var newRow = targetTable.insertRow(-1);
  var tableRows = targetTable.getElementsByTagName("TR").length - 2;  
//account for headings and example rows

  var newCell = newRow.insertCell(0);
  newCell.innerHTML = '<span class="red">*</span>'+tableRows;

  for(i = 0; i < fields; i++) {
   cell = i + 1;
   var newCell = newRow.insertCell(cell);
    newCell.innerHTML = '<input type="text" name="option['+tableRows+']['+i+']" id="option['+tableRows+']['+i+']" value="" />';
    eval("option"+tableRows+""+i+"= new LiveValidation('option["+tableRows+"]["+i+"]')");
    eval("option"+tableRows+""+i+".add( Validate.Presence )");
  }

  i = fields + 1;

  var newCell = newRow.insertCell(i);
  newCell.innerHTML = '<input id="quantity['+tableRows+']" name="quantity['+tableRows+']" type="text" class="split_text_quantity" value="" />';
  i++;

  var newCell = newRow.insertCell(i);
  newCell.innerHTML = '$<input id="price_dollars['+tableRows+']" name="price_dollars['+tableRows+']" type="text" class="split_text_dollars" value="" />.<input id="price_cents['+tableRows+']" name="price_cents['+tableRows+']" type="text" class="split_text_cents" value="" /><a id="remove[\''+tableRows+'\']" href="#" onclick="removeRow(this.parentNode.parentNode.rowIndex,'+fields+');">[Remove]</a>';
  //newCell.innerHTML = '$<input id="price_dollars['+tableRows+']" name="price_dollars['+tableRows+']" type="text" class="split_text_dollars" value="" />.<input id="price_cents['+tableRows+']" name="price_cents['+tableRows+']" type="text" class="split_text_cents" value="" /> <a href="#" onclick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex );">[Remove]</a>';
  i++;

  eval("qty"+tableRows+" = new LiveValidation('quantity["+tableRows+"]');");
  eval("qty"+tableRows+".add( Validate.Presence );");
  eval("qty"+tableRows+".add( Validate.Numericality, { onlyInteger: true } );");
  eval("price_d"+tableRows+"= new LiveValidation('price_dollars["+tableRows+"]', { insertAfterWhatNode: \"remove['"+tableRows+"']\" } );");
  eval("price_c"+tableRows+"= new LiveValidation('price_cents["+tableRows+"]', { insertAfterWhatNode: \"remove['"+tableRows+"']\" } );");
  eval("price_d"+tableRows+".add( Validate.Presence );");
  eval("price_c"+tableRows+".add( Validate.Presence );");
  eval("price_d"+tableRows+".add( Validate.Numericality, { onlyInteger: true } );");
  eval("price_c"+tableRows+".add( Validate.Numericality, { onlyInteger: true } );");

}

Anyone see something I missed?

Thanks!

Jason

 

[BillyRayPreachersSon]

- Do you see any JS errors? If so, what are they?

- Can you post a URL? Trying to work through that code is painful.

- Why do you have so many calls to eval when so many of them (if not all) are unnecessary?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[jman78]

no JS errors - I took out the semicolons inside the eval statements.

I used eval because I'm adding a javascript validation object to each input. The inputs are set up in an object array and eval was the only way I could see to pass the required information.

I used multiple eval calls cause it was easier to read. I could combine all of those into one or 2, but I don't think that is the issue.

Can't do an URL now, its on a development server.

I actually got it down to this -

When you add an element with an onclick event via innerHTML, IE disables the onclick. Apparently its a 'feature' - not one I'd want, but ...

I *think* I can go back after the fact and use addEvent() to add the onclick event handler back to the anchor tag.

 

[BillyRayPreachersSon]

I used eval because I'm adding a javascript validation object to each input. The inputs are set up in an object array and eval was the only way I could see to pass the required information.

I suspect you can still remove the need to use so many calls to 'eval', for example you could replace this:

eval("option"+tableRows+""+i+"= new LiveValidation('option["+tableRows+"]["+i+"]')");

with this:

var tempValidator = window['option' + tableRows + i] = new LiveValidation('option[' + tableRows + ][' + i + ']');

and then this:

eval("option"+tableRows+""+i+".add( Validate.Presence )");

with this:

tempValidator.add(Validate.Presence);

avoiding the need for two calls to eval.

Obviously the later called to eval can also be replaced in the same way.

The first replacement works as the window object is the global (or top-level) object in JavaScript. So, all global variables are actually properties of the window object.

For example, if I had a global variable, 'bob', when you ask for 'bob', the JS engine will look for window['bob']. Yes, you could also ask for window.bob, or window['bob'], but 'bob' is much shorter and more convenient.

It's the same thing with global methods... how many times have you seen alert(123) instead of window.alert(123) or window['alert'](123)?

So, in the same way that you can read global variables via the window object, you can also set them. For example, this:

window['bob'] = 7;
window.fred = 8;

would create two global variables, bob and fred.

Now, I don't have any up-to-date stats on whether eval is a much slower way of doing things in modern browsers with much faster JS engines, but certainly historically it has been frowned upon if alternative ways were available to achieve the same goal.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign