[JS DOM] Internet explorer rendert nieuwe nodes niet? - Softwareontwikkeling

woensdag 9 februari 2005 14:40

Acties:

Verwijderd

Topicstarter

Beste allemaal,

Onderstaande code die ik net gemaakt heb voegt aan een formulier entries toe en kan ze ook weer verwijderen. Het zijn complete table rows met een uniek ID.

Het werkt perfect in Firefox zoals je zult zien als je het draait.
In Internet explorer echter, gebeurt er helemaal niets als je een node wilt toevoegen. Er verschijnt ook geen javascript error. Ik vermoed dat IE de nodes wel toevoegt aan het DOM maar ze niet rendert. Weet iemand of dit is op te lossen?

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
    <link rel="stylesheet" href="seqgen.css"/>
    <script language="javascript" type="text/javascript">
    
    function createRandomLowerCaseLetter()  {
      return String.fromCharCode(97 + Math.round(Math.random() * 25));
    }
    
    function randomID()  {
      var idString = '';
      for(i=0;i<20;i++) {
        idString = idString + createRandomLowerCaseLetter();
        }
      return idString;
      }
    
    function addEntry(){
      theTable = document.getElementById('nodelist');
      theNewNode = document.createElement("tr");
      theNewID = randomID();
      theNewNode.setAttribute("id", theNewID);
      theFirstTD = document.createElement("td");
      theSecondTD = document.createElement("td");
      theFirstTD.appendChild(document.createTextNode("File:"));
      theInputNode = document.createElement("input");
      theInputNode.setAttribute("type", "text");
      theInputNode.setAttribute("name", "files[]");
      theDeleteButton = document.createElement("input");
      theDeleteButton.setAttribute("type", "button");
      theDeleteButton.setAttribute("value", "delete");
      theDeleteButton.setAttribute("onclick", "deleteEntry('" + theNewID + "');");     
      theSecondTD.appendChild(theInputNode);
      theSecondTD.appendChild(theDeleteButton);
      theNewNode.appendChild(theFirstTD);
      theNewNode.appendChild(theSecondTD);
      theTable.appendChild(theNewNode);
    }
    function deleteEntry(thenode)  {
      theTable = document.getElementById('nodelist');
      if(thenode.id != 'initnode')  {
        theTable.removeChild(document.getElementById(thenode));      
        }
      }
    </script>
  </head>
  <body>
  <form action="createnodes.php" method="post">
  <table id="nodelist"><tr id="initnode"><td>File:</td><td><input type="text" name="files[]"><input type="button" value="delete" onclick="deleteEntry(initnode);"/></td></tr></table>
  <input type="button" value="Add a file" onclick="addEntry()"/>
  </form>
  </body>
</html>

woensdag 9 februari 2005 15:06

Acties:

Jrz

––––––––––––

Als je de innerHTML van die theTable displayed krijg je:

code:

<TBODY>

<TR id=initnode>

<TD>File:</TD>

<TD><INPUT name=files[]><INPUT onclick=deleteEntry(initnode); type=button value=delete></TD></TR></TBODY>

<TR id=kdeiythloioorddtnkae>

<TD>File:</TD>

<TD><INPUT><INPUT onclick="deleteEntry('kdeiythloioorddtnkae');" type=button value=delete></TD></TR>

Kijk naar TBODY.
Als je ipv aan je theTable, het aan een TBODY of die initnode append zal het werken.

[ Voor 23% gewijzigd door Jrz op 09-02-2005 15:07 ]

Ennnnnnnnnn laat losssssssss.... https://github.com/jrz/container-shell (instant container met chroot op current directory)

woensdag 9 februari 2005 15:30

Acties:

Verwijderd

Topicstarter

Da's nice! Hij doet nu ook meteen niet raar meer met renderen (er kwam rare ruimte tussen na deleten) Een stuk verder... Alleen de delete knop doet nog steeds niks in MSIE. In FF wel.

Heb nu dit dus:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>test</title>
    <link rel="stylesheet" href="seqgen.css"/>
    <script language="javascript" type="text/javascript">
    
    function createRandomLowerCaseLetter()  {
      return String.fromCharCode(97 + Math.round(Math.random() * 25));
    }
    
    function randomID()  {
      var idString = '';
      for(i=0;i<20;i++) {
        idString = idString + createRandomLowerCaseLetter();
        }
      return idString;
      }
    
    function addEntry(){
      theTable = document.getElementById('nodelist');
      theNewNode = document.createElement("tr");
      theNewID = randomID();
      theNewNode.setAttribute("id", theNewID);
      theFirstTD = document.createElement("td");
      theSecondTD = document.createElement("td");
      theFirstTD.appendChild(document.createTextNode("File:"));
      theInputNode = document.createElement("input");
      theInputNode.setAttribute("type", "text");
      theInputNode.setAttribute("name", "files[]");
      theDeleteButton = document.createElement("input");
      theDeleteButton.setAttribute("type", "button");
      theDeleteButton.setAttribute("value", "delete");
      theDeleteButton.setAttribute("onclick", "deleteEntry('" + theNewID + "');");     
      theSecondTD.appendChild(theInputNode);
      theSecondTD.appendChild(theDeleteButton);
      theNewNode.appendChild(theFirstTD);
      theNewNode.appendChild(theSecondTD);
      theTable.appendChild(theNewNode);
    }
    function deleteEntry(thenode)  {
      theTable = document.getElementById('nodelist');
      if(thenode.id != 'initnode')  {
        theTable.removeChild(document.getElementById(thenode));      
        }
      }
    </script>
  </head>
  <body>
  <form action="createnodes.php" method="post">
  <table><tbody id="nodelist"><tr id="initnode"><td>File:</td><td><input type="text" name="files[]"><input type="button" value="delete" onclick="deleteEntry(initnode);"/></td></tr></tbody></table>
  <input type="button" value="Add a file" onclick="addEntry()"/>
  </form>
  </body>
</html>

woensdag 9 februari 2005 15:35

Acties:

André

Analytics dude

En zo dan:

code:

1 2	node = document.getElementById(thenode); node.parent.removeChild(node);

woensdag 9 februari 2005 15:43

Acties:

Jrz

––––––––––––

Het probleem zit em blijkbaar in setAttribute("onclick")
Je zou eigenlijk attachEvent moeten gebruiken, maar ik weet niet uit mn hoofd hoe / of dat kan met een parameter...

http://www.google.com/sea...ript+setAttribute+onClick

Ennnnnnnnnn laat losssssssss.... https://github.com/jrz/container-shell (instant container met chroot op current directory)

woensdag 9 februari 2005 15:46

Acties:

André

Analytics dude

Jrz schreef op woensdag 09 februari 2005 @ 15:43:
Het probleem zit em blijkbaar in setAttribute("onclick")
Je zou eigenlijk attachEvent moeten gebruiken, maar ik weet niet uit mn hoofd hoe / of dat kan met een parameter...

http://www.google.com/sea...ript+setAttribute+onClick

code:

1	theDeleteButton.onclick = function() { deleteEntry(theNewID); }

woensdag 9 februari 2005 16:02

Acties:

Verwijderd

Topicstarter

André schreef op woensdag 09 februari 2005 @ 15:46:
[...]
code:
1
theDeleteButton.onclick = function() { deleteEntry(theNewID); }

Als ik dat doe werkt het bij de eerste keer deleten van een node maar daarna zegt de javascript console in FF:

code:

Error: uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLTableSectionElement.removeChild]"  nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)"  location: "JS frame :: file:///C:/Documents%20and%20Settings/Marco/Desktop/seqeditor/editor.html :: deleteEntry :: line 45"  data: no]

woensdag 9 februari 2005 16:04

Acties:

André

Analytics dude

code:

1	theDeleteButton.onclick = function() { deleteEntry("'" + theNewID + "'"); }

zo dan?

woensdag 9 februari 2005 17:24

Acties:

Verwijderd

Topicstarter

Helaas... zelfde probleem......
Heb al van alles zitten proberen maar hij blijft die error geven.

woensdag 9 februari 2005 19:26

Acties:

Clay

cookie erbij?

Voor tables kan je beter table.insertRow(index) en row.insertCell(index) gebruiken. 't is makkelijker en sneller en er staat me iets van bij dat IE createElement gewoon niet doet voor table elementen.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin