1. #1
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default DomHelper builds bad HTML for Select options in IE

    DomHelper builds bad HTML for Select options in IE


    Using the following sample, the select list is correctly built in FF, but not in IE. The option tags are getting appended to the the dom as 'value</OPTION>'. The rest of the tag is being dropped. Stepping thru insertHtml(), the html is correctly passed and it's doing the correct el.insertAdjacentHTML('beforeed', html), but el.dom shows a misconstructed innerHTML value.

    I've tried this a few different ways and it's always wrong. I thought maybe this was related to the prevous IE template bug that was patched, but it fails with the patched version too.
    Code:
    <html>
    <head>
    	<script type="text/javascript" src="/yui/build/utilities/utilities.js"></script>
     	<script type="text/javascript" src="/yui-ext/yui-ext.js"></script>
    	<link rel="stylesheet" type="text/css" href="/yui-ext/resources/css/yui-ext.css"/>
    
    <script type="text/javascript">
    var test = {
        init: function() {
    		var tpl = new YAHOO.ext.DomHelper.Template('<option value="{0}">{1}</option>');
    		tpl.append('ddRefreshDb', [0, '-- Select --']);
    
    		var opt = ['One','Two','Three','Four'];
    
    		for (var i=0; i<opt.length; i++) {
    			tpl.append('ddRefreshDb', [i+1, opt[i]]);
    		}
    
    		var x = getEl('ddRefreshDb').dom.innerHTML;
    		alert(x);
        }
    };
    
    YAHOO.ext.EventManager.onDocumentReady(test.init, test, true);
    </script>
    </head>
    <body>
    	<div style="border:solid 1px red; width:200px;height:200px;padding:50px;">
    		<select id="ddRefreshDb" name="ddRefreshDb" style="float:left;margin:0 10px;width:125px"></select>
    	</div>
    </body>
    </html>

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Inserting options into selects is not supported. IE does not support it.

  3. #3
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by jacksloc
    Inserting options into selects is not supported. IE does not support it.
    Perhaps we just have a diffferent understanding of how it's done. I've got a couple of working examples of dynamically populating selects with both options and optgroups with options.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Yeah once again, IE sucks. Not worth hacking a special case into DomHelper for this either - just do it the regular way.
    Code:
    var opt = ['One','Two','Three','Four'];
    var dd = getEl('ddRefreshDb).dom;
    
    for (var i=0; i<opt.length; i++) {
       dd.options.add(new Option(opt[i], i));
    }

  5. #5
    Sencha - Community Support Team JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
    JeffHowden is on a distinguished road

      0  

    Default


    Quote Originally Posted by tryanDLS
    Yeah once again, IE sucks. Not worth hacking a special case into DomHelper for this either - just do it the regular way.
    Code:
    var opt = ['One','Two','Three','Four'];
    var dd = getEl('ddRefreshDb).dom;
    
    for (var i=0; i<opt.length; i++) {
       dd.options.add(new Option(opt[i], i));
    }
    I guess I need to dig alittle deeper into DomHelper then to find out what specifically it's trying to do when inserting options. I've got some fairly standard code that works just fine so I suspect that maybe it's not necessarily an IE issue specifically.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    It's not doing anything different than what it does for other elements. the DOM insertAdjacentHTML method doesn't handle Option insertion into a SELECT in IE.

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    IE doesn't support any HTML injection with selects. Sorry, I should have been a little clearer.

  8. #8
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,176
    Vote Rating
    119
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    I came across this same issue on Friday. I ended up just using the Option constructor and options.add too. Works in IE and FF and seems to be W3C standards compliant.

  9. #9
    Ext User
    Join Date
    Jun 2008
    Location
    Seattle
    Posts
    1
    Vote Rating
    0
    skpajther is on a distinguished road

      0  

    Default adding to a select okay, adding the select bad

    adding to a select okay, adding the select bad


    Hi guys,

    I am new to this forum and could really appreciate your help with something. I am working on a Google Sky application for the University of Washington Department of Astronomy.
    OK so when a user types in an incorrect address, we give them a handy "did you mean..." list. You may find my site here. The code I am wondering about is here:
    Code:
    //pans above the address the user typed in
    function panAboveAddressMulti(){
    //make the top bar visible
    document.getElementById("TopBar").style.width = 640;
    document.getElementById("TopBar").style.height = 23;
    if (!response||response.Status.code200) {
    //reponse.Status.code=200 means at least one address was found
    document.getElementById("TopBar").innerHTML = "Sorry, we were unable to find that address.";
    document.getElementById('addressInputField').focus ();
    }
    else {
    if(response.Placemark.length==1)
    //address found immediately
    addressFound({address: response.Placemark[0].address,
    dec: response.Placemark[0].Point.coordinates[1],
    ra: lon2ra(response.Placemar[0].Point.coordinates[0])
    });
    else {
    //prepare the list
    var list = document.createElement("select");
    for (var i=0; i<response.Placemark.length; i++) {
    var place = response.Placemark[i];
    var temp = document.createElement('option');
    temp.text = place.address;
    //a hack to allow the options to carry non-html information
    temp.setAttribute("id", place.address);
    temp.setAttribute("value", place.Point.coordinates[1]); //dec
    temp.setAttribute("label", lon2ra(place.Point.coordinates[0])); //ra
    temp.setAttribute("onClick", "addressFound({address:this.id,dec:this.value,ra:t his.label});");
    try {
    list.add(temp,null);
    }
    catch(ex) {
    list.add(temp); // IE only
    }
    }
    //paint the list in the top bar
    document.getElementById("TopBar").innerHTML = "Address not found. Did you mean ";
    document.getElementById("TopBar").appendChild(list );
    document.getElementById("TopBar").innerHTML += " ?";
    }
    }
    });
    }
    }
    OK wow sorry if this is really annoying to read. But basically I know place.address is working fine, and all of this works perfectly in FFX. But for some reason, when IE paints the list into TopBar, the options are numbers instead of Strings representing the addresses. Does anyone know why IE is doing this?
    Last edited by mystix; 7 Jun 2008 at 6:39 AM. Reason: use [code][/code] tags

Similar Threads

  1. Possible to rectangular select marquee for multiple select?
    By ryes540 in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 15 Mar 2007, 12:18 PM
  2. Use of Ext Element: adding /replace options in a select box?
    By Wolfgang in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 7 Mar 2007, 3:32 PM
  3. Thoughts on commercial options.
    By PortraitPainter in forum Community Discussion
    Replies: 4
    Last Post: 12 Feb 2007, 12:00 PM
  4. 0.33 beta 3 DomHelper fails to insert html with IE
    By moedusa in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 8 Nov 2006, 4:58 AM

Thread Participants: 4

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi