catching the internal value of a td according to the id with jquery

I have to perform CRUD operations on data coming from a JSON file, and the array that goes into the file looks like the following piece of code:

 array("id" => "<td>" . $row['id'] . "</td>",
                "nome" => "<td id='nomeCliente' contenteditable='true'>" . $row['nome'] . "</td>",
                "cognome" => "<td contenteditable='true'>" . $row['cognome'] . "</td>",
                "indirizzo" => "<td contenteditable='true'>" . $row['indirizzo'] . "</td>",
                "email" => "<td contenteditable='true'>" . $row['email'] . "</td>",
                "tipo_contatto" => "<td contenteditable='true'>" . $row['tipo_contatto'] . "</td>",
                "telefono_1" => "<td contenteditable='true'>" . $row['telefono_1'] . "</td>",
                "telefono_2" => "<td contenteditable='true'>" . $row['telefono_2'] . "</td>",
                "telefono_3" => "<td contenteditable='true'>" . $row['telefono_3'] . "</td>",
                "edit" => "<td>" . '<a id="'.$row['id'].'" class="delete" href="#"><img width="20" height="20" src="http://b.dryicons.com/images/icon_sets/colorful_stickers_icons_set/png/256x256/delete.png" /></a>
                <a id="'.$row['id'].'" class="edit" href="#"><img width="20" height="20" src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/512/edit.png" />' . "</a></td>")

Here i say: when the edit class is clicked, build the querystring to pass in the Ajax request, but the problem is that, if i’m able to catch the value of the id of the row and the name of the table, i’m unable to catch the values of the id “nomeCliente”, or, better, it catches me only the value of the first row (even if i have several rows).

In this code:

$(document).on("click", ".edit", function () {
    var commentContainer = $(this).parent().parent();

    // recupera l'id della riga da cancellare
    var id = $(this).attr("id");

    // recupera l'id della tabella nella quale ci si trova
    var tableId = $(this).parent().parent().parent().attr("id");

    var nomeCliente = document.getElementById("nomeCliente").innerHTML;

    var string = 'id='+ id + "&tableId=" + tableId + "&nomeCliente=" + nomeCliente;

    $.ajax({
        type: "POST",
        url: "pages/edit.php",
        data: string,
        cache: false,
        success: function() {
            // do something
        }
    });
    return false;

});

Whatever row i click to, in my querystring i’ll have the right table, the right id, but always the first row value of “nomeCliente”.

Anyway, i know this is a bad practice, ideally it would be great if it was a way to catch all the td contenteditable values in one shot (something like a for loop) and to build the querystring without declaring a new variable for each value of the array (considering that I have loads of arrays with several key -> values).

Is it possible to do it, starting from the edit class in the “a” tag?

Something like: give me access to all the values of the parent of the parent (all the “td” values)… and then build the string


Source: ajax

Leave a Reply