AJAX-Input in Liste?

[Dsimon24]

Hallo zusammen,

ich habe eine Liste, 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 ersten Zeile.

anbei mein PHP-Code:

<?php foreach($stmt as $row) {

<tr>
    <td style="height:120px">
        <p class="rotate">
            <input type="hidden" value="<?php echo $row['id'] ?>" id="iid" />
            <table class="edit_tab" id="edit_tab">
                <tr>
                    <td class="edit_tr" id="gehalt">
                        <span id="label_gehalt" class="text">
                            <?php echo $gehalt; ?>
                        </span>
                        <input type="text" class="editbox" id="input_gehalt" value="<?php echo $gehalt; ?>" name="gehalt" size="5"> 
                    </td>
                </tr>
            </table>
        </p>
    </td>
    <td style="text-align:center;"><p class="rotate"><?php echo $row['str']; ?></p></td>
    <td style="text-align:center;"><p class="rotate"><?php echo $row['plz']; ?></p></td>
    <td style="text-align:center;"><p class="rotate"><?php echo $row['ort']; ?></p></td>

</tr>
<!-- Schleifenende -->
<?php 
} 
?>

anbei mein JS-Code:

    $(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();
        });
    });

Ich hoffe, der Code-Ausschnitt ist einigermaßen verständlich.

Hat jemand ne Idee, warum das so ist?
Kann der nicht zuordnen, um welche Zeile es sich handelt?

 

[scbawik]

Hat jemand ne Idee, warum das so ist?

Was ist wie?

Kann der nicht zuordnen, um welche Zeile es sich handelt?

Ich vermute mal das liegt daran dass eine ID nur 1x im gesamten Dokument vorkommen darf. (https://de.wikipedia.org/wiki/Identifikator)
Da sich das ganze in einer Schleife befindet, ist das bei dir wohl nicht der Fall.

 

[Dsimon24]

Daran könnte es wohl liegen.
Hast du einen Tipp für mich, wie ich mein Vorhaben
auf anderer Art realisieren kann - außer mit den ID´s?
Bin im Bereich AJAX gerade erst eingestiegen - bin mir
demnach noch unsicher, wie ich es dann machen
könnte.

 

[scbawik]

Daran könnte es wohl liegen.
Hast du einen Tipp für mich, wie ich mein Vorhaben
auf anderer Art realisieren kann - außer mit den ID´s?
Bin im Bereich AJAX gerade erst eingestiegen - bin mir
demnach noch unsicher, wie ich es dann machen
könnte.

Das hat nichts mit Ajax zu tun, das sind HTML Basics.
Ein Anfang wäre es, einzigartige IDs zu generieren, zB anhand der ID des Datensatzes aus der Datenbank:

id="gehalt_<?= $row['id'] ?>"

 

[Dsimon24]

Okay, jetzt öffnet sich das Input-Feld an korrekter Stelle.
Irgendetwas scheine ich aber noch falsch zu machen,
da der Wert nicht in meine DB übernommen wird.

Vielleicht kann mal jemand drüber schauen,
ob ich evtl. einen Fehler eingebaut habe.

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>