JS Inline Edit Table .bur Funktion geht nicht

[Lars]

Moin,

ich habe ein Problem irgendwie wir das Verlassen der editierbaren Tabelle nicht erkannt.

Warum erkennt JS das nicht wenn ich die Tabelle mit einem Klick verlasse?

In der Index steht der JS Code und die Tabelle wird durch aufrufen einer php Datei erzeugt.

	$(function(){
	//acknowledgement message
    var message_status = $("#status");
    $("td[contenteditable=true]").blur(function(){
        var field_userid = $(this).attr("id") ;
        var value = $(this).text() ;
        $.post('ajax.php' , field_userid + "=" + value, function(data){
            if(data != '')
			{
				message_status.show();
				message_status.text(data);
				//hide the message
				setTimeout(function(){message_status.hide()},3000);
			}
        });
    });
	});

echo "<table id='tb1'>
<tr>
<th>ID</th>
<th>Tag</th>
<th>Messart</th>
<th>Messbereich</th>
<th>Hersteller</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
	echo "<td id='id'>" . $row['id'] . "</td>";
    echo "<td id='tag_name' contenteditable='true'>" . $row['tag_name'] . "</td>";
    echo "<td id='mess_art' contenteditable='true'>" . $row['mess_art'] . "</td>";
    echo "<td id='mess_bereich' contenteditable='true'>" . $row['mess_bereich'] . "</td>";
    echo "<td id='hersteller' contenteditable='true'>" . $row['hersteller'] . "</td>";
    echo "</tr>";
}
echo "</table>";

[beatovich]

hallo

ich habe ein Problem irgendwie wir das Verlassen der editierbaren Tabelle nicht erkannt.

  	{
  		message_status.show();
  		message_status.text(data);
  		//hide the message
  		setTimeout(function(){message_status.hide()},3000);
  	}

Welche Magie bindet die methode .show() an dein Element, das in message_status gespeichert ist?

[Rolf b]

Das #status Element ist im HTML nicht gezeigt, aber wegen

var message_status = $("#status");

sollte das funktionieren. Oder übersehe ich was?

Rolf

[Rolf b]

Kann ich nicht bestätigen - in einem Fiddle hat es funktioniert (sofern man im Fiddle nicht jQuery 3.2.1 einstellt, das ist irgendwie buggy und kennt dann keine $ Funktion).

In deinem Code sehe ich auch keine Auffälligkeiten.

Diagnosehinweise:

• kennst Du die Entwicklerwerkzeuge deines Browsers?
• stehen in der Konsole der Entwicklerwerkzeuge des Browsers irgendwelche Fehlermeldungen ("Syntax Terror" & Co)?
• setze einen Breakpoint auf die erste Zeile der Handler-Funktion. Hält er da?
• trenne mal den $("td[...]") Aufruf von der Event-Registrierung und speichere das Ergebnis vom $(td) Aufruf (also das matched set von jQuery) in einer Variablen. Halte da mit dem Debugger und schau dir das length Property des matched set an. Hat jQuery überhaupt was gefunden?

Allgemeine Hinweise:

• IDs in einem HTML Dokument sollen eindeutig sein. Ein getElementById() Aufruf findet nur das erste Element von mehreren mit der gleichen ID. Es ist daher nicht hilfreich, den td Elementen IDs zu geben, auch wenn jQuery oder die querySelector Funktion das mit entsprechenden Parent-Angaben hinbekommen. Wenn Du im Stande sein willst, die Spalten deiner Tabelle namentlich zu identifizieren, nimm besser Klassen.
• Den statischen Teil deines HTML musst Du nicht mit Echo ausspucken, du kannst auch einfach mit ?> den PHP Parser abschalten und nachher mit <?php wieder einschalten.

Rolf

[Lars]

Moin,

leider keine Fehler in der Konsole.

Was ich nun noch mal versucht haben:

function myFunction() {
    console.log(document.getElementsByName('tag_name'));
}

Und dann per Button einfach mal getriggert.

Ausgabe ist immer:

NodeList [  ]  index.html:22:5
NodeList [  ]  index.html:22:5
NodeList [  ]  index.html:22:5
NodeList [  ]  index.html:22:5
NodeList [  ]

Obwohl ist das sehen in der Website sehen kann

ID Tag 0 F0450

[Rolf b]

Bitte wende die richtigen DOM Funktionen an, dann klappt das auch :)

getElementsByName findet alle Elemente, deren name Attribut einen bestimmten Wert hat. Im Funktionsnamen steht "Elements" - ein Plural - darum liefert sie eine NodeList als Ergebnis, kein einzelnes Element.

Deine TD haben aber keinen Namen, sondern eine ID

getElementById findet dagegen ein Element mit einem bestimmten Wert des id Attributs - und wie der Funktionsname schon besagt: sie liefert nur eins. Und zwar das erste. Im Dokument.

querySelector findet das erste Element, auf die ein bestimmter CSS Selektor passt. Mit DIESER Methode kann man bei mehrdeutigen IDs auch die weiteren Elemente mit der gleichen ID finden, indem man einen CSS Selektor baut, der einen Pfad dorthin spezifiziert.

querySelectorAll findet alle Elemente, auf die ein bestimmter CSS Selektor passt und liefert eine NodeList. Bei mehrdeutig vergebenen IDs liefert sie alle Elemente mit dieser ID, was aber nicht heißt, dass das mehrdeutige IDs sanktionieren würde.

Rolf

[JürgenB]

Hallo Rolf,

nur als Nachtrag: die ID eines Elements muss eindeutig sein.

_
Gruß
Jürgen

[MudGuard]

Hi,

getElementById findet dagegen ein Element mit einem bestimmten Wert des id Attributs - und wie der Funktionsname schon besagt: sie liefert nur eins. Und zwar das erste. Im Dokument.

Da id-Attributwerte innerhalb des Dokuments eindeutig sein müssen, kann es keine weiteren geben.

querySelector findet das erste Element, auf die ein bestimmter CSS Selektor passt. Mit DIESER Methode kann man bei mehrdeutigen IDs auch die weiteren Elemente mit der gleichen ID finden,

Es darf keine mehrdeutigen IDs geben …

cu,
Andreas a/k/a MudGuard

[Tabellenkalk]

Hallo,

Da id-Attributwerte innerhalb des Dokuments eindeutig sein müssen, kann es keine weiteren geben.

Es darf keine mehrdeutigen IDs geben …

… weil nicht sein kann, was nicht sein darf⁉️

Gruß
Kalk

[JürgenB]

Hallo

… weil nicht sein kann, was nicht sein darf⁉️

na ja, das Verhalten der Browser zu testen, wenn die Regeln eingehalten werden, ist schon aufwändig genug. Da sollte man sich nicht auch noch Tests bzgl. des Verhaltens im Fehlerfall aufhalsen.

Gruß
Jürgen

[Rolf b]

… weil nicht sein kann, was nicht sein darf⁉️

Es darf nicht, KANN aber schon - wie von mir oben beschrieben. Durch entsprechende Zugriffe kann man eine ID in einem bestimmten Scope suchen und dann mit mehrdeutigen IDs erfolgreich hantieren kommen. Der Gedanke der HTML Designer war aber durchaus ein anderer, was mann allein schon daran sieht, dass getElementById nur auf dem document definiert ist.

Browser sind recht tolerante Gesellen und akzeptieren vieles, was laut Spec nicht erlaubt ist. Deshalb funktionieren die von mir genannten Möglichkeiten, mit mehrdeutigen ID-Werten umzugehen. Aber man ist damit außerhalb der Spec, man ist auf die Toleranz des Browsers angewiesen, und sollte es deshalb sein lassen.

Abgesehen davon hab ich auf die Eindeutigkeit schon am 22.3. hingewiesen :)

Rolf