Inline editing

[Bernd]

Guten Morgen,

gibt es eine einfache Möglichkeit ein inline editing umzusetzten? Ich habe folgende Tabelle

<table>
  <tr>
    <th>Anzahl</th>
    <th>Preis</th>
    <th>am 20.05.2019 <div></div></th>
  </tr>
  <tr>
    <td>10</td>
    <td>9,90 €</td>
    <td>Bierdampf</td>
   </tr>
   <tr>
     <td>2</td>
     <td>5,54 €</td>
     <td>15.06.2019 <div></div></td>
   </tr>
</table>

Im leeren Div soll später entweder ein Wert aus der Datenbank stehen also z.B.

<table>
  <tr>
    <th>Anzahl</th>
    <th>Preis</th>
    <th>am 20.05.2019 <div>Tor 1</div></th>
  </tr>
  <tr>
    <td>10</td>
    <td>9,90 €</td>
    <td>Bierdampf</td>
   </tr>
   <tr>
     <td>2</td>
     <td>5,54 €</td>
     <td>15.06.2019 <div> Tor 2. Bitte Rücksprache mit Max Mustermann halten</div></td>
   </tr>
</table>

Jetzt möchte ich gerne in das Feld? Klicken und dort den Wert direkt aus der Tabelle heraus ändern und diesen dann in die Datenbank wieder schreiben. Das ganze sollte am besten beim verlassen des Feldes passieren, Quassie wie von Geisterhand.

Ist dieses a) so möglich und b) wie müsste ich da dran gehen? Ich weiß dafür wird man jQuery und ajax benötigen.

[pl]

S gibt mehrere Möglichkeiten. Hier ist eine von denen, MFG

[dedlfix]

Tach!

Jetzt möchte ich gerne in das Feld? Klicken und dort den Wert direkt aus der Tabelle heraus ändern und diesen dann in die Datenbank wieder schreiben. Das ganze sollte am besten beim verlassen des Feldes passieren, Quassie wie von Geisterhand.

Ist dieses a) so möglich und b) wie müsste ich da dran gehen? Ich weiß dafür wird man jQuery und ajax benötigen.

Na klar. Man kann das DOM manipulieren, man kann auf Ereignisse reagieren, es gibt Ereignisse beim Verlassen von Feldern, und Ajax kennst du ja schon. Alles nur eine Frage, die Einzelheiten zu probieren und entsprechend zu einem Ganzen zusammenzusetzen.

Dann wäre da noch die Frage, ob das eine Oberfläche nur für dich und Eingeweihte sein soll, oder soll das öffentlich bedienbar sein? Denn, dass man da zum Bearbeiten klicken muss, ist nicht unbedingt intuitiv, und sicherlich auch nicht allgemein zugänglich. Wenn ich solche Inline-Editoren verwende, dann hab ich da eine Extra-Spalte mit Bedienelementen (Buttons) zum Starten des Editierens (und gegebenenfalls anderer Vorgänge).

dedlfix.

[Bernd]

Hallo,

ich habe es mir etwas genauer überlegt und habe mich für folgende Option entschieden

Damit sollte jedem Klar sein dass er in das Feld Standort etwas schreiben kann. Nun kommen wir zur Umsetzung. Mein HTML für diese Zeile sieht so aus

<td>
	
	<span>
		<label for="artikelstandort">Standort</label>	
		<input type="text" name="artikelstandort" id="artikelstandort">
	</span>

</td>

Die Bereiche für die restlichen Angaben habe ich weggelassen, sind hierfür ja nicht wichtig? Meine Idee ist weiterhin folgende:

• User Klick in das Feld, fängt an zu schreiben klickt wieder raus bzw. springt mit der Tabulatortaste weiter und der Wert wird im Hintergrund gespeichert. Dazu benötige ich a) Ajax in meinem Fall jQuery da ich dieses eh schon im Einsatz habe und b) muss ich drauf achten wenn der User das Feld verlässt.

Und genau bei diesen beiden Punkten habe ich derzeit Probleme. Wie würdet ihr dieses umsetzten?

Mein zweites Problem, ich muss irgendwie ein Verstecktes Feld mit einfügen um die Artikel-ID mir zu merken? Oder kann ich mit data-xxx arbeiten?

[pl]

Und genau bei diesen beiden Punkten habe ich derzeit Probleme.

Welche denn?

Wie würdet ihr dieses umsetzten?

Überlegen ob alle auf der Seite getätigten Eingaben gesendet werden oder nur diejenigen einer Zeile. Es läuft also entweder auf mehrere Objekte hinaus oder nur auf ein Objekt. Was natürlich entsprechend serialisert werden muss. MFG

PS/Idee: Einträge für Zellen mit prompt() erfassen bzw. editieren.

[Bernd]

Welche denn?

ich muss ja auf zwei Sachen achten, entweder verlässt der User das Feld per Klick, wenn er irgendwo außerhalb des Felder klick oder eben wenn er mit der Tastatur springt.

Überlegen ob alle auf der Seite getätigten Eingaben gesendet werden oder nur diejenigen einer Zeile. Es läuft also entweder auf mehrere Objekte hinaus oder nur auf ein Objekt. Was natürlich entsprechend serialisert werden muss. MFG

In diesem Fall gibt es hier nur ein Feld. Ich dachte jetzt an folgende Umsetzung

<input 
  type="text" 
  name="artikelstandort" 
  id="artikelstandort" 
  data-projektID="" 
  data-warenkorbID=""

>

Den Wert von data- kann ich dann mit formData auslesen?

var formData = {
 'projektID':   $(this).data("projektID"),
 'warenkorbID': $(this).data("warenkorbID")	
};

oder bin ich hier auf dem falschen Weg?

[pl]

Beim Erstellen einer FormData-Instanz kannst Du ein komplettes <form> übergeben, da ist dann alles drin was name+value hat. Ansonsten gibts noch die Methode .append(name,value); zum Anhängen einzelner Werte.

Beachte daß, wenn es mehrere <input> mit gleichem Namen gibt, diese namen entsprechend gekennzeichnet werden müssen damit PHP ein Array daraus macht. Da könntest Du auch die ID reintun, damit die Werte eindeutig zugeordnet werden können. Also so was in der Art artikelstandort[123].

Also <form> um Tabelle rum, das <form> an FormData übergeben und ab geht die POST. MFG

[pl]

Den Wert von data- kann ich dann mit formData auslesen?

var formData = {
 'projektID':   $(this).data("projektID"),
 'warenkorbID': $(this).data("warenkorbID")	
};

oder bin ich hier auf dem falschen Weg?

Ja. Unter FormData verstehe ich var fd = new FormData(form); wobei form das <form>-Element ist was Du hiermit übergibst.

Hierzu gibts Du zweckmäßig die Namen

<input name="artikelstandort[3-4]" (projektID=3, warenkorbID=4)

baust dein <form> um die ganze Tabelle drumherum und sendest das alles auf einen Rutsch. Serverseitig kriegst Du das alles ganz genau aus dem POST Array. Z.B. $_POST['artikelstandort']['3-4']

Da sollte jetzt eigentlich der Groschen fallen 😉

PS: Vergiß jQuery für Ajax. Mach das besser selber.

Verbessert:

<input name="artikelstandort[3][4]"

für den wahlfreien Zugriff. Und so geht das auch ohne AJAX. Einfacher gehts nicht.

[dedlfix]

Tach!

• User Klick in das Feld, fängt an zu schreiben klickt wieder raus bzw. springt mit der Tabulatortaste weiter und der Wert wird im Hintergrund gespeichert. Dazu benötige ich a) Ajax in meinem Fall jQuery da ich dieses eh schon im Einsatz habe und b) muss ich drauf achten wenn der User das Feld verlässt.

b) geht mit einem Eventhandler auf das passende Event registriert. Eine Liste der Events von input-Elementen ist dokumentiert. Wie man Event-Handler schreibt, ist ebenfalls nichts neues. Die Frage ist nun, welches Event man da nehmen möchte, oder vielleicht auch mehrere. Es gibt jedenfalls Events für das Verlassen des Feldes (sprich: verlieren des Focus), wenn der Inhalt geändert wird, wenn Tasten gedrückt werden. Es gibt noch mehr, aber das waren wohl die wichtigsten, die man in Betracht ziehen möchte.

a)jax-Requests sind ebenfalls seit langem bekannt und dokumentiert, auch in der Geschmacksrichtung jQuery.

Mein zweites Problem, ich muss irgendwie ein Verstecktes Feld mit einfügen um die Artikel-ID mir zu merken? Oder kann ich mit data-xxx arbeiten?

Beides ist möglich, data-Attribute und Hidden-Input, aber auch eine Variable in Javascript.

dedlfix.

[Rolf B]

Hallo dedlfix,

ich würde hidden input nehmen. Für den Fall, dass JS deaktiviert ist, kann man dann immer noch einen Save-Button unter die Liste setzen (den man als PE im Startup des JS verschwinden lässt). Aus diesem Grund würde ich auch ein Form um die komplette Tabelle legen, nicht um jede Artikelzelle

Der Eventhandler für das change-Event kann sich dann das hidden input passend zum name des Standort-Input heraussuchen (leichte Fingerübung in jQuery-DOM-Navigation) und ID+Standort zum Server ajaxen. Ob man die Daten in ein FormData verpackt oder einfach als JavaScript Objektliteral
{ id: idelement.value, standort: standortelement.value },
das ist fast egal. Der IE unterstützt FormData ab Version 10, und nur in homöopathischer Dosis, das wäre ein Kriterium. Um das Form-Encoding kümmert sich meines Wissens jQuery oder sogar XMLHttpRequest automagisch.

Rolf

[dedlfix]

Tach!

ich würde hidden input nehmen. Für den Fall, dass JS deaktiviert ist, kann man dann immer noch einen Save-Button unter die Liste setzen (den man als PE im Startup des JS verschwinden lässt). Aus diesem Grund würde ich auch ein Form um die komplette Tabelle legen, nicht um jede Artikelzelle

Warte mal, wenn ich mir das recht überlege, war das ja nicht nur irgendeine ID, sondern das war die ID des Datensatzes der jeweiligen Zeile. Wenn wir nur den Javascript-Fall betrachten, dann ist es egal, wo genau die pro Zeile abgelegt ist. Das ist eine einmal zu definierende Regel, sich dorthin zu navigieren und den Wert zu holen.

Aber wenn die gesamte Geschichte auch ohne Javascript funktionieren soll, dann muss man etwas mehr Festlegungen treffen. Sollen in dem Fall wirklich alle Datensätze abgeschickt werden, auch die nicht veränderten? Dann wäre ein großes Form sinnvoll. Da man dafür die einzelnen Eingabefelder unterscheiden muss, hilft eine anderswo stehende ID nicht viel. Sie muss stattdessen im Namen des Input-Elements vorkommen, damit man serverseitig feststellen kann, für welchen Datensätze jetzt die einzelnen Werte sind.

Alternativ je ein Form pro Zelle (zeilenweise geht es nicht in table-tr-td zu schachteln) und da kann dann die ID auch in einem extra Hidden-Input stehen.

dedlfix.

[pl]

Um das Form-Encoding kümmert sich meines Wissens jQuery oder sogar XMLHttpRequest automagisch.

So isses. Sobald FormData im POST Request ist, wird spontan ein Requestheader

Content-Type: multipart/form-data;boundary=123

gesendet samt Boundary. MFG

[Bernd]

Hallo,

ich habe es so versucht

$('#artikelstandort').click(function() {

		var formData = {
			'standort':    $(this).val(),
			'projektID':   $(this).data("projektID"),
			'warenkorbID': $(this).data("warenkorbID")		
		};
				
		console.log(formData);

		$.ajax({
			
			url:  "updateArtikelstandort.php",
			type: "post",
			data: formData,
		 
			success:function(d) {
		  		
			}
		});
}); 

console.log(formData) sagt mir folgendes

{standort: "", projektID: undefined, warenkorbID: undefined}

Irgendetwas mache ich noch falsch?

[dedlfix]

Tach!

$('#artikelstandort').click(function() {

Bist du sicher, dass click das richtige Event ist, auf das du reagieren möchtest?

Und haben alle deine Input-Felder dieselbe ID artikelstandort? Eine ID ist zur dokumentweiten Identifizierung vorgesehen und muss dafür einmalig sein. Hat aber erstmal keine Auswirkungen auf das konkrete Problem, weil du ja mit this das letztlich auslösende Element reingereicht bekommst.

dedlfix.

[Bernd]

Bist du sicher, dass click das richtige Event ist, auf das du reagieren möchtest?

Nein, hab mich wie Jürgen empfohlen hat auf change entschieden

$('#artikelstandort').change(function() {

		var formData = {
			'standort':    $(this).val(),
			'projektID':   $(this).data("projektID"),
			'warenkorbID': $(this).data("warenkorbID")		
		};
				
		console.log(formData);

		$.ajax({
			
			url:  "updateArtikelstandort.php",
			type: "post",
			data: formData,
		 
			success:function(d) {
		  		
			}
		});
}); 

Jetzt bekomme ich als Ausgabe folgendes

{standort: "Test1", projektID: undefined, warenkorbID: undefined}

Die anderen Werte bekomme ich noch immer nicht übermittelt.

Und haben alle deine Input-Felder dieselbe ID artikelstandort?

Nein, eigentlich nicht. Aber auf was soll ich sonst reagieren? Ich benötige für $('#artikelstandort').change(function() {} ja einen Wert?

Hat aber erstmal keine Auswirkungen auf das konkrete Problem, weil du ja mit this das letztlich auslösende Element reingereicht bekommst.

Wenn ich die Felder ausfüllen sehe ich Console immer nur ein Wert, dieser ändert sich nicht.

EDIT: OK, aus der ID habe ich eine class gemacht unten frage ich dann so ab

$('.artikelstandort').change(function() 

Ändert aber leider nichts an den fehlenden Werten.

[dedlfix]

Tach!

			'projektID':   $(this).data("projektID"),
			'warenkorbID': $(this).data("warenkorbID")		

Du musst auf die Schreibweise achten. jQuery übersetzt für diese Attributnamen jeden Großbuchstaben in Bindestrich und Kleinbuchstaben. Das heißt, projektID muss als projekt-i-d im HTML geschrieben sein, damit es mit der Schreibweise projektID erkannt wird. Also besser so

			'projektID':   $(this).data("projekt-id"),
			'warenkorbID': $(this).data("warenkorb-id")		

und im HTML

<input data-project-id="42">

Und haben alle deine Input-Felder dieselbe ID artikelstandort?

Nein, eigentlich nicht. Aber auf was soll ich sonst reagieren? Ich benötige für $('#artikelstandort').change(function() {} ja einen Wert?

Du kannst das ganze Arsenal der CSS-Selektoren verwenden. Zur Not kann man einer Gruppe von gleichartigen Elementen auch eine gleiche Klasse geben, aber nicht dieselben IDs.

dedlfix.

[Rolf B]

Hallo Bernd,

je nach Konstruktion deiner Tabelle ist $(".artikelstandort").change(...) sogar der falsche Weg. Wenn Du per JS Zeilen hinzufügen kannst, werden die neuen Zeilen keine change-Registrierung aufweisen.

Deswegen gibt es in jQuery ab Version 1.7 die .on Funktion. Angenommen, deine Tabelle hat ein id="artikeltabelle" Attribut, und deine Standort-Inputs die artikelstandort-Klasse, dann könntest Du schreiben:

$("#artikeltabelle").on("change", "input.artikelstandort", function(event) {
   // geänderter Standort
});

Die Registrierung des Eventhandlers erfolgt damit auf der Tabelle, nicht auf den einzelnen input-Elementen, und jQuery nutzt das Event Bubbling, um alle change-Events innerhalb der Tabelle zu behandeln. Der zweite Parameter von .on() ist ein CSS Selektor, der jQuery sagt, für welche Elemente Du auf das change-Event reagieren willst.

Übrigens, deine data-Attribute beziehen sich doch mutmaßlich auf die ganze table row, richtig? Es wäre dann nach meinem Gefühl „korrekter“, sie nicht an das input-Element zu klemmen, sondern an das tr Element. Da kommst Du mit jQuery problemlos heran:

var $row = $(this).closest("tr")
var projectId = $row.data("projektId");
var cartId = $row.data("warenkorbId");

Wenn eine dieser IDs für alle Rows gleich ist, gehört sie sogar an das table-Element. Und dann solltest Du sie während der Event-Registrierung auslesen, so dass die Variable, in der sie steht, per Closure im Eventhandler verfügbar ist. „Don't Repeat Yourself“.

Rolf

[Rolf B]

Hallo Bernd,

(Edit: Hmpf, Dedlfix war schneller...)

der Zusammenhang zwischen dem data- Attributnamen und dem Propertynamen des dataset (was das ist nicht ganz trivial. Die HTML Spec erlaubt im Namen des data-Attributs Buchstaben, Ziffern und die Zeichen - . : _ - aber nicht die ASCII-Großbuchstaben A-Z.

Die Abbildung des data-Attributnamens auf den Propertynamen erfolgt so:

Buchstaben, Zahlen und die Zeichen .:_ werden 1:1 übernommen. Ein vorgefundener A-Z Großbuchstabe wird in einen Kleinbuchstaben umgewandelt.

Ein - Zeichen, auf das ein Buchstabe a-z folgt, wird zum entsprechenden Großbuchstaben. Also: data-projekt-id wird zum Poperty projektId.

Alle anderen - Zeichen bleiben erhalten. Ein HTML Attribut data-projekt-üd würde zu einem dataset-Property projekt-üd führen.

Deine Abfrage auf data('projektID') würde also ein HTML Attribut data-projekt-i-d verlangen, um zu funktionieren.

Nenne dein HTML-Attribut data-projekt-id. Und frage nach data('projektId'). Die anderen Attribute passe entsprechend an.

Rolf

[Bernd]

Hallo,

danke für eure Erklärungen. Hab es jetzt so gemacht

$('#artikelstandort').change(function() {

		var formData = {
			'standort':    $(this).val(),
			'projektID':   $(this).data('projekt-id'),
			'warenkorbID': $(this).data('warenkorb-id')		
		};
				
		console.log(formData);

		$.ajax({
			
			url:  "updateArtikelstandort.php",
			type: "post",
			data: formData,
		 
			success:function(d) {
		  		
			}
		});
});

In der updateArtikelstandort.php habe ich folgendes stehen

if ($stmt = $mysqli->prepare("Update hinweis SET artikelstandort=? WHERE id=?")) {    
	
	$stmt->bind_param("ss", $_POST["standort"], $_POST["warenkorbID"]);
	$stmt->execute();
	
}

Ich weiß dass man über success:function(d) etwas anzeigen lassen kann das Update geklappt hat. Die Frage ist nur wie? Ich würde gerne kurz ein gespeichert hinter dem Input Feld einblenden lassen und dieses nach ein paar Sekunden wieder ausblenden. Ist dieses irgendwie einfach möglich?

[dedlfix]

Tach!

Ich weiß dass man über success:function(d) etwas anzeigen lassen kann das Update geklappt hat. Die Frage ist nur wie? Ich würde gerne kurz ein gespeichert hinter dem Input Feld einblenden lassen und dieses nach ein paar Sekunden wieder ausblenden. Ist dieses irgendwie einfach möglich?

Ja klar. Das Prinzp dabei ist, ein Element zu erstellen und ins DOM zu hängen. Dazu setTimeout() starten und bei dessen Ablauf das Element entfernen.

dedlfix.

[Bernd]

Hallo,

puh, ich denke ich habe es gelöst?

$('#artikelstandort').change(function() {

		var formData = {
			'standort':    $(this).val(),
			'projektID':   $(this).data('projekt-id'),
			'warenkorbID': $(this).data('warenkorb-id')		
		};
				
		console.log(formData);

		$.ajax({
			
			url:  "updateArtikelstandort.php",
			type: "post",
			data: formData,
		  dataType: 'json',
			
      success:function(d) {
		  	
        //alert(d.id);
				
				$('#'+d.id).append('OK');  
				
				setTimeout(function() {
					$('#'+d.id).fadeOut('fast');
				}, 1000);
			}
		});
});

Ist fadeOut richtig, oder kann man das ganze auch direkt wieder löschen lassen? In meiner PHP Datei habe ich noch folgendes hinzugefügt

echo json_encode( array("id" => $_POST["warenkorbID"]));

Und in meiner Tabelle habe ich noch folgendes für die Ausgabe hinzugefügt

<span id="<?php echo htmlspecialchars($array['wt_id']); ?>"></span>

[dedlfix]

Tach!

Ist fadeOut richtig, oder kann man das ganze auch direkt wieder löschen lassen?

Was auch immer du möchtest. Beim Entfernen ist es komplett weg, fadeOut hingegen lässt das Element drin, nachdem es transparent gemacht wurde.

dedlfix.

[Bernd]

Ok, ich lass es einfach wieder leeren

setTimeout(function() {
 $('#'+d.id).empty();
}, 1000);

[Rolf B]

Hallo Bernd,

zwei Einwände.

.data('projekt-id')

das setzt voraus, dass im HTML data-project--id steht.

$('#artikelstandort')

funktioniert nur für das erste Standort-Input. Der letzte Stand war doch, dass Du eine Klasse verwenden wolltest?

Vielleicht noch ein Hinweis:

  <span>
		<label for="artikelstandort">Standort</label>	
		<input type="text" name="artikelstandort" id="artikelstandort">
	</span>

braucht eine eindeutige ID für jedes Standort-Input. Das ist so nicht der Fall. Du kannst auf die ID verzichten, wenn Du das input ins label hineinverlegst. Das span Element dürfte dann auch obsolet werden (oder du verlegst es ins Label hinein, wenn Du es zum Stylen brauchst):

  <label>
    <span>Standort</span>
		<input type="text" name="artikelstandort[]">
  </label>	

Der name wird gebraucht, wenn Du dieses input über einen Post-Request an den Server schickst. In dem Fall ist es aber nicht hilfreich, wenn 7 Inputs den gleichen Namen haben; soweit ich weiß, gewinnt in PHP dann der letzte. Deswegen schlage ich die eckigen Klammern vor; wenn Du einen POST der gesamten Tabelle erzeugst, dann macht PHP ein Array draus. Wenn Du dieses input nicht POSTen willst, lass den Namen weg. Zur Identifikation des input für den Eventhandler wolltest Du doch ohnehin eine Klasse verwenden. Man könnte auch das name Attribut im Selektor für die Registrierung benutzen: $("input[name='artikelstandort[]']").change(...) - achte auf die Anführungszeichen um den Namen herum, die sind wegen [] nötig.

Rolf

[pl]

<input type="text" name="artikelstandort[]">

Warum nicht gleich die Daten richtig strukturieren?

Das funktioniert mit PHP nämlich erstklassig. Und ob das ganze <form><table> dann per AJAX FormData oder Submit/Enctype="multipart/form-data" gesendet wird ist völlig Wurst. So hat man auch gleich sein Progressive Enhancement. MFG

[Rolf B]

Hallo pl,

soll Bernd bei jeder Änderung einer Zeile die ganze Table zum Server schicken?

Das hätte den Vorteil, dass der Code zum Behandeln von Ajax Update und "normalen" POSTs gleich wäre, aber den Nachteil, bei Änderung einer Zeile eine Menge unnötiger Action auf der DB auszulösen. Für "One Author, Many Readers" Webseiten kaum ein Problem, aber ich weiß nicht, wie viele konkurrierende User Bernds System hat.

Rolf

[pl]

soll Bernd bei jeder Änderung einer Zeile die ganze Table zum Server schicken?

Bei einer Tabelle die in den Browser passt ist das überhaupt kein Thema. Wenns mit AJAX rausgeht merkt das der Benutzer gar nicht. Tipp: Throbbergrafik einblenden.

Und zum Update senden hab ich für Anwendungen dieser Art die Taste [F2] (in Erinnerung an die VTAM) und natürlich auch Buttons. So kann ein Anwender zügig von oben nach unten durchgehen und ab und zu mal per Tastendruck Speichern, genauso wie er das mit einer Desktopanwendung (Excel) macht.

Serverseitig wird ein Statement präpariert und dann gehts ab damit durchs POST Array. Und selbst wenn da mal bei einem Request 300 Einträge kommen gibt das nicht einmal einen Burst.

MFG

[Rolf B]

Hallo pl,

kann man alles machen. Aber das war nicht Bernds Wunsch und Wille. Er wollte nach Verlassen des Feldes automagisch speichern.

Rolf

[JürgenB]

Hallo Rolf,

… automagisch …

😀

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

indirekte quelle

Rolf

[pl]

kann man alles machen. Aber das war nicht Bernds Wunsch und Wille. Er wollte nach Verlassen des Feldes automagisch speichern.

Die Frage des Event Handlers ist zweitgrangig. Es kommt darauf an die Idee zu verstehen!

[Bernd]

Hallo,

hab mein HTML vorhin wie folgt angepasst

<label for="artikelstandort">Standort</label>	
<input 
  type="text" 
  name="artikelstandort[]" 
  class="artikelstandort" 
  data-projekt-id="<?php echo htmlspecialchars($array['wt_projektID']); ?>" 
	data-warenkorb-id="<?php echo htmlspecialchars($array['wt_id']); ?>"> 

<span id="<?php echo htmlspecialchars($array['wt_id']); ?>"></span>

Neu ist jetzt mein span mit einer passenden ID und die [] beim Namen. Ich schicke dieses zwar nicht über ein form ab, aber schadet ja nicht.

[Rolf B]

Hallo Bernd,

• lies Dir nochmal den Hinweis in diesem Posting bezüglich Labels und IDs durch. Das for-Attribut von <label> bezieht sich auf das id-Attribut eines anderen Elements - du hast aber kein Element mehr mit id="artikelstandort". Das heißt: Dein Label steht zwar visuell vor dem input, ist ihm aber technisch nicht zugeordnet. Assistenztools können damit nichts anfangen.

• Was bezweckst Du mit deinem neuen, leeren <span> Element?! Die Warenkorb-ID steckt doch eh schon am <input> Element.
  Falls Du einen Fallback für nicht-Ajax Betrieb bauen möchtest, brauchst Du ein hidden input mit value="<?= htmlspecialchars($array['wt_id']) ?>" und einem Namen wie name="wtId[]", so dass Du dann im PHP zwei Arrays hast, wo Einträge mit gleichem Index zur gleichen <tr> gehören.

Rolf

[Bernd]

Hallo,

• Was bezweckst Du mit deinem neuen, leeren <span> Element?! Die Warenkorb-ID steckt doch eh schon am <input> Element.

dieses benötige ich dafür um eine Erfolgsmeldung einzublenden, siehe hier

$.ajax({

  url:  "updateArtikelstandort.php",
	type: "post",
	dataType: 'json',
	data: formData,

	success:function(d) {

		$('#'+d.id).append('gespeichert');  

		setTimeout(function() {
		  $('#'+d.id).empty();
		}, 1000);

  }
});

[JürgenB]

Hallo Bernd,

• User Klick in das Feld, fängt an zu schreiben klickt wieder raus bzw. springt mit der Tabulatortaste weiter und der Wert wird im Hintergrund gespeichert. Dazu benötige ich a) Ajax in meinem Fall jQuery da ich dieses eh schon im Einsatz habe und b) muss ich drauf achten wenn der User das Feld verlässt.

hier musst du dir überlegen, wann die Daten zum Server gehen sollen.

Das Event input feuert bei jeden Tastendruck, change nur, wenn das Inputelement den Focus verliert, also der User „irgendwoandershin“ klickt.

Wenn sichergestellt ist, das der User nach der Eingabe noch irgendwo klicken muss, würde ich auf change lauschen. Bei input würde ich die Aktion um eine sinnvolle Zeit verzögern, damit nicht jeder Buchstabe einzeln übertragen wird.

Gruß
Jürgen