JavaScript Ajax-Request macht Probleme

[Dsimon24]

Hallo zusammen,

ich möchte gerne in einer Tabelle eine Zelle einfügen,
in dieser ich etwas hineinschreiben kann, was anschlie-
ßend mittels AJAX an die Datenbank übersendet wird.

Hat in einem anderen Fall funktioniert - jetzt aber leider nicht mehr.
Den Fehler kann ich ebenfalls leider nicht finden - vielleicht hat ei-
ner einen Tipp für mich, was ich an dieser Stelle falsch mache?!

Anbei der Code der Tabelle:

<?php foreach($stmt_vl as $row_vl) { ?>

<tr>
	<td style="text-align:center;"><a href="kms_view.php?id=<?php echo $row_vl['id']; ?>"><?php echo $row_vl['id']; ?></a></td>
	<td style="width:80px;">
		<input type="hidden" value="<?php echo $row_vl['id'] ?>" id="iid" />
		<table class="edit_tab" id="edit_tab">
			<tr>
				<td class="edit_vl" id="<?php echo $row_vl['id']; ?>">
					<span id="label_<?php echo $row_vl['id']; ?>" class="text">
						<?php echo $row_vl['todo']; ?>
					</span>

					<input type="text" class="editbox" id="input_<?php echo $row_vl['id']; ?>" style="color:#000000;" value="<?php echo $row_vl['todo']; ?>" name="todo" size="18%"> 
				</td>
			</tr>
		</table>
	</td>
</tr>

<?php } ?>

	<script type="text/javascript">	
		$(document).ready(function()
		{
			$(".edit_vl").click(function()
			{
			var ID = $(this).attr('id');
			$("#label_"+ID).hide();
			$("#input_"+ID).show();
			}).change(function()
			{
			var ID = $(this).attr('id');
			var IID = document.getElementById("iid").value;
			var data=$("#input_"+ID).val();
			var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

			$.ajax({
			type: "POST",
			url: "auswert.php",
			data: dataString,
			cache: false,
			success: function(html)
			{
				$("#label_"+ID).html(data);
			},
			error: function(data)
			{
				alert("Es ist ein Fehler aufgetreten!");
			}
			});

			});

			// Klick innerhalb des Labels
			$(".editbox").mouseup(function()
			{
				return false
			});
			// Klick auserhalb des Inputfeldes
			$(document).mouseup(function()
			{
				$(".editbox").hide();
				$(".text").show();
			});
		});
	</script>

Und der PHP-Code für die DB:

    $id=mysql_escape_String($_POST['id']);
    $field=mysql_escape_String($_POST['field']);
    $value=mysql_escape_String($_POST['value']);

		//$field_ex = explode("x", $field);
		//$field_n = $field_ex[0] . "x";
 

	$stmt = $bewerber->runQuery("UPDATE vorgang SET todo='$value' WHERE id='$id'");
	$stmt->execute();

Mein Problem ist es, dass er die ID der Zeile nicht übermittelt und somit alles unter ID 1 speichert.

VG, David

 

[NullPointer]

Du erzeugst in jeder Zeile ein input-Element mit der ID "iid". IDs sind aber dafür ausgelegt, im ganzen Dokument einzigartig zu sein. Sehr wahrscheinlich liefert dir document.getElementById("iid") einfach immer das erste solche Element zurück, und das hat halt den Wert 1.

 

[Dsimon24]

Aber dieser Element erhält doch dann durch die foreach-Schleife den Wert der jeweiligen Zeile, oder denke ich da falsch?

 

[NullPointer]

Sagen wir, $stmt_vl hat 10 Einträge mit den IDs 1-10. Dann erzeugt die foreach-Schleife 10 Zeilen in der HTML-Tabelle. Jede dieser Zeilen enthält ein input-Element mit id="iid", dessen Value die ID des entsprechenden Eintrags ist, also auch 1-10.

Jetzt ruft dein Javscript document.getElementById("iid") auf. Was du willst, ist das input-Element aus der Zeile, die du editierst. Du bekommst aber (höchstwahrscheinlich) das aus der ersten Zeile, weil es nicht vorgesehen ist, dass es mehrere Elemente mit der selben ID gibt.

 

[r15ch13]

Ich habs mal ein wenig aufgeraeumt. Die ganzen IDs kannst du weglassen.
Mit $(this) hast du schon das aktuelle .edit_vl Element, wieso suchst du dann nicht mit Hilfe von .find() innerhalb dieses Elements nach dem Label und dem Inputfeld? Somit brauchst du die ID nur einmal als Referenz.
Ausserdem ist die ID ein Teil deines Datensatzes und hat mit CSS nichts am Hut, also ab in data-Attribut damit.

Desweiteren gehoert der ganze Code nicht in die $(document).ready() Funktion.
Du kannst mittles .on() die Events innerhalb dieses Elements binden, anstatt auf dem ganzen Dokument.

<?php
$stmt_vl = [
    [
        'id' => 1,
        'todo' => 'todo 1'
    ],
    [
        'id' => 2,
        'todo' => 'todo 2'
    ],
    [
        'id' => 3,
        'todo' => 'todo 3'
    ],
    [
        'id' => 4,
        'todo' => 'todo 4'
    ]
];
?>

<table class="mytable">
  <?php foreach($stmt_vl as $row_vl) { ?>
    <tr>
        <td style="text-align:center;"><a href="kms_view.php?id=<?php echo $row_vl['id']; ?>"><?php echo $row_vl['id']; ?></a></td>
        <td style="width:80px;">
            <table class="edit_tab">
                <tr>
                    <td class="edit_vl" data-id="<?php echo $row_vl['id']; ?>">
                        <span class="label">
                            <?php echo $row_vl['todo']; ?>
                        </span>
                        <input type="text" class="editbox" style="color:#000000;" value="<?php echo $row_vl['todo']; ?>" size="18%">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
  <?php } ?>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">

  $('.mytable').on('click', '.edit_vl', function () {
    var $this = $(this)
    $this.find('.label').hide()
    $this.find('.editbox').show()
    $this.css('border', '1px solid grey')
  })

  $('.mytable').on('change', '.edit_vl', function () {
    var $this = $(this)
    var id = $this.data('id')
    var value = $this.find('.editbox').val()

    var data = {
      id: id,
      field: id,
      value: value,
    }
    console.log(data)
    $this.find('.label').html(value).show()
    $this.find('.editbox').hide()

    $.ajax({
      type: 'POST',
      url: 'auswert.php',
      data: data,
      cache: false,
      success: function (html) {
        $this.css('border', '1px solid green')
      },
      error: function (data) {
        $this.css('border', '1px solid red')
        alert('Es ist ein Fehler aufgetreten!')
      }
    })
  })

  // Klick innerhalb des Labels
  $('.mytable').on('mouseup', '.editbox', function () {
    return false
  })

  // Klick ausserhalb des Inputfeldes
  $(document).mouseup(function () {
    $('.mytable').find('.editbox').hide()
    $('.mytable').find('.label').show()
  })

  // Alle Inputfelder beim Laden der Seite ausblenden
  $(document).ready(function() {
    $('.mytable').find('.editbox').hide()
    $('.mytable').find('.label').show()
  })
</script>