Einträge editieren / Ajax

[Pit]

Hallo,

ich möchte Tabelleninhalte per Ajax ändern. Das klappt auch bereits sehr gut, leider habe ich aber noch Probleme damit, dass die neuen Einträge danach nicht gleichermaßen anklickbar sind, wie die alten.

Ich generiere per php Tabellenzeilen, die ihre ID dynamisch erhalten: (In datenset.id steht die neue ID des Eintrags, in datenset.wert steht der Inhalt)

echo ("<tr id='normalline_".$row[0]."'>
<td>".$row[1]."</td>
<td><i class=\"fa fa-edit fa-fw icon_edit_kat\" id='edit_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-remove fa-fw icon_remove_kat\" id='remove_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-sort fa-fw icon_edit_kat\"></i>&nbsp;&nbsp;
<i class=\"fa fa-save fa-fw icon_save_deaktiv_kat\" id='save_".$row[0]."'></i>&nbsp;&nbsp;
</td></tr>");

echo ("<tr id='editline_".$row[0]."' style='display:none'>
<td><input type=text name=\"edit_orig_".$row[0]."\" value=\"".$row[1]."\"></td>
<td><i class=\"fa fa-edit fa-fw icon_edit_kat\" id='edit_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-remove fa-fw icon_remove_kat\" id='remove_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-save fa-fw icon_save_kat\" id='save_".$row[0]."'></i>&nbsp;&nbsp;
</td></tr>");

Nach Sichtbarmachen der Tabellenzeile kann ich das input-Feld edit_orig_".$row[0]." editieren und das click-event über das save-icon auslösen.

Deshalb hier der JS-Teil, der aber auch php-generiert ist, daher als php-code.

        success : function(data) {
        var einzeldata = JSON.parse( data );
        for ( var i = 0; i < einzeldata.length; i++ ) {
        var datenset = einzeldata[ i ];
				}
				if ( datenset.typ === \"success\" ) {
				$('#editline_'+datenset.id).hide();
				$('#normalline_'+datenset.id).show();
				$('#normalline_'+datenset.id).html('<td>' + datenset.wert + '</td><td><i class=\"fa fa-edit fa-fw icon_edit_kat\" id=\"edit_\"' + datenset.id + '></i>&nbsp;&nbsp;&nbsp;<i class=\"fa fa-remove fa-fw icon_remove_kat\" id=\"remove_\"' + datenset.id + '></i>&nbsp;&nbsp;&nbsp;<i class=\"fa fa-sort fa-fw icon_edit_kat\"></i>&nbsp;&nbsp;&nbsp;<i class=\"fa fa-save fa-fw icon_save_deaktiv_kat\" id=\"save_\"' + datenset.id + '></i>&nbsp;&nbsp;</td>');

Der Eintrag wird editiert, der neue Eintrag nimmt die Stelle des alten Eintrages ein. Aber er ist nicht anklickbar, kann also kein 2. mal editiert werden.

Woran liegt das und wie stelle ich es an, dass hieraus ein wirklich runder Kreislauf entsteht, sodass ich einen Eintrag von mir aus 10 mal hintereinander editieren kann?

Pit

[Matthias Apsel]

Hallo Pit,

Woran liegt das

Wahrscheinlich daran, dass die neuen Elemente keinen Eventhandler besitzen.

und wie stelle ich es an, dass hieraus ein wirklich runder Kreislauf entsteht, sodass ich einen Eintrag von mir aus 10 mal hintereinander editieren kann?

Lausche an einem übergeordneten Element.

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

Wahrscheinlich daran, dass die neuen Elemente keinen Eventhandler besitzen.

Die neuen Elemente erhalten die Klasse icon_edit_kat. Diese sollte der Eventhandler sein.

$('.icon_edit_kat').click(function() {
	var id = this.id.split('_');
	$('#normalline_' + id[1]).toggle();
	$('#editline_' + id[1]).toggle();
 });

und wie stelle ich es an, dass hieraus ein wirklich runder Kreislauf entsteht, sodass ich einen Eintrag von mir aus 10 mal hintereinander editieren kann?

Lausche an einem übergeordneten Element.

Ah, das ist schonmal eine (überhaupt) gute Idee. Warum ist das in diesem Fall so entscheidend?

Pit

[dedlfix]

Tach!

Wahrscheinlich daran, dass die neuen Elemente keinen Eventhandler besitzen.

Die neuen Elemente erhalten die Klasse icon_edit_kat. Diese sollte der Eventhandler sein.

Das hatten wir doch auch schon mal. $('selector').click(handler). Der erste Teil liefert eine Liste. Nur an die Elemente dieser Liste wird der Klick-Handler angefügt. Und nur zum Zeitpunkt der Codeausführung. Das ist kein Auftrag an alle zukünftigen Elemente mit zufälligerweise demselben Selector Eventhandler zu verpassen. Neue Elemente erweitern weder früher erstellte Listen noch machen sie irgendwem etwas automatisch nach.

Lausche an einem übergeordneten Element. Ah, das ist schonmal eine (überhaupt) gute Idee. Warum ist das in diesem Fall so entscheidend?

Das übergeordnete Element bleibt bestehen und ändert sich nicht, egal was du mit seinen Nachfahren anstellst. Es hat seinen Eventhandler hinzugefügt bekommen und behält den auch Zeit seines Lebens, wenn du daran nichts änderst.

Außerdem gibt es generell in Javascript einen Event-Bubbling-Mechanismus, durch den alle Events den DOM-Baum hinauf weitergeleitet werden. Das passiert unabhängig davon ob das geklickte Element oder Elemente in diesem Weg einen Eventhandler besitzen. Hat aber ein übergeordnetes Element einen entsprechenden Eventhandler, dann wird der für alle entsprechenden Events der Nachfahren aufgerufen. Dabei wird auch ein event-Objekt übergeben, in dem in einer der Eigenschaften eine Referenz auf das eigentlich geklickte Element enthalten ist.

dedlfix.

[Pit]

Hallo,

Das hatten wir doch auch schon mal. $('selector').click(handler).

Ja, ich hatte bereits vermutet, dass das wieder in diese Richtung geht...

Lausche an einem übergeordneten Element. Ah, das ist schonmal eine (überhaupt) gute Idee. Warum ist das in diesem Fall so entscheidend?

Das übergeordnete Element bleibt bestehen und ändert sich nicht, egal was du mit seinen Nachfahren anstellst. Es hat seinen Eventhandler hinzugefügt bekommen und behält den auch Zeit seines Lebens, wenn du daran nichts änderst.

Alles ok, aber wie spreche ich das dann an? Ich habe versucht, meiner Tabellenzeile eine Klasse 'kat_zeile' hin zuzufügen. Aber wie lausch ich dann einem bestimmten Eintrag innerhalb dieser Klasse? Ich weiß, was ein Nachfahre ist, aber mein Versuch, ihn über $('.kat_zeile .icon_edit_kat').click(function() { anzusprechen, schlug fehl.

Vermutlich habe ich das falsch verstanden? Klärt mich bitte mal auf.

Pit

Außerdem gibt es generell in Javascript einen Event-Bubbling-Mechanismus, durch den alle Events den DOM-Baum hinauf weitergeleitet werden. Das passiert unabhängig davon ob das geklickte Element oder Elemente in diesem Weg einen Eventhandler besitzen. Hat aber ein übergeordnetes Element einen entsprechenden Eventhandler, dann wird der für alle entsprechenden Events der Nachfahren aufgerufen. Dabei wird auch ein event-Objekt übergeben, in dem in einer der Eigenschaften eine Referenz auf das eigentlich geklickte Element enthalten ist.

dedlfix.

[Gunnar Bittersmann]

@@Pit

Das hatten wir doch auch schon mal. $('selector').click(handler).

Ja, ich hatte bereits vermutet, dass das wieder in diese Richtung geht...

Das übergeordnete Element bleibt bestehen und ändert sich nicht, egal was du mit seinen Nachfahren anstellst. Es hat seinen Eventhandler hinzugefügt bekommen und behält den auch Zeit seines Lebens, wenn du daran nichts änderst.

Alles ok, aber wie spreche ich das dann an?

Das hatten wir doch auch schon mal. Event delegation.

Das haste jetzt nicht vermutet, dass das wieder in diese Richtung geht?

LLAP 🖖

[Pit]

@Gunnar, @dedlfix,

Das hatten wir doch auch schon mal. Event delegation.

Sagt mal, kennt Ihr den kompletten Forenverlauf auswendig, inklusive derer, die die Fragen gestellt haben? 😉 Nicht schlecht...

Das haste jetzt nicht vermutet, dass das wieder in diese Richtung geht?

Nein, hatte ich nicht. Grund: ... Sekunde, ich muß grad ausprobieren, ob mein Grund "nonsens" ist, ich melde mich gleich wieder.

Pit

[Gunnar Bittersmann]

@@Pit

Sagt mal, kennt Ihr den kompletten Forenverlauf auswendig, inklusive derer, die die Fragen gestellt haben? 😉 Nicht schlecht...

Nö, das nicht. Ich konnte mich aber dran erinnern, dass ich vor kurzem erst jemandem was zu event delegation geschrieben hatte. Das Posting schnell rausgesucht und gesehen: ah, der Pit war’s.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

… ah, der Pit war’s.

Wobei ich zugeben muss, dass ich eigentlich nach diesem Posting gesucht hatte, wo ich genau dasselbe Problem mit event delegation umgangen habe.

„Die Buttons bekommen ihre Funktion – per event delegation […] Dadurch muss man bei den später hinzukommenden Buttons nicht noch Eventhandler registrieren.“

LLAP 🖖

[Pit]

@@Gunnar Bittersmann

… ah, der Pit war’s.

Wobei ich zugeben muss, dass ich eigentlich nach diesem Posting gesucht hatte, wo ich genau dasselbe Problem mit event delegation umgangen habe.

Beides gut 😀

„Die Buttons bekommen ihre Funktion – per event delegation […] Dadurch muss man bei den später hinzukommenden Buttons nicht noch Eventhandler registrieren.“

Klappt das nur bei Buttons oder auch bei "<i>-Elementen". Ich frage, weil ich habs umgebaut und erhalte trotzdem kein eingefügtes element, das klickbar ist.

Pit

[Gunnar Bittersmann]

@@Pit

Klappt das nur bei Buttons oder auch bei "<i>-Elementen".

Wie die Matthias und Robert schon zu verstehen gaben, sind <i>-Elemente prinzipiell nicht interaktiv. Sie mögen für einen Teil der Nutzer clickbar sein, für einen anderen Teil aber unbedienbar. Verwende Buttons!

LLAP 🖖

[Gunnar Bittersmann]

@@Pit

Die neuen Elemente erhalten die Klasse icon_edit_kat.

Nachdem für die Elemente dieser Klasse ein Eventhandler registriert wurde – und zwar für die Elemente, die zum Zeitpunkt der Registrierung des Eventhandlers dieser Klasse angehörten.

☞ Codepen. Die Buttons foo und bar erhielten die Klasse durchs HTML, der Button baz durch JavaScript – und zwar vor der Registrierung des Eventhandlers. Der Button quz erhielt die Klasse durch JavaScript nach der Registrierung des Eventhandlers.

Beim Click auf foo und bar greift erwartungsgemäß der Eventhandler. Auch bei baz. Bei quz aber nicht!

LLAP 🖖

PS: Ich hab den Code in gutem neuen JavaScript geschrieben – als Zeichen, dass man jQuery nicht braucht.

[Pit]

Hallo Gunnar,

Die neuen Elemente erhalten die Klasse icon_edit_kat.

Nachdem für die Elemente dieser Klasse ein Eventhandler registriert wurde – und zwar für die Elemente, die zum Zeitpunkt der Registrierung des Eventhandlers dieser Klasse angehörten.

☞ Codepen.

Danke für den Code. Aber der ist wirklich leicht zu durchschauen. Mein Problem ist, dass Javascript aus verschiedeneen Dateien da reinspielt. Und da weiß ich nicht genau, wann welcher Code greift.

Pit

[Gunnar Bittersmann]

@@Pit

Mein Problem ist, dass Javascript aus verschiedeneen Dateien da reinspielt. Und da weiß ich nicht genau, wann welcher Code greift.

Sofern nicht mit Attributen (async, defer) anders angegeben, blockiert ein script-Element bis es fertig geladen und ausgeführt ist die weitere Verarbeitung der Seite.

D.h. auch das Rendern der Seite, weshalb viele Webseiten so arschlangsam sind, weil eingebundene Scripte, die wenn überhaupt, dann nicht synchron laufen müssen (Nutzer-Tracking, Werbung u.a. Schädlinge), das Rendern der Seite blockieren.

Die Scripte aus externen Dateien laufen in dem Fall also genauso aus stünden sie im HTML-Quelltext.

LLAP 🖖

[Robert B.]

Hallo Pit,

ich möchte Tabelleninhalte per Ajax ändern.

Nur zur Verständlichkeit: Steht in deinem Fall Tabelle einmal für eine HTML-Tabelle und einmal für eine Datenbank-Tabelle?

Das klappt auch bereits sehr gut, leider habe ich aber noch Probleme damit, dass die neuen Einträge danach nicht gleichermaßen anklickbar sind, wie die alten.

Das könnte daran liegen, dass in deinem gezeigten Beispiel keine anklickbaren Elemente (a oder button) vorhanden sind. Zudem werden hier nbsp fürs Padding missbraucht:

echo ("<tr id='normalline_".$row[0]."'>
<td>".$row[1]."</td>
<td><i class=\"fa fa-edit fa-fw icon_edit_kat\" id='edit_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-remove fa-fw icon_remove_kat\" id='remove_".$row[0]."'></i>&nbsp;&nbsp;
<i class=\"fa fa-sort fa-fw icon_edit_kat\"></i>&nbsp;&nbsp;
<i class=\"fa fa-save fa-fw icon_save_deaktiv_kat\" id='save_".$row[0]."'></i>&nbsp;&nbsp;
</td></tr>");

Nach Sichtbarmachen der Tabellenzeile kann ich das input-Feld edit_orig_".$row[0]." editieren und das click-event über das save-icon auslösen.

Siehe oben.

Viele Grüße
Robert

[Pit]

Hallo Robert,

Nur zur Verständlichkeit: Steht in deinem Fall Tabelle einmal für eine HTML-Tabelle und einmal für eine Datenbank-Tabelle?

Beides. Aber mit der Datenbanktabelle gibts keine Probleme. Deshalb ist in mienem Post die HTML Tabelle gemeint.

Das könnte daran liegen, dass in deinem gezeigten Beispiel keine anklickbaren Elemente (a oder button) vorhanden sind. Zudem werden hier nbsp fürs Padding missbraucht:

Nunja, das stimmt. Aber ein Container, welcher Art auch immer kann ja auch angeklickt werden. Das mit dem Padding stimmt natürlich, war jetzt einfach bequemer...

Gruß retoure, Pit

[Matthias Apsel]

Hallo Pit,

Das könnte daran liegen, dass in deinem gezeigten Beispiel keine anklickbaren Elemente (a oder button) vorhanden sind. Zudem werden hier nbsp fürs Padding missbraucht:

Nunja, das stimmt. Aber ein Container, welcher Art auch immer kann ja auch angeklickt werden.

Und was machen die Nutzer ohne Maus?

Bis demnächst
Matthias

[Robert B.]

Hallo Pit,

Nur zur Verständlichkeit: Steht in deinem Fall Tabelle einmal für eine HTML-Tabelle und einmal für eine Datenbank-Tabelle?

Beides. Aber mit der Datenbanktabelle gibts keine Probleme. Deshalb ist in mienem Post die HTML Tabelle gemeint.

OK, dann habe ich das richtig verstanden, Danke.

Das könnte daran liegen, dass in deinem gezeigten Beispiel keine anklickbaren Elemente (a oder button) vorhanden sind. Zudem werden hier nbsp fürs Padding missbraucht:

Nunja, das stimmt. Aber ein Container, welcher Art auch immer kann ja auch angeklickt werden.

Nun ja, mit CSS können Buttons gestylt und wie Buttons genutzt werden, auch von Leuten, die Screenreader verwenden. Aber das i ein Container sein soll, ist mir neu. Hast du eine Quelle dafür?

Das mit dem Padding stimmt natürlich, war jetzt einfach bequemer...

Jedes Mal    ist bequemer als ein Mal

i /* bzw. button */ {
    display: inline-block;
    padding: 0 1em;
}

Viele Grüße
Robert

[Pit]

Hallo Matthias, hallo Robert,

Nun ja, mit CSS können Buttons gestylt und wie Buttons genutzt werden, auch von Leuten, die Screenreader verwenden. Aber das i ein Container sein soll, ist mir neu. Hast du eine Quelle dafür?

Ok, Euer Argument überzeugt mich.

Das mit dem Padding stimmt natürlich, war jetzt einfach bequemer...

Jedes Mal    ist bequemer als ein Mal

i /* bzw. button */ {
    display: inline-block;
    padding: 0 1em;
}

Ich nutze die <i>s aber öfter und ein   ist 1 Klick, während ich die <i>s oder Buttons jedesmal neu definieren müßte. Sind denn die   wirklich so schlimm?

Pit

[Gunnar Bittersmann]

@@Pit

Ich nutze die <i>s aber öfter und ein   ist 1 Klick, während ich die <i>s oder Buttons jedesmal neu definieren müßte. Sind denn die   wirklich so schlimm?

Die <i>s sind wirklich so schlimm. Und ein Button bringt von Natur aus schon Padding links und rechts mit.

LLAP 🖖

[Pit]

Hi,

Die <i>s sind wirklich so schlimm. Und ein Button bringt von Natur aus schon Padding links und rechts mit.

Ok, ich habe alles auf Button umgebaut und bin wieder einen Schritt weiter. Nun ist der Button auch nach dem Edit klickbar, aber er hat die ID verloren.

alert(datenset.id); // hier ist die ID noch vorhanden
$('#normalline_'+datenset.id).html('<td>' + datenset.wert + '</td><td><button id=\"edit_\"' + datenset.id + ' class=\"icon_edit_kat\"><i class=\"fa fa-edit fa-fw\"></i></button><button class=\"icon_remove_kat\" id=\"remove_\"' + datenset.id + '><i class=\"fa fa-remove fa-fw\"></i></button><button class=\"icon_edit_kat\"><i class=\"fa fa-sort fa-fw\"></i></button><button id=\"save_\"' + datenset.id + ' class=\"icon_save_deaktiv_kat\"><i class=\"fa fa-save fa-fw\"></i></button></td>');

Und nachdem obiger String in den html-Teil eingesetzt wurde und der Edit-Button geklickt wurde, wird zwar der Event-Handler angesprochen, aber bei einem alert(this.id) ist nur "edit_" dort angekommen.

Warum jetzt das?

Pit

[Robert B.]

Hallo Pit,

alert(datenset.id); // hier ist die ID noch vorhanden
$('#normalline_'+datenset.id).html('<td>' + datenset.wert + '</td><td><button id=\"edit_\"' + datenset.id + ' class=\"icon_edit_kat\"><i class=\"fa fa-edit fa-fw\"></i></button><button class=\"icon_remove_kat\" id=\"remove_\"' + datenset.id + '><i class=\"fa fa-remove fa-fw\"></i></button><button class=\"icon_edit_kat\"><i class=\"fa fa-sort fa-fw\"></i></button><button id=\"save_\"' + datenset.id + ' class=\"icon_save_deaktiv_kat\"><i class=\"fa fa-save fa-fw\"></i></button></td>');

Da sind ja immer noch leere i-Elemente in den Buttons. Was soll das denn? Du brauchst bei richtiger Anwendung von CSS keine i-Elemente, aber du brauchst sinnvollen Inhalt im Button.

Und nachdem obiger String in den html-Teil eingesetzt wurde und der Edit-Button geklickt wurde, wird zwar der Event-Handler angesprochen, aber bei einem alert(this.id) ist nur "edit_" dort angekommen.

Ich sehe in obigem Code keinen Eventhandler. Wann bzw. wie wird der Code denn aufgerufen? Hast du mehr Details für uns?

Viele Grüße
Robert

[Pit]

Hi Robert,

Da sind ja immer noch leere i-Elemente in den Buttons. Was soll das denn? Du brauchst bei richtiger Anwendung von CSS keine i-Elemente, aber du brauchst sinnvollen Inhalt im Button.

Damit werden icons eingefügt, deshalb müssen die da sein.

Ich sehe in obigem Code keinen Eventhandler. Wann bzw. wie wird der Code denn aufgerufen? Hast du mehr Details für uns?

$('.katzeile')
   .on('click', 'button', function(event) {
...

und der obige Code war auch nicht komplett vollständig, es fehlten 2 zeilen, deshalb hier nochmal:

				if ( datenset.typ === \"success\" ) {
				$('#editline_'+datenset.id).hide();
				$('#normalline_'+datenset.id).show();
				$('#normalline_'+datenset.id).html('<td>' + datenset.wert + '</td><td><button class=\"icon_edit_kat\" id=\"edit_\"' + datenset.id + '><i class=\"fa fa-edit fa-fw\"></i></button><button class=\"icon_remove_kat\" id=\"remove_\"' + datenset.id + '><i class=\"fa fa-remove fa-fw\"></i></button><button class=\"icon_edit_kat\"><i class=\"fa fa-sort fa-fw\"></i></button><button id=\"save_\"' + datenset.id + ' class=\"icon_save_deaktiv_kat\"><i class=\"fa fa-save fa-fw\"></i></button></td>');

und die normalline hat im html-Teil die Klasse "katzeile":

echo ("<tr id='normalline_".$row[0]."' class='katzeile'>");

Gruß, Pit

[Robert B.]

Hallo Pit,

Da sind ja immer noch leere i-Elemente in den Buttons. Was soll das denn? Du brauchst bei richtiger Anwendung von CSS keine i-Elemente, aber du brauchst sinnvollen Inhalt im Button.

Damit werden icons eingefügt, deshalb müssen die da sein.

Und was spricht gegen <button class="fa fa-…">Icontext</button>?

Ich sehe in obigem Code keinen Eventhandler. Wann bzw. wie wird der Code denn aufgerufen? Hast du mehr Details für uns?

$('.katzeile')
   .on('click', 'button', function(event) {
...

Funktioniert das denn oder wird das Event auch an ein Array angehängt? Und bitte zeichne reinen JavaScript-Code als solchen aus, Danke.

und der obige Code war auch nicht komplett vollständig, es fehlten 2 zeilen, …

… und die Info, wo dieser Code aufgerufen wird. Ich sehe hier nur unzusammenhängende Code-Schnipsel, aus denen ich nicht sehe, wie die miteinander agieren.

Viele Grüße
Robert

[Pit]

Hallo Robert,

Und was spricht gegen <button class="fa fa-…">Icontext</button>?

Anscheinend nichts. Wußte ich aber nicht, ich hatte mich an das Beispiel von fa gehalten.

Ich sehe in obigem Code keinen Eventhandler. Wann bzw. wie wird der Code denn aufgerufen? Hast du mehr Details für uns?

$('.katzeile')
   .on('click', 'button', function(event) {
...

Funktioniert das denn oder wird das Event auch an ein Array angehängt? Und bitte zeichne reinen JavaScript-Code als solchen aus, Danke.

Ich weiß nicht genau, was Du meinst. Ich versuchs aber mal zu beschreiben: Beim ersten klick auf einen Tabelleneintrag (HTML, nicht db) wird aus dem nicht veränderbaren Tabelleneintrag ein Tabelleneintrag in einem input-feld. Zugleich wird aus einem "deaktivierten" Save-Symbol ein "aktives" Savesymbol. Bei Klick auf das "aktive" Savesymbol wird der Wert des inpiut-feldes per Ajax zum Server gesendet. Der widerum sendet einen JSON -Sring (Objekt?) zurück an den Client. Der Client wertet aus und macht aus der "Editzeile" wieder eine "Normalzeile" der HTML-Tabelle. Hierbei setzt er den neuen Wert (das ist der zuvor vom User eingetragene Wert) ein und vergibt der Zeile eine ID. Und genau hier hakt es. Die neue "Normalzeile" ist zwar wieder anklickbar und das Event wird auch wieder angeklickt, aber es kommt keine ID mehr an. Da die ID aber 1 Schritt vor der Vergabe noch bekannt ist, vermute ich, es scheitert an der Vergabe der ID an die Zeile. Dann wäre aber die Frage, warum JS es schafft, die Editzeile zur Normalzeile zu machen, denn auch hier wird die ID benötigt.

Deshalb wäre meine Frage an dieser Stelle: Wie kann ich prüfen, ob JS den Buttons die ID weiterreicht?

if ( datenset.typ === "success" ) {
alert(datenset.id); // Hier wird noch die korrekte ID ausgegeben
$('#editline_'+datenset.id).hide();
$('#normalline_'+datenset.id).show(); // Hier wurde die korrekte Zeile der Tabelle "getoggelt"
$('#normalline_'+datenset.id).html(
'<td>' + datenset.wert + '</td> \
<td> \
<button class="icon_edit_kat fa fa-edit fa-fw" id="edit_"' + datenset.id + '></button> \
<button class="icon_remove_kat fa fa-remove fa-fw" id="remove_"' + datenset.id + '></button> \
<button class="icon_edit_kat fa fa-sort fa-fw"></button> \
<button id="save_"' + datenset.id + ' class="icon_save_deaktiv_kat fa fa-save fa-fw"></button> \
</td>');

Pit

[Robert B.]

Guten Morgen Pit,

Und was spricht gegen <button class="fa fa-…">Icontext</button>?

Anscheinend nichts. Wußte ich aber nicht, ich hatte mich an das Beispiel von fa gehalten.

Nachdem @Gunnar Bittersmann und ich mehrfach darauf hingewiesen haben, dass i falsch ist … Man kann Gelerntes auch direkt umsetzen 😉

$('.katzeile')
   .on('click', 'button', function(event) {
...

Funktioniert das denn oder wird das Event auch an ein Array angehängt? Und bitte zeichne reinen JavaScript-Code als solchen aus, Danke.

Ich weiß nicht genau, was Du meinst.

Als, noch einmal und folge ggf. dem Link: Liefert $('.katzeile') eventuell ein Array zurück und die on-Methode hängt einen Eventhandler an das Array oder hängt das Konstrukt $('.katzeile').on(…) den Eventhandler an jedes Element der Klasse katzeile?

Und der Hinweis auf „reinen JavaScript-Code“ bezieht sich darauf, dass du hier JavaScript-Code zeigst, aber dem Forum sagst, dass es PHP sei.

Ich versuchs aber mal zu beschreiben:

Und ich grätsche mit dem Satz hinein, auf den du nicht eingehst:

… und die Info, wo dieser Code aufgerufen wird. Ich sehe hier nur unzusammenhängende Code-Schnipsel, aus denen ich nicht sehe, wie die miteinander agieren.

Viele Grüße
Robert

[Pit]

Hi Robert,

Und ich grätsche mit dem Satz hinein, auf den du nicht eingehst:

Schade, denn mein Ansatz war schon der Richtige und der Code, der fehlerhaft ist, stand hier schon einige Male. Durch meine Erklärung, in die Du hineingerätscht bist, wurde der Fehler übrigens komplett eingegrenzt und so habe ich ihn dann auch gefunden und korrigiert.

Trotzdem 1000 Dank an Dich, dedlfix, Matthias und Gunnar, denn mein Code ist durch euch viel besser geworden. Die leidigen <i>s sind weg, Buttons da, die nbsp; sind futsch, usw. Hab wieder viel gelernt.

Die Auflösung gibts natürlich auch noch:

$('#normalline_'+datenset.id).html(
				'<td>' + datenset.wert + '</td> \
				<td> \
				<button class="icon_edit_kat fa fa-edit fa-fw" id="edit_"' + datenset.id + '></button> 

Autsch, nicht wahr? 😉

Gruß und nochmal danke fürs Helfen, Pit

[Matthias Apsel]

Hallo Pit,

$('#normalline_'+datenset.id).html(
				'<td>' + datenset.wert + '</td> \
				<td> \
				<button class="icon_edit_kat fa fa-edit fa-fw" id="edit_"' + datenset.id + '></button> 

Autsch, nicht wahr? 😉

Autsch. Der Button braucht noch eine (ggf. visuell versteckte) Beschriftung.

Bis demnächst
Matthias

[Pit]

Der Button braucht noch eine (ggf. visuell versteckte) Beschriftung.

Läßt sich einrichten.

Pit

[Gunnar Bittersmann]

@@Pit

Da sind ja immer noch leere i-Elemente in den Buttons. Was soll das denn? […] Damit werden icons eingefügt, deshalb müssen die da sein.

Nei-en! i steht nicht für icon. (Framework-Entwickler, die das anders sehen, haben oftmals keine Ahnung von HTML.)

„Das i-Element repräsentiert einen Textabschnitt in einer anderen Artikulierung oder Stimmung oder anderen Abweichung vom restlichen Text, die auf eine andersartige Qualität des Texts hindeutet; bspw. eine taxonomische Kennzeichnung, einen Fachbegriff, einen Begriff oder eine Redewendung aus einer anderen Sprache, eine Transliteration, einen Gedanken oder den Namen eines Schiffes in westlichen Texten.“ [Spec]

Sinvolle Anwendungen dafür findest du in Verwendung von b- und i-Elementen.

Für Icons ist das sinnvolle Element: svg. Vektorgrafiken, nicht Rastergrafiken.

LLAP 🖖

[Robert B.]

Hallo @Gunnar Bittersmann,

Nei-en! i steht nicht für icon. (Framework-Entwickler, die das anders sehen, haben oftmals keine Ahnung von HTML.)

Das ist korrekt 😉

Für Icons ist das sinnvolle Element: svg. Vektorgrafiken, nicht Rastergrafiken.

Ich vermute, dass Pit gar ein Icon-Font verwendet; fa deutet auf Font Awesome hin.

Viele Grüße
Robert

[Gunnar Bittersmann]

@@Robert B.

Ich vermute, dass Pit gar ein Icon-Font verwendet

Dieser Unsinn ist wohl nicht so schnell nicht totzukriegen. 😟

LLAP 🖖

[Bernd]

Darf ich fragen warum du so abweisend auf die fontawesome reagierst? Diese werden von Seiten wie z.B.:

• https://www.washingtonpost.com/
• https://aws.amazon.com/de/
• https://www.stanford.edu/
• https://www.whitehouse.gov/

demnach können diese nicht sooo schlecht sein. Außerdem musst du kein <i> benutzten, diese lassen sich auf auf <span> anwenden. Nicht immer alles auf Entwickler schieben, auch die Nutzer sollten sich etwas Gedanken machen? Außerdem gibt es seit ein paar Wochen die neue Version.

[Gunnar Bittersmann]

@@Bernd

Darf ich fragen warum du so abweisend auf die fontawesome reagierst? Diese werden von Seiten wie z.B.:

„Machen andere auch so“ steht mit ganz oben auf der Liste der unsinnigsten Begründungen für irgendwas.

demnach können diese nicht sooo schlecht sein.

Warum Icon-Fonts schlecht sind, gibt’s z.B. von Tyler Sticka in Seriously, Don’t Use Icon Fonts zu lesen und von Sara Soueidan in Ditching Icon Fonts for SVG zu hören.

LLAP 🖖

[Robert B.]

Hallo Pit,

Das mit dem Padding stimmt natürlich, war jetzt einfach bequemer...

Jedes Mal    ist bequemer als ein Mal

i /* bzw. button */ {
    display: inline-block;
    padding: 0 1em;
}

Ich nutze die <i>s aber öfter und ein   ist 1 Klick, während ich die <i>s oder Buttons jedesmal neu definieren müßte.

Du braucht doch eh jedes Mal einen Button. Mein CSS kannst du zentral einmal definieren, während deine nbsp jedes Mal schreiben musst. Ich sehe da keinen Vorteil.

Sind denn die   wirklich so schlimm?

Das sind „non-breaking space“ und nur genau dafür gedacht. Im Gegensatz zur CSS-Lösung sind sie redundant und machen den HTML-Code unübersichtlicher.

Viele Grüße
Robert

[Pit]

Hallo Robert,

Das sind „non-breaking space“ und nur genau dafür gedacht.

Ich sehe Deine Argumente ein. Trotzdem muß ich mal fragen: Wo würden denn die „non-breaking space“ eingesetzt, also wo sind sie für gedacht?

Pit

[Robert B.]

Hallo Pit,

Trotzdem muß ich mal fragen: Wo würden denn die „non-breaking space“ eingesetzt, also wo sind sie für gedacht?

Das sind geschützte Leerzeichen. Die werden überall dort eingesetzt, wo zwischen zwei Worten kein Zeilenumbruch stattfinden soll.

Viele Grüße
Robert

[Pit]

Hi Robert,

Das sind geschützte Leerzeichen. Die werden überall dort eingesetzt, wo zwischen zwei Worten kein Zeilenumbruch stattfinden soll.

Oh, wieder was gelernt! Danke.

Pit

[Gunnar Bittersmann]

@@Robert B.

Das sind geschützte Leerzeichen. Die werden überall dort eingesetzt, wo zwischen zwei Worten kein Zeilenumbruch stattfinden soll.

Oder zwischen Wort und Zahl: Seite 3. Oder zwischen Zahl und Wort: 1199 Berlin, 1,435 Meter. Zwischen Zahl und Maßeinheitskürzel: 1,435 m, 3,50 € – wenngleich da besser das dünne geschützte Leerzeichen U+202F steht: 1,435 m, 3,50 €.

Oder zwischen Zifferngruppen: Telefon: 32 16 8 – auch hier besser: Telefon: 32 16 8.

Oder zwischen Wort und Interpunktionszeichen …: Interpunktions­zeichen …. Das Auslassungszeichen soll ja nicht allein in einer neuen Zeile stehen.

Insbesondere im Französischen, wo geplenkt wird:
« Toute la Gaule est occupée par les Romains... Toute ? Non ! Car un village peuplé d’irréductibles Gaulois résiste encore et toujours à l’envahisseur. »

« Toute, Toute ? Non !, à l’envahisseur. »

LLAP 🖖

[MudGuard]

Hi,

Oder zwischen Zifferngruppen: Telefon: 32 16 8 - auch hier besser: Telefon: 32 16 8.

Skandalös!

cu,
Andreas a/k/a MudGuard

[Pit]

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

Pit

[MudGuard]

Hi,

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

das mit der Rosi 😉

cu,
Andreas a/k/a MudGuard

[Pit]

Hi,

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

das mit der Rosi 😉

Genau das meinte ich auch... 😉

Pit

[Gunnar Bittersmann]

@@Pit

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

das mit der Rosi 😉

Genau das meinte ich auch... 😉

Ich meinte das mit den Plattfüßen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

das mit der Rosi 😉

Genau das meinte ich auch... 😉

Ich meinte das mit den Plattfüßen.

Rosi hat keine Plattfüße.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Skandalös!

Auch so'n alter Sack 😉 Du meintest doch das konjunkturelle, nicht?

das mit der Rosi 😉

Genau das meinte ich auch... 😉

Ich meinte das mit den Plattfüßen.

Rosi hat keine Plattfüße.

Ihr Vater kann mich mal.

LLAP 🖖