Avatar billede mireigi Novice
17. december 2009 - 16:50 Der er 8 kommentarer og
1 løsning

Opdatering af DOM i IE

Hej,

Jeg har skrevet dette script til at tilføje flere upload-felter på en upload side for billeder. Scriptet virker fint i både FireFox og Internet Explorer 8.0

Desværre opdaterer siden ikke med det nye indhold fra DOM'en når jeg viser siden i IE.

Nogen der kan give et bud på hvorfor der ikke bliver opdateret noget?
Jeg har kontrolleret at indholdet bliver tilføjet til DOM'en, så det er ikke fordi scriptet fejler.

function addImage()
        {
            var counter = document.getElementById("ffIDs").value.split(",");
            var count = eval(counter.length);
            alert(count);
            count++;
           
            var table = document.createElement("table");
            table.width = "971";
            table.border = "0";
            table.id = "imageTable" + count;
            table.cellpadding = "2";
            table.cellspacing = "0";
            table.setAttribute("onmouseover", "this.style.backgroundColor='#EFEFEF';");
            table.setAttribute("onmouseout", "this.style.backgroundColor='';");
           
            var tr1 = document.createElement("tr");
            tr1.className = "item";
            tr1.align = "left";
           
            var td1 = document.createElement("td");
            td1.width = "90";
            td1.appendChild(document.createTextNode("Billede:"));
            td1.appendChild(document.createElement("br"));
            td1.appendChild(document.createTextNode("skal være .jpg"));
           
            var td2 = document.createElement("td");
            var fil = document.createElement("input");
            fil.type = "file";
            fil.name = "ffFil" + count;
            fil.size = "40";
            fil.className = "formfelt";
           
           
            var filError = document.createElement("span");
            filError.style.color = "Red";
            filError.style.fontWeight = "bold";
            filError.style.display = "none";
            filError.style.marginLeft = "10px";
            filError.id = "filError" + count;
            filError.appendChild(document.createTextNode("Der skal angives en fil."));
           
            var td3 = document.createElement("td")
            td3.setAttribute("rowspan", "2");
            var remove = document.createElement("input");
            remove.type = "button";
            remove.value = "Fjern";
            remove.setAttribute("onclick", "removeImage('imageTable" + count +"');");
            remove.style.height = "50px";
           
            td2.appendChild(fil);
            td2.appendChild(filError);
            td3.appendChild(remove);
           
            tr1.appendChild(td1);
            tr1.appendChild(td2);
            tr1.appendChild(td3);
           
            var tr2 = document.createElement("tr");
            tr2.className = "item";
            tr2.align = "left";
           
            var td4 = document.createElement("td");
            td4.width = "90";
            td4.appendChild(document.createTextNode("Titel:"));
           
            var td5 = document.createElement("td");
            var title = document.createElement("input");
            title.type = "text";
            title.name = "ffTitel" + count;
            title.size = "56";
            title.maxlength = "100";
            title.className = "formfelt";
           
            var titelError = document.createElement("span");
            titelError.style.color = "Red";
            titelError.style.fontWeight = "bold";
            titelError.style.display = "none";
            titelError.style.marginLeft = "10px";
            titelError.id = "titelError" + count;
            titelError.appendChild(document.createTextNode("Der skal angives en titel."));
           
            td5.appendChild(title);
            td5.appendChild(titelError);
           
            tr2.appendChild(td4);
            tr2.appendChild(td5);
           
            table.appendChild(tr1);
            table.appendChild(tr2);
           
            var placeholder = document.getElementById("placeholder");
            placeholder.parentNode.insertBefore(table, placeholder);
           
            document.getElementById("ffIDs").value += "," + count;
        }
Avatar billede mireigi Novice
17. december 2009 - 16:51 #1
Bare se bort fra den alert der står i koden. Den er kun med for at teste at ID-rækkefølgen opdateres.
Avatar billede mireigi Novice
17. december 2009 - 17:00 #2
Ok, indtil videre har jeg fået det til at virke i IE ved at gøre følgende:

            placeholder.parentNode.insertBefore(table, placeholder);
            if (navigator.appName.indexOf("Microsoft Internet Explorer") >= 0)
                placeholder.parentElement.innerHTML = placeholder.parentElement.innerHTML;


Jeg mener bare ikke at det kan passe at det er eneste måde at løse det på?

Jeg vil sætte pris på hvis en af jer dejlige mennesker derude kan levere en version af ovenstående der IKKE er afhængig af innerHTML og/eller kan give en forklaring på hvorfor det er sådan.
Avatar billede tjens Nybegynder
17. december 2009 - 17:26 #3
Det problem har jeg også siddet med:
http://www.eksperten.dk/spm/850254

Løsningen er at lave et niveau mere i form af et element TBODY, som du appender til dit TABLE-element.

Og dine TR-elementer skal appendes til TBODY  i stedet for direkte til TABLE.
Avatar billede mireigi Novice
17. december 2009 - 20:03 #4
Ok, tak for det. Vil jeg lige prøve i morgen når jeg sidder med koden igen :)
Avatar billede mireigi Novice
18. december 2009 - 09:27 #5
Ok, koden virker smukt. Mange tak for det.

Måske du kan hjælpe mig med at få denne del at virke også?

       
        function removeImage(id)
        {
            var table = document.getElementById(id);
            var count = id.replace("imageTable", "");
            table.parentNode.removeChild(table);
            document.getElementById("ffIDs").value = document.getElementById("ffIDs").value.replace("," + count, "");
        }
Avatar billede tjens Nybegynder
18. december 2009 - 10:07 #6
#5 Nej det bliver svært at hjælpe med den ekstra kode:
Du har glemt at oplyse hvad den skal kunne og hvad der ikke virker og hvilke dele der evt. allerede virker ;-)

Derudover ville det være smart at vise os den HTML som javascriptet manipulerer med.
Du kan evt. sætte denne kode (MSIE only) på et element på siden, for at få fat i din dynamiske HTML
onclick="window.clipboardData.setData('Text',document.body.outerHTML.replace(/>/g, '>\n'));"
Avatar billede mireigi Novice
18. december 2009 - 10:31 #7
Ok, her kommer koden så.
Funktionen "removeImage" skal fjerne tabeller tilføjet med "addImage".


<html>
<head>
    <title>
        Test
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="/admin/code/admin.css" rel="stylesheet" type="text/css">

    <script language="JavaScript">   
        function addImage()
        {
            var counter = document.getElementById("ffIDs").value.split(",");
            var count = eval(counter.length);
            count++;
           
            var table = document.createElement("table");
            table.width = "971";
            table.border = "0";
            table.id = "imageTable" + count;
            table.cellpadding = "2";
            table.cellspacing = "0";
            table.setAttribute("onmouseover", "this.style.backgroundColor='#EFEFEF';");
            table.setAttribute("onmouseout", "this.style.backgroundColor='';");
           
            var tbody = document.createElement("tbody");
           
            var tr1 = document.createElement("tr");
            tr1.className = "item";
            tr1.align = "left";
           
            var td1 = document.createElement("td");
            td1.width = "90";
            td1.appendChild(document.createTextNode("Billede:"));
            td1.appendChild(document.createElement("br"));
            td1.appendChild(document.createTextNode("skal være .jpg"));
           
            var td2 = document.createElement("td");
            var fil = document.createElement("input");
            fil.type = "file";
            fil.name = "ffFil" + count;
            fil.size = "40";
            fil.className = "formfelt";
           
           
            var filError = document.createElement("span");
            filError.style.color = "Red";
            filError.style.fontWeight = "bold";
            filError.style.display = "none";
            filError.style.marginLeft = "10px";
            filError.id = "filError" + count;
            filError.appendChild(document.createTextNode("Der skal angives en fil."));
           
            var td3 = document.createElement("td")
            td3.setAttribute("rowspan", "2");
            var remove = document.createElement("input");
            remove.type = "button";
            remove.value = "Fjern";
            remove.setAttribute("onclick", "removeImage('imageTable" + count +"');");
            remove.style.height = "50px";
           
            td2.appendChild(fil);
            td2.appendChild(filError);
            td3.appendChild(remove);
           
            tr1.appendChild(td1);
            tr1.appendChild(td2);
            tr1.appendChild(td3);
           
            var tr2 = document.createElement("tr");
            tr2.className = "item";
            tr2.align = "left";
           
            var td4 = document.createElement("td");
            td4.width = "90";
            td4.appendChild(document.createTextNode("Titel:"));
           
            var td5 = document.createElement("td");
            var title = document.createElement("input");
            title.type = "text";
            title.name = "ffTitel" + count;
            title.size = "56";
            title.maxlength = "100";
            title.className = "formfelt";
           
            var titelError = document.createElement("span");
            titelError.style.color = "Red";
            titelError.style.fontWeight = "bold";
            titelError.style.display = "none";
            titelError.style.marginLeft = "10px";
            titelError.id = "titelError" + count;
            titelError.appendChild(document.createTextNode("Der skal angives en titel."));
           
            td5.appendChild(title);
            td5.appendChild(titelError);
           
            tr2.appendChild(td4);
            tr2.appendChild(td5);
           
            tbody.appendChild(tr1);
            tbody.appendChild(tr2);
           
            table.appendChild(tbody);
           
            var placeholder = document.getElementById("placeholder");
            placeholder.parentNode.insertBefore(table, placeholder);
           
            document.getElementById("ffIDs").value += "," + count;
        }
       
        function removeImage(id)
        {
            var table = document.getElementById(id);
            var count = id.replace("imageTable", "");
            table.parentNode.removeChild(table);
            document.getElementById("ffIDs").value = document.getElementById("ffIDs").value.replace("," + count, "");
        }
       
        function validateForm(f)
        {
            var counter = document.getElementById("ffIDs").value.split(",");
            count = eval(counter.length);
            var valid = true;
           
            for (var i = 0; i < count; i++)
            {
                var titel = f["ffTitel" + counter[i]];
                var fil = f["ffFil" + counter[i]];
                if (titel.value == "")
                {
                    document.getElementById("titelError" + counter[i]).style.display = "";
                    valid = false;
                }
                else
                {
                    document.getElementById("titelError" + counter[i]).style.display = "none";
                }
               
                if (fil.value == "")
                {
                    document.getElementById("filError" + counter[i]).style.display = "";
                    valid = false;
                }
                else
                {
                    document.getElementById("filError" + counter[i]).style.display = "none";
                }
            }
            return valid;
        }
    </script>
</head>
<body>
    <table width="1000" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="/admin/gfx/system/div_top.gif" width="1000" height="9"></td>
        </tr>
    </table>
    <table width="1000" border="0" cellpadding="0" cellspacing="0" background="/admin/gfx/system/bg_content.gif">
        <tr>
            <td align="center">
                <table width="971" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="486" class="boldred">
                            Billedgalleri</td>
                        <td width="485" align="right">
                        </td>
                    </tr>
                </table>
                <table width="971" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="txt10">
                            Upload nyt billede</td>
                    </tr>
                    <tr>
                        <td>
                            <img src="/admin/gfx/system/spacer.gif" width="8" height="8"></td>
                    </tr>
                </table>
                <table width="971" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td background="/admin/gfx/dividers/hor_5x1.gif">
                            <img src="/admin/gfx/system/spacer.gif" width="100%" height="1"></td>
                    </tr>
                </table>
                <form enctype="MULTIPART/FORM-DATA" name="ffForm" id="ffForm" method="POST" action="gembillede.asp" onsubmit="return validateForm(this)">
                    <input type="hidden" name="ffIDs" id="ffIDs" value="1" />
                    <table width="971" border="0" cellpadding="2" cellspacing="0">
                        <tr class="item" align="left">
                            <td width="90">
                                <input type="hidden" name="ffCount" />
                                Billede:<br>
                                skal være .jpg</td>
                            <td>
                                <input type="FILE" name="ffFil1" size="40" class="formfelt" /><span style="color:Red; font-weight:bold; display:none; margin-left:10px;" id="filError1">Der skal angives en fil.</span></td>
                        </tr>
                        <tr class="item" align="left">
                            <td>
                                Titel:</td>
                            <td>
                                <input name="ffTitel1" type="text" size="56" maxlength="100" class="formfelt" /><span style="color:Red; font-weight:bold; display:none; margin-left:10px;" id="titelError1">Der skal angives en titel.</span></td>
                        </tr>
                    </table>
                    <span id="placeholder"></span>
                    <input type="button" value="Tilføj flere" onclick="java script:addImage();" />
                    <table width="971" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td background="/admin/gfx/dividers/hor_5x1.gif">
                                <img src="/admin/gfx/system/spacer.gif" width="100%" height="1"></td>
                        </tr>
                    </table>
                    <table width="971" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="2" align="right">
                                <img src="/admin/gfx/system/spacer.gif" width="8" height="8"></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="right">
                                <input type="image" value="Gem/Opdatér" src="../gfx/button/gen_save.gif" width="40" height="15"></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
    <table width="1000" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img src="/admin/gfx/system/div_bot.gif" width="1000" height="9"></td>
        </tr>
    </table>
</body>
</html>



Btw, hvordan laver du den smarte boks-visning af kode? Kan ikke lige finde BB-tag for det her på exp.
Avatar billede tjens Nybegynder
18. december 2009 - 13:00 #8
removeImage virker fint. Den bliver bare aldrig kaldt i min MSIE6.

Hvis jeg tilføjer
remove.onclick = function() { removeImage('imageTable' + count ) };
virker det for mig.

Søg selv på nettet for forskellig syntax vedr onclick via DOM i forskellige browsere og versioner.

PS: Vejledning i tags på experten: http://www.eksperten.dk/guide/1325
Avatar billede mireigi Novice
18. december 2009 - 13:12 #9
Ok, det virker fint for mig nu i FF og IE. Så mange tak for det :)

Også tak for guiden.

God jul :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester