[JS] Opera und IE Problem

ZeitGeist · 03. März 2005

Hallo,
ich hab mal wieder nen Problem mit Javascript. Ich möchte mit folgendem Script eine neue Zeile in einer Tabelle einfügen. Die Zeile enthält ein <input>-Feld mit diversen Attributen, und hier fängt das Problem an. Im Opera wird zwar die Zeile eingefügt, auch das input-Feld aber, wie es aussieht nicht die Attribute mit ihren Werten. Zumindest stimmen die längen nicht überein.
Der IE macht garnix,gibt auch keine Fehlermeldung.

Hier erstmal mein Script

PHP:

function createTrackEntry()
{
	var zeile = document.createElement("tr");
	var tdDauer = document.createElement("td");
		var inputDauer = document.createElement("input");
			var inputType = document.createAttribute("type");
			inputType.nodeValue = "text";
			var inputName = document.createAttribute("name");
			inputName.nodeValue = "trackdauer[]";
			var inputSize = document.createAttribute("size");
			inputSize.nodeValue = 6;
			var inputLength = document.createAttribute("maxlength");
			inputLength.nodeValue = 6;
		inputDauer.setAttributeNode(inputType);
		inputDauer.setAttributeNode(inputName);
		inputDauer.setAttributeNode(inputSize);
		inputDauer.setAttributeNode(inputLength);
	tdDauer.appendChild(inputDauer);
	zeile.appendChild(tdDauer);
	zeile.appendChild(tdUrl);
	document.getElementById('tracklist').appendChild(zeile);
}

Hab ich irgendeinen Fehler gemacht, oder können Opera und IE das schlicht und ergreifend nicht? Gäbe es dann eine andere Lösung mit der ich das machen könnte?

ZeitGeist · 03. März 2005

niemand ne idee?

ZeitGeist · 04. März 2005

Ich möchte das man auf Knopfdruck in eine Tabelle eine neue Zeile mit mehreren Input-Feldern einfügen kann. Und das ganze möglichst ohne einen Reload der Seite.

Hat dann vielleicht jemand eine idee wie ich das anders lösen könnte?

Malleus · 05. März 2005

Hallo Zeitgeist,
probier' mal folgendes aus:

var zeile = document.createElement("tr");
var tdDauer = document.createElement("td");

tdDauer.innerHTML='<input type="text" name="trackdauer" size="6" maxLength="6" >';

zeile.appendChild(tdDauer);
document.getElementById('tracklist').appendChild(zeile);

Das sollte eigentlich funktionieren, aber vielleicht liegt es auch an dem Namen "trackdauer[]". Die eckigen Klammern finde ich etwas "irritierend".

inputName.nodeValue = "trackdauer[]";

Des Weiteren was bedeutet: " zeile.appendChild(tdUrl);" ????

Tschau

Frank

tschau

Frank

ZeitGeist · 05. März 2005

die eckigen Klammern brauch ich damit ich das in php in einem Array habe. Kann mir eigentlich nicht vorstellen das es daran liegt, werde es allerdings mal mit anderen Namen ausprobieren.

Es geht um das CMS einer Bandhomepage an der ich gerade sitze, speziell um die Disocgraphie. Dort sollen Alben angelegt werden, und ich brauch für jeden Track so eine Zeile. Da ich aber keine feste Anzahl festlegen will, auch keine 99 zeilen die ich dann per display:block einbelden, hielt ich es für das schlauste es so zu machen.

mit appendChild füge ich einem Knoten einen Kindknoten hinzu, in diesem Fall lege ich den input ins tr (wenn ich das richtig verstanden habe).

innerHTML ist auch keine wirkliche Lösung, da es unter document.all fällt, welches ein proprietäres Objekt ist. Könnte dann nur mit einer Browserweiche arbeiten. Finde ich allerdings unelegant.

Trotzdem danke für deine Mühe

Malleus · 05. März 2005

Hallo,
was meinst Du mit "proprietär"? Unterstützt nicht jeder "moderen" Browser, der die "createElement"-Methode kennt auch "innerHTML". Auch gibt es meiner Meinung nach keine Verbindung zu "document.all". "innerHTML" ist eine Methode eine "DOM"-Knoten.

Ich benutze "innerHTML" mit MSIE, Mozilla, Opera usw. und es hat bisher immer funktioniert.

Bezüglich meiner "appendChild"-Frage: Mir ist schon klar, was "appendChild" macht ;-)
Nur Du rufst es zweimal auf

var zeile = document.createElement("tr");
var tdDauer = document.createElement("td");
var inputDauer = document.createElement("input");
tdDauer.appendChild(inputDauer);
//....

zeile.appendChild(tdDauer); // Hier fügst Du das neue TD-Element ein.
zeile.appendChild(tdUrl); // Hier fügst Du noch eine TD ein !!!

Was ist das für ein Knoten "tdUrl"? Erzeugst Du den für jede TR neu bzw. "clonest " Du den. Das könnte auch ein Problem sein: Wenn Du "einen" Knoten mehrmals einfügen willst.

Ich werde das ganze 'mal richtig "checken". Auch in Bezug auf "Laufzeit". Ich denke 'mal, das die "innerHTML"-Methode schneller ist, aber ich ganz nicht "bezeugen".

Tschau

Frank

ZeitGeist · 05. März 2005

ich dachte innerHTML gehört zu document.all. Und das ist doch proprietär oder nicht?
ich werde es mal ausprobieren.

ich hab das Script ein wenig gekürzt, dass zweite appednd hab ich wohl vergessen rauszunehmen.

hier noch mal das komplette script, letztendlich sind das nur nen paar zellen und nen paar inputs mehr. Wenn ich in Opera auf einen der Knöpfe drücke, passiert nichts, auch keine JS-Fehlermeldung. Allerdings wird der Value des Knopfs angezeigt.

PHP:

function createTrackEntry()
	{
		count = document.getElementsByName('trackid[]').length;
		var zeile = document.createElement("tr");
		
		var tdNr = document.createElement("td");
			var tdClass = document.createAttribute("class");
					tdClass.nodeValue = "labelL";
					tdNr.setAttributeNode(tdClass);
		var Nr = document.createTextNode("("+(count+1)+".)");		
		var inputId = document.createElement("input");
			var inputType = document.createAttribute("type");
					inputType.nodeValue = "hidden";
			var inputName = document.createAttribute("name");
					inputName.nodeValue = "trackid[]";
			var inputValue = document.createAttribute("value");
					inputValue.nodeValue = 0;
				inputId.setAttributeNode(inputType);
				inputId.setAttributeNode(inputName);
				inputId.setAttributeNode(inputValue);
		var inputChanged = document.createElement("input");
			var inputType = document.createAttribute("type");
					inputType.nodeValue = "hidden";
			var inputName = document.createAttribute("name");
					inputName.nodeValue = "trackfilechanged[]";
			var inputValue = document.createAttribute("value");
					inputValue.nodeValue = 0;
				inputChanged.setAttributeNode(inputType);
				inputChanged.setAttributeNode(inputName);
				inputChanged.setAttributeNode(inputValue);			
		tdNr.appendChild(Nr);
		tdNr.appendChild(inputId);
		tdNr.appendChild(inputChanged);

		var tdTitel = document.createElement("td");		
			var inputTitel = document.createElement("input");
				var inputType = document.createAttribute("type");
						inputType.nodeValue = "text";
				var inputName = document.createAttribute("name");
						inputName.nodeValue = "tracktitel[]";
				var inputSize = document.createAttribute("size");
						inputSize.nodeValue = 25;
				var inputLength = document.createAttribute("maxlength");
						inputLength.nodeValue = 200;
					inputTitel.setAttributeNode(inputType);
					inputTitel.setAttributeNode(inputName);
					inputTitel.setAttributeNode(inputSize);
					inputTitel.setAttributeNode(inputLength);
		tdTitel.appendChild(inputTitel);
	
		var tdDauer = document.createElement("td");
			var inputDauer = document.createElement("input");
				var inputType = document.createAttribute("type");
						inputType.nodeValue = "text";
				var inputName = document.createAttribute("name");
						inputName.nodeValue = "trackdauer[]";
				var inputSize = document.createAttribute("size");
						inputSize.nodeValue = 6;
				var inputLength = document.createAttribute("maxlength");
						inputLength.nodeValue = 6;
					inputDauer.setAttributeNode(inputType);
					inputDauer.setAttributeNode(inputName);
					inputDauer.setAttributeNode(inputSize);
					inputDauer.setAttributeNode(inputLength);
		tdDauer.appendChild(inputDauer);
					
		var tdUrl = document.createElement("td");
			var inputUrl = document.createElement("input");
				var inputType = document.createAttribute("type");
						inputType.nodeValue = "text";
				var inputName = document.createAttribute("name");
						inputName.nodeValue = "trackfile[]";
				var inputSize = document.createAttribute("size");
						inputSize.nodeValue = 25;
				var inputLength = document.createAttribute("maxlength");
						inputLength.nodeValue = 200;
					inputUrl.setAttributeNode(inputType);
					inputUrl.setAttributeNode(inputName);
					inputUrl.setAttributeNode(inputSize);
					inputUrl.setAttributeNode(inputLength);										
			var inputChoose = document.createElement("input");
				var inputType = document.createAttribute("type");
						inputType.nodeValue = "button";
				var inputValue = document.createAttribute("value");
						inputValue.nodeValue = "mp3 wählen";
				var inputOnclick = document.createAttribute("onclick");
						inputOnclick.nodeValue = "chooseMp3("+count+")";
					inputChoose.setAttributeNode(inputType);
					inputChoose.setAttributeNode(inputValue);
					inputChoose.setAttributeNode(inputOnclick);										
			var inputRestore = document.createElement("input");
				var inputType = document.createAttribute("type");
						inputType.nodeValue = "button";
				var inputValue = document.createAttribute("value");
						inputValue.nodeValue = "alte mp3";
				var inputOnclick = document.createAttribute("onclick");
						inputOnclick.nodeValue = "RestoreMp3('', "+count+")";
					inputRestore.setAttributeNode(inputType);
					inputRestore.setAttributeNode(inputValue);
					inputRestore.setAttributeNode(inputOnclick);
		tdUrl.appendChild(inputUrl);
		tdUrl.appendChild(inputChoose);					
		tdUrl.appendChild(inputRestore);				
		zeile.appendChild(tdNr);
		zeile.appendChild(tdTitel);
		zeile.appendChild(tdDauer);
		zeile.appendChild(tdUrl);
		document.getElementById('tracklist').appendChild(zeile);

ZeitGeist · 05. März 2005

ok, habe ich mich wohl getäuscht, folgender Code funktioniert im FF und Opera, aber nicht im IE:

PHP:

document.getElementById('tracklist').innerHTML += '<tr><td>Test</td><td>Test</td><td>Test</td><td>Test</td></tr>';

Fehler:

Code:

Zeile 68 // die oben gepostete
Zeichen 2 // das d von document
Fehler: unbekannter Laufzeitfehler // herzlichen Dank
Code 0

Man ich liebe den IE und seine Fehlermeldungen

Warum?

[edit] Scheint wohl an der Tabelle zu liegen, wenn ich das versuche irgendwo anders hinzuschreiben dann gehts. Man so nen kack jetzt muss ich mir da müsehlig mitt css was zusamenbasteln. *kotz [/edit]

Malleus · 05. März 2005

Hallo Zeitgeist,
nicht aufregen, ist ist doch nur der MSIE ;-)

Folgender Code läuft mir MSIE 6.0 , Opera 7.54 und FF 0.9

<html>
<head>
<title>Malleus' TableInsertRowTest</title>
<script type="text/javascript">

var rowIndex=0;

function newRow()
{
var newTr = document.createElement( "TR" );

var newTd = document.createElement( "TD" );
newTd.innerHTML = "Text" + ( ++rowIndex );
newTr.appendChild( newTd );

var newTd = document.createElement( "TD" );
newTd.innerHTML = "<input type='text'>";
newTr.appendChild( newTd );

var oTableBody = document.getElementById( "myTable" );
if ( oTableBody.firstChild && oTableBody.firstChild.tagName == "TBODY" )
oTableBody = oTableBody.firstChild;

oTableBody.appendChild( newTr );
}
</script>

</head>
<body>
<table id="myTable" border="1">
</table>
<input type="button" id="myButton" value="neue Zeile einfügen" onclick="newRow()">
</body>

Ich denke 'mal, das kannst Du verwenden und entsprechend anpassen!

tschau

Frank

P.S: Wieso macht eigentlich Dein Thread immer einen Request zu "paypal", den zum Glück meine Firewall blockt?

ZeitGeist · 05. März 2005

also entweder spackt mein IE ab oder ich mach irgendwas falsch, der Code läuft im Opera und FireFox, aber nicht im IE
Die Tabelle hat mindestens 2 Zeilen, daher hab ich mir mal die firstchild-Abfrage gespart.

PHP:

function createTrackEntry()
{
	var newTr = document.createElement("tr");
	
	var newTd = document.createElement("td");
	newTd.innerHTML = "Text";
	newTr.appendChild(newTd);
	
	var newTd = document.createElement("td") ;
	newTd.innerHTML = '<input type="text" size="25">';
	newTr.appendChild( newTd );	
	
	var oTableBody = document.getElementById( "tracklist" );
	oTableBody.appendChild(newTr);
}

hab das ganze auch mal online gestellt (http://www.radicarl.de/ausdemregen/edit/discographie.php?id=0)
sind nen paar Fehlermeldung drinen weil ich nicht alle Dateien hochgeladen habe.

die anderen js dateien sind unter http://www.radicarl.de/ausdemregen/js/, kann mir aber nicht vorstellen das es daran liegt

Malleus · 05. März 2005

Hallo Zeitgeist,
hast Du obigen Quellcode von mir getestet?

MSIE erstellt normalerweise folgende Table:

<TABLE>
<THEAD> // für TH-Elemente
</THEAD>
<TBODY> // für TD-Elemente
</TBODY>
</TABLE>

Du mußt also Deine TD-Elemente in den TBODY stellen.

Deswegen

var oTableBody = document.getElementById( "myTable" );
if ( oTableBody.firstChild && oTableBody.firstChild.tagName == "TBODY" )
oTableBody = oTableBody.firstChild;
oTableBody.appendChild( newTr );

Wenn Du TH-Elemente hast, dann muß Du auf das zweite Child gehen. Okay?

Teste 'mal bitte meinen Quelltext von vorigem POST.

Tschau

Frank

ZeitGeist · 05. März 2005

danke jetzt klappts,
das es an der Groß und Kleinschreibung liegt, hätte ich mir ja nicht träumen lassen. Ich hasse IE

ZeitGeist · 05. März 2005

Ha gleich das nächste Problem, tritt natürlich wieder nur im IE auf.
Angezeigt wird alles wunderbar, nur der onclick im Button funktioniert nicht. der gibt mir nicht mal nen alert aus, wenn ich da eins reinsetzte

PHP:

var newTd = document.createElement( "TD" );
newTd.innerHTML = '<input type="button" value="mp3 wählen" onclick="chooseMp3('+count+')" /><input type="button" value="alte mp3" onclick="RestoreMp3(\'\', '+count+')" />';
newTr.appendChild( newTd );
var oTableBody = document.getElementById( "tracklist" );
if ( oTableBody.firstChild && oTableBody.firstChild.tagName == "TBODY" )
oTableBody = oTableBody.firstChild;

oTableBody.appendChild( newTr );

Malleus · 05. März 2005

Wie hast Du denn die Funktionen "chooseMp3" und "RestoreMp3" definiert?

In meiner Testdatei funktioniert alles:

<html>
<head>
<title>Malleus' TableInsertRowTest</title>
<script type="text/javascript">

var count=0;

function chooseMp3(count) // ein Parameter: Zahl
{
alert(count)
}

function RestoreMp3(s,count) // zwei Parameter String und Zahl
{
alert(s+":"+count)
}

function newRow()
{
var newTr = document.createElement( "TR" );

var newTd = document.createElement( "TD" );
newTd.innerHTML = "Text" + ( ++count );
newTr.appendChild( newTd );

var newTd = document.createElement( "TD" );
newTd.innerHTML = '<input type="button" value="mp3 wählen" onclick="chooseMp3('+count+')" /><input type="button" value="alte mp3" onclick="RestoreMp3(\'\', '+count+')" />';
newTr.appendChild( newTd );

var oTableBody = document.getElementById( "myTable" );
if ( oTableBody.firstChild && oTableBody.firstChild.tagName == "TBODY" )
oTableBody = oTableBody.firstChild;

oTableBody.appendChild( newTr );
}
</script>

</head>
<body>
<table id="myTable" border="1">
</table>
<input type="button" id="myButton" value="neue Zeile einfügen" onclick="newRow()">
</body>

Tschau

Frank

ZeitGeist · 06. März 2005

dein code tut bei mir nicht. Hoffe dass mein IE kaputt ist und das daran liegt.

Ich hab es mit nem alert direkt im onclick ausbrobiert. ohne Argument, mit Argument, hat alles nicht funktioniert

Malleus · 06. März 2005

Das Dein MSIE kaputt ist, glaub' ich eigentlich nicht.

Geh' mal auf meine Seite, ich hab' die Testdatei online gestellt.

http://www.javascript-spielereien.de/test/newrow.html

tschau

Frank

ZeitGeist · 07. März 2005

deine seite konnte ich nicht öffnen, der hat ne halbe ewigkeit gebraucht und nix ist passiert.

Habs mit nem anderen IE ausprobiert, bzw ausprobieren lassen, da ging es. muss wohl an meinem IE liegen.

Comet · 07. März 2005

@zg:

START > Ausführen

Code:

rundll32 setupwbv.dll,IE6Maintenance "C:\Programme\Internet Explorer\Setup\SETUP.EXE" /g "C:\WINDOWS\IE Uninstall Log.Txt"

Damit kannst du den IE reparieren

Malleus · 07. März 2005

@Zeitgeist:
Meine Seite ist wieder online. Sie war jetzt das zweite Mal innerhalb eines Monats down 8-(

Vielleicht sollte ich doch 'mal den Provider wechseln.

Das Dein MSIE "defekt" ist, kann ich immer noch nicht glauben. Wenn sonst alles geht außer "onclick" . Seltsam, aber okay, wenn's so ist.

Machst Du nochmal einen Test bei mir? Würde mich wirklich interessieren!

http://www.javascript-spielereien.de/test/newrow.html

tschau

Frank

ZeitGeist · 07. März 2005

Sehr seltsam.
Deine Seite funktioniert bei mir, meine mittlerweile auch. Ich habe die bei mir lokal auf dem Rechner getestet. Der IE hat im Internet bei mir JS verbot. Im Intranet ist JS jedoch erlaubt. Wenn ich die Seite bei mir lokal über meinen Webserver aufrufe zeigt er mir auch das Intranetsymbol an. JS funktioniert dann auch, allerdings nur eingeschränkt wie man hier gesehen hat. Ändere ich jetzt aber die JS einstellungen fürs Internet von deaktiviert auf aktiviert, funktioniert mein Skript aufeinmal auch lokal. mmmm Dazu fällt mir nur ein: "Die spinnen die Microsoftler".

Danke für deine Hilfe, danke auch dir Comet, aber wie es scheint ist er doch nicht kaputt (zumindest nicht mehr als sonst

)

[JS] Opera und IE Problem

Lounge-Member

Lounge-Member

Lounge-Member

Malleus

Guest

Lounge-Member

Malleus

Guest

Lounge-Member

Lounge-Member

Malleus

Guest

Lounge-Member

Malleus

Guest

Lounge-Member

Lounge-Member

Malleus

Guest

Lounge-Member

Malleus

Guest

Lounge-Member

Administrator

Malleus

Guest

Lounge-Member