webForumDet fria alternativet
Logga in

JS-genererad HTML kan inte manipuleras i IE

6 svar · 520 visningar · startad av stephan

stephanMedlem sedan feb. 2006117 inlägg
#1

Jag skapar upp några divar med hjälp av JavaScript när sidan laddas. Divarna har en prioriteringsordning. När sidan har laddat klart så kan användaren sen själv lägga till fler divar med hjälp av knappar, och positionen de läggs till på baseras på deras prioordning jämfört med de existerande.

För att ta reda på var de ska läggas in hämtar jag in alla divar som är uppskapade. Problemet är då att Internet Explorer inte verkar "se" de divarna som är uppskapade av JavaScript. Det syns i webbläsarfönstret för användaren, men när man kör typ getElementsByTagName så hittar inte IE dem.

Finns det någon "workaround" för detta?

Funkar bra i FF, Safari, och faktiskt i IE8 (men inte IE7).

nitro2k01Medlem sedan aug. 20039 342 inlägg
#2

Exempelkod?
Om du modifierar koden med innerHTML (Vilket du ska försöka undvika) kan det vara så att du har glömt att stänga vissa taggar eller gjort andra fel?

TroxyMedlem sedan mars 20041 505 inlägg
#3

Skapa nya element med DOM-metoder istället.
IE är dålig på att känna igen nya element som man petar in med innerHTML.

stephanMedlem sedan feb. 2006117 inlägg
#4

Kodexempel nedan... Använder inte innerHTML.

Tydligen var min kod för lång, så ja fick dela upp den i 2 postningar...

Det väsentliga är stycket med följande kod:

var v_sektioner = getElementsByClassName("sektion");
alert(v_sektioner.length);

Det är inget fel på getElementByClassName-funktionen. Jag har testat med andra metoder för att hämta in elementen. Bl.a. med ramverket Ext JS.

Som sagt, funkar bra i FF, Safari och IE8, men inte i IE7.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
        <title></title>

                <script type="text/javascript">
            /*        	<![CDATA[ */

			// test-data
            var v_blankettexter = {
                "sektioner": [{
					"nummer": "0",
					"namn": "Inledning",
                    "texter": [{
						"nummer": "0",
                        "text": "Det här är sektion 0 blankettext 0 <br/>[fritext]",
                        "obligatorisk": "nej",
						"fritext": "ja"
                    }, {
						"nummer": "1",
                        "text": "Det här är sektion 0 blankettext 1",
                        "obligatorisk": "nej",
						"fritext": "nej"
                    }, {
						"nummer": "2",
                        "text": "Det här är sektion 0 blankettext 2",
                        "obligatorisk": "nej",
						"fritext": "nej"
                    }]
                }, {
					"nummer": "1",
					"namn": "Beslut",
                    "texter": [{
						"nummer": "0",
                        "text": "Det här är sektion 1 blankettext 0",
                        "obligatorisk": "ja",
						"fritext": "nej"
                    }, {
						"nummer": "1",
                        "text": "Det här är sektion 1 blankettext 1",
                        "obligatorisk": "ja",
						"fritext": "nej"
                    }, {
						"nummer": "2",
                        "text": "Det här är sektion 1 blankettext 2",
                        "obligatorisk": "nej",
						"fritext": "nej"
                    }]
                }, {
					"nummer": "2",
					"namn": "Motivering",
                    "texter": [{
						"nummer": "0",
                        "text": "Det här är sektion 2 blankettext 0",
                        "obligatorisk": "ja",
						"fritext": "nej"
                    }, {
						"nummer": "1",
                        "text": "Det här är sektion 2 blankettext 1",
                        "obligatorisk": "nej",
						"fritext": "nej"
                    }, {
						"nummer": "2",
                        "text": "Det här är sektion 2 blankettext 2",
                        "obligatorisk": "ja",
						"fritext": "nej"
                    }]
                }]
            };

            
            function infogaObligatoriskaBlankettexter(){
                for (var i = 0; i < v_blankettexter.sektioner.length; i++) {
                    for (var j = 0; j < v_blankettexter.sektioner[i].texter.length; j++) {
                        if (v_blankettexter.sektioner[i].texter[j].obligatorisk == "ja") {
							//console.log("sätt in -> index:" + i + " index:" + j + " - nummer:" + v_blankettexter.sektioner[i].nummer + " nummer:" + v_blankettexter.sektioner[i].texter[j].nummer);
							infogaBlankettext(i, j);
							//console.log("insatt -> index:" + i + " index:" + j + " - nummer:" + v_blankettexter.sektioner[i].nummer + " nummer:" + v_blankettexter.sektioner[i].texter[j].nummer);
                        }
                    }
                }
            }
stephanMedlem sedan feb. 2006117 inlägg
#5
            function infogaBlankettext(v_sektionsIndex, v_blankettextIndex) {
            
				// Skapa upp blankettextet som ska sättas in
                var v_blankettextElementAttInfoga = document.createElement('div');
                v_blankettextElementAttInfoga.setAttribute("id", "blankettext_" + v_blankettexter.sektioner[v_sektionsIndex].nummer + "-" + v_blankettexter.sektioner[v_sektionsIndex].texter[v_blankettextIndex].nummer);
                v_blankettextElementAttInfoga.setAttribute("class", "blankettext");
				v_blankettextElementAttInfoga.innerHTML = v_blankettexter.sektioner[v_sektionsIndex].texter[v_blankettextIndex].text;
                
				// Hämta alla sektioner
                //var v_sektioner = Ext.select('*.sektion',document.getElementById('ks_dokument'));//getElementsByClassName("sektion");
                var v_sektioner = getElementsByClassName("sektion");
				alert(v_sektioner.length);
                
				// skapa en variabel som håller reda på om blankettexten har infogats
				var infogad = false;
				
				// loopa igenom alla sektioner i sidan för att hitta den som vi ska sätta in texten i
                for (var i = 0; i < v_sektioner.length; i++) {
                    var aktuelltSektionsNummer = v_sektioner[i].id.substring(8); // plocka ut sektionsnumret från ID:t
//                    alert(v_blankettexter.sektioner[v_sektionsIndex].nummer +'=='+ aktuelltSektionsNummer);
					// om blankettextens sektionsnummer som ska sättas in påträffas
                    if (v_blankettexter.sektioner[v_sektionsIndex].nummer == aktuelltSektionsNummer) {
                    
						// hämta ut alla existerande blankettexter i den sektionen och loopa igenom
                        var v_existerandeBlankettexter = v_sektioner[i].childNodes;
  //                      alert(v_existerandeBlankettexter.length);
                        for (var j = 0; j < v_existerandeBlankettexter.length; j++) {
							// gör en check så att det finns ett id
                            //if (v_existerandeBlankettexter[j].id) {
                                // plocka ut blankettext-nummer från elementets id. splittar på bindestreck.
    //                            alert(v_existerandeBlankettexter[j].id);
                                var v_blankettextnummerDelar = v_existerandeBlankettexter[j].id.split("-");
                                var v_blankettextnummer = v_blankettextnummerDelar[1]; // vi vet att andra delen av splitten är numret på blankettexten
                                
								// om det blir träff på numret så finns redan blankettexten
                                if (v_blankettexter.sektioner[v_sektionsIndex].texter[v_blankettextIndex].nummer == v_blankettextnummer) {
                                    // finns redan (kan det här fallet inträffa? endast om man gjort nåt fel innan väl?)
									//console.log("Blankettexten finns redan" + v_blankettexter.sektioner[v_sektionsIndex].nummer + "-" + v_blankettexter.sektioner[v_sektionsIndex].texter[v_blankettextIndex].nummer);
									infogad = true;
                                    break;
                                }
								// om numret på blankettexten är mindre än det som vi påträffar i loopen, så är det dags att sätta in texten
                                else if (v_blankettexter.sektioner[v_sektionsIndex].texter[v_blankettextIndex].nummer < v_blankettextnummer) {
                                        v_sektioner[i].insertBefore(v_blankettextElementAttInfoga, v_existerandeBlankettexter[j]);
										infogad = true;
										break;
                            	}
                            //}
                        }
						
						// om infogad inte är true här, så har vi loopat igenom alla blankettexter i sektionen utan att sätta in texten
						// alltså finns det ingen text i sektionen som har högre nummer än den vi försöker sätta in
						// så vi sätter in texten som ett barn till sektionsElementet, vilket gör att den hamnar sist
						if(!infogad) {
							v_sektioner[i].appendChild(v_blankettextElementAttInfoga);
							infogad = true;
						}
                    }
                }
				
				// om vi infogad inte är true här så har vi inte hittat sektionen som blankettexten ska sättas in i
				// därmed ska vi skapa sektionen samt sätta in rubriken för sektionen, och sen sätta in blankettexten
				if (!infogad) {
					// Skapa upp sektionen som ska sättas in
	                var v_sektionsElementAttInfoga = document.createElement('div');
	                v_sektionsElementAttInfoga.setAttribute("id", "sektion_" + v_blankettexter.sektioner[v_sektionsIndex].nummer);
	                v_sektionsElementAttInfoga.setAttribute("class", "sektion");
					
					// Skapa upp rubriken som ska sättas in
	                var v_rubrikElementAttInfoga = document.createElement('h2');
					var v_rubrik = document.createTextNode(v_blankettexter.sektioner[v_sektionsIndex].namn);
					// lägg till texten i rubriksElementet
					v_rubrikElementAttInfoga.appendChild(v_rubrik); 					
					
					// lägg in rubriken och blankettexten i sektionsElementet
					v_sektionsElementAttInfoga.appendChild(v_rubrikElementAttInfoga);
					v_sektionsElementAttInfoga.appendChild(v_blankettextElementAttInfoga);
					
					// TODO: loopa igenomn alla sektioner och hitta rätt plats att infoga sektionen
	                for (var i = 0; i < v_sektioner.length; i++) {

						var v_aktuelltSektionsNummer = v_sektioner[i].id.substring(8); // plocka ut sektionsnumret från ID:t

						// om sektionsnummer som ska sättas in är mindre än den i loopen påträffade sektionens nummer är det dags att sätta in sektionen

						if (v_blankettexter.sektioner[v_sektionsIndex].nummer < aktuelltSektionsNummer) {

							v_sektioner[i].parentNode.insertBefore(v_sektionsElementAttInfoga, v_sektioner[i]);

							infogad = true;
							break;
						}

					}

					// om inte blankettexten är infogad här, så finns det antingen inga sektioner, eller så har är numret på sektionen högre än det den högsta befintliga
					// alltså ska vi infoga sektionen (med dess innehåll) sist (appendChild)
					if(!infogad) {
						document.getElementById("content").appendChild(v_sektionsElementAttInfoga);
					}
				}
            }

            function getElementsByClassName(clsName){
                //	var elementTagName;
                //	if (elementTagNameIn == "") {
                elementTagName = "*";
                //	} else if (elementTagNameIn == "*") {
                // do nothing
                //	} else {
                //		elementTagName = elementTagNameIn;
                //	}

                var retVal = new Array();
                var elements = document.getElementsByTagName(elementTagName);
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].className.indexOf(" ") >= 0) {
                        var classes = elements[i].className.split(" ");
                        for (var j = 0; j < classes.length; j++) {
                            if (classes[j] == clsName) 
                                retVal.push(elements[i]);
                        }
                    }
                    else 
                        if (elements[i].className == clsName) 
                            retVal.push(elements[i]);
                }
                return retVal;
            }
            

            

            /*			]]> */

        </script>
    </head>
    <body onLoad="infogaObligatoriskaBlankettexter()">
                <div id="content">
				Svarsdatum = <span class="svarsdatum">2008-01-01</span>
                </div>
    </body>
</html>
TroxyMedlem sedan mars 20041 505 inlägg
#6

Dude, om vi ska kunna hjälpa dig får du nog bryta ner koden i mindre bitar. :P

nitro2k01Medlem sedan aug. 20039 342 inlägg
#7

Jag tycker mig inte se att elementTagName tilldelas ett värde någonstans?

142 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)