#87 ✓invalid
Jason Borden

Element.insert issues adding Element in IE

Reported by Jason Borden | May 9th, 2008 @ 01:17 AM

A problem I ran into occurred when trying to insert an option element to a select element in IE. e.g. $('selectelement').insert(new Option('Option')); The issue seems to be present in IE 6 and 7, but not in firefox 2 or konqueror (I haven't tried others). It seems to create a option, but not containing any text in IE. I'll attach a sample html doc that shows the problem. Using prototype-1.6.0.2.js as prototype.js

Comments and changes to this ticket

  • John-David Dalton

    John-David Dalton May 10th, 2008 @ 12:12 AM

    Are you using some other framework or Builder?

    I don't recognize your syntax.

  • Juriy Zaytsev

    Juriy Zaytsev May 10th, 2008 @ 01:18 AM

    • State changed from “new” to “invalid”

    YAIEB (yet another IE bug)

    This page explains the issue: http://www.propertymaps.com/blog...

    in a nutshell: "appendChild" fails while "add" works, but "add" has its own problems. I'm not sure if we should "fix" this, as there are a couple of alternatives to accomplish this:

    .insert(new Element('option').update('foo'));
    .insert('<option>foo</option>');
    
  • Tobie Langel

    Tobie Langel May 10th, 2008 @ 01:01 PM

    Anyone located the specs for new Options ?

  • James Gurney

    James Gurney July 3rd, 2008 @ 02:37 AM

    • Tag cleared.

    I'm not sure if this is a bug or not, but I'm running into the same exact problem when attempting to update an element which has been inserted by prototype. This only happens in IE (6 and 7). It works fine in Firefox (2 and 3).

    <form id="testForm">
    <input type="button" id="updateButton" value="Click me">
    </form>
    
    document.observe("dom:loaded", function() {
    	selectElement = new Element('select').update(new Element('option', {'value' : 0}).update('This is the first option'));
    	$('testForm').insert({top: selectElement});
    
    	addNewValue = function() {
    		selectElement.insert(new Element('option',{'value' : '1'}).update('This is a new option'));
    	}
    
    	$('updateButton').observe('click',addNewValue);
    });
    

    I've tried to simplify the test case as much as possible. Creating the select element in the html fixes the problem. Simply performing the insert() outside of the event also fixes the problem.

    This is with prototype 1.6.0

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Attachments

Pages