JS-Funktion funktioniert nicht

[Dsimon24]

Hallo zusammen,

sorry, für den nicht allzu informativen Titel.
Ich versuche gerade etwas zu realisieren,
leider jedoch ohne Erfolg!

Ich habe eine Tabelle, in der ich jeweils eine Eingabe über AJAX realisieren möchte.
Klicke ich in der ersten Spalte einer Zeile das Input-Feld an, so öffnet sich zur Bearbeitung
das Input-Feld in der betreffenden Tabellenzeile. Trage ich eine Zahl ein und klicke an andere
Stelle, so schließt sich das Input-Feld und die eingetragene Zahl wird als Text angezeigt.
Jedoch scheint es mir so, dass die Änderung nicht an die PHP-Datei weitergegeben
wird, da kein Update in der DB erfolgt.

Sieht einer im Code einen Fehler, den ich möglicherweise eingebaut haben könnte?

Mein HTML

<input type="hidden" value="<?php echo $row['id'] ?>" id="iid" />
 
<table class="edit_tab" id="edit_tab">
    <tr>
        <td class="edit_tr" id="sort<?php echo $row['id']; ?>">
            <span id="label_sort<?php echo $row['id']; ?>" class="text">
                <?php echo $row['sort']; ?>
            </span>
 
            <input type="text" class="editbox" id="input_sort<?php echo $row['id']; ?>" style="color:#000000;" value="<?php echo $row['sort']; ?>" name="sort" size="5">
        </td>
    </tr>
</table>

Mein PHP

    $id=mysql_escape_String($_POST['id']);
    $field=mysql_escape_String($_POST['field']);
    $value=mysql_escape_String($_POST['value']);
 
    //$sql = "update user set $field='$value' where id='$id'";
 
 
    //$userid = $_GET["id"];
    $stmt = $bewerber->runQuery("UPDATE bewerber SET sort='$value' WHERE id='$id'");
    $stmt->execute();

Mein JS

<script type="text/javascript">
    $(document).ready(function()
    {
        $("#sort<?php echo $row['id']; ?>").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_bewII-3.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>

 

[tsseh]

laut jquery docu https://api.jquery.com/change/

The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.

wobei laut https://developer.mozilla.org/en-US/docs/Web/Events/change

Bubbles: Yes

probier mal on("change", function...

 

[Dsimon24]

Meinst du so?: Funktioniert so auch nicht...

<script type="text/javascript">
	$(document).ready(function()
	{
		$("#sort<?php echo $row['id']; ?>").click(function()
		{
		var ID = $(this).attr('id');
		$("#label_"+ID).hide();
		$("#input_"+ID).show();
		}).on("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_bewII-3.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>

Also ich muss sagen, das Ganze hat schonmal in ähnlicher Form funk-
tioniert. Anbei der Code der ähnlichen, funktionierenden Variante:

<script type="text/javascript">
	$(document).ready(function()
	{
		$(".edit_tr").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_bewII-2.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>

Ich habe in Grunde genommen statt '$(".edit_tr").click(function()' eine Klasse,
im neuen Code eine ID angesprochen, da es sich dabei um eine Tabelle/Liste mit
mehreren Zeilen handelte. Bei dem funktionierenden Beispiel ging es nur um ein
bestimmtes Feld (ohne Tabelle/Liste).

 

[tsseh]

dann sieh doch als 1. mal nach, ob der change eventhandler angesprungen wird, müsste dann ja doch, wenn du sagst das ging mit class.
dann sieh dir mal dataString an, ob das passt

 

[Dsimon24]

Wie kann ich denn prüfen,
ob der Change Eventhandler angesprochen wird?
Sorry, bin noch recht neu im Bereich JavaScript.

Ich habe jetzt mal versucht, den Inhalt der var dataString auf der Console ausgeben zu lassen.
Im funktionierenden Part funktioniert es, wenn ich nach der Eingabe auf eine leere Fläche klicke,
sodass das Input-Feld verschwindet und das Label wieder erscheint. Im anderen Teil (bei dem ich
die Probleme habe) erscheint nichts. Hier scheint dann wohl was nicht zu stimmen. Wie kann ich
das denn weiterhin testen? Ich denke, das Problem liegt vielleicht daran, dass ich ganz am
Anfang statt einer Klasse eine ID verwende, beim Click Eventhandler!?

Also was funktioniert:
Ich kann draufklicken und es erscheint das Input-Feld, in diesem ich eine Zahl eingeben kann.
Klicke ich weg, verschwinden das Input-Feld und die eingegebene Zahl steht im Label.

 

[tsseh]

Wie kann ich denn prüfen,
ob der Change Eventhandler angesprochen wird?

durch ein console.log oder du setzt einen breakpunkt

ist denn die id richtig? zeig mal den generierten html/js code und nicht den php-code

 

[kkapsner]

Hast du mal einen Livelink, wo wir uns das ansehen können? Oder wenigstens den HTML-Code, der im Browser ankommt - mit dem PHP kann man bei solchen Problemen wenig anfangen.