Come recuperare valori della riga di una tabella creata dinamicamente da un file esterno?

**matala** · 08-05-2016, 19:26

Sono un principiante di php e javascript e avrei bisogno di un aiuto.
Ho una pagina in cui sono presenti due tabelle collegate.
La prima tabella mostra una lista di categorie prese da database.

codice HTML:

    <head>
        <meta charset="utf-8">
        <title>Categorie</title>
        <link rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <script src="js/uikit.min.js"></script>
    
    <script>
    //funzione che apre 'categorie_tabella_sottocategorie.php' per la tabella delle sottocategorie
    function TabellaDetailSottocategorie(id_categoria,nome_categoria) {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;
            }
        };
        xmlhttp.open("GET","tabella_sottocategorie.php?id_categoria="+id_categoria+"&nome_categoria="+nome_categoria);
        xmlhttp.send();
    }
    </script>
    
    </head>

    <body>
        <div class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom" name="header">

<div class="uk-grid">
    <!-- Tabella categorie da db -->
    <div class="uk-width-1-2" id="categorie" >
        ... ometto il codice che crea la tabella ....
    </div>
    
    <!-- Tabella sottocategorie che si popola al click di una riga sulla tabella Gruppi -->
    <div id="TabellaSottocategorie" class="uk-width-1-2" >questo div inizialmente è vuoto</div>
    <p id="click-response"></p>

</div>

<!-- MODAL ELIMINA CATEGORIA -->
<div id="modal-elimina-categoria" class="uk-modal uk-container-center"  >
    <div class="uk-modal-dialog">
        <a href="" class="uk-modal-close uk-close"></a>
        <h1><i class="uk-icon-minus-circle"></i> Elimina Categoria</h1>
        <form class="uk-form" name="form_elimina_risorsa" onSubmit="DeleteRisorsa()" action="categorie_elimina.php" method="GET" >    
            <div class="uk-alert uk-alert-danger">
                <p><i class="uk-icon-warning"></i> ATTENZIONE </p>
                <p>Confermi l'eliminazione della categoria <strong><categoria id="delete_nome_categoria_titolo">prova</categoria></strong>?</p>
                <div class="uk-form-controls">
                    <input type="hidden" id="delete_id_categoria" name="id_risorsa">
                    <input type="hidden"id="delete_nome_categoria" name="nome_risorsa"  maxlength="30">
                </div>
            </div>
            <div class="uk-form-controls">
                <button type="submit" class="uk-button uk-button-danger">Elimina</button>
                <button type="button" class="uk-modal-close uk-button uk-button-success">Annulla</button>
            </div>
        </form>
    </div>
</div>

<!-- MODAL ELIMINA SOTTOCATEGORIA -->
<div id="modal-elimina-sottocategoria" class="uk-modal uk-container-center"  >
    <div class="uk-modal-dialog">
        <a href="" class="uk-modal-close uk-close"></a>
        <h1><i class="uk-icon-minus-circle"></i> Elimina Sottocategoria</h1>
        <form class="uk-form" name="form_elimina_risorsa" onSubmit="DeleteRisorsa()" action="categorie_elimina.php" method="GET" >    
            <div class="uk-alert uk-alert-danger">
                <p><i class="uk-icon-warning"></i> ATTENZIONE </p>
                <p>Confermi l'eliminazione della sottocategoria <strong><categoria id="delete_nome_sottocategoria_titolo">prova</categoria></strong>?</p>
                <div class="uk-form-controls">
                    <input type="hidden" id="delete_id_sottocategoria" name="id_risorsa">
                    <input type="hidden" id="delete_nome_sottocategoria" name="nome_risorsa"  maxlength="30">
                </div>
            </div>
            <div class="uk-form-controls">
                <button type="submit" class="uk-button uk-button-danger">Elimina</button>
                <button type="button" class="uk-modal-close uk-button uk-button-success">Annulla</button>
            </div>
        </form>
    </div>
</div>

<script type="text/javascript">
// Funzione che recupera la categoria dalla riga cliccata
    function onRowClick(tableId, callback) {
        var table = document.getElementById(tableId),
            rows = table.getElementsByTagName("tr"),
            i;
        for (i = 0; i < rows.length; i++) {
            table.rows[i].onclick = function (row) {
                return function () {
                    callback(row);
                };
            }(table.rows[i]);
        }
    };

    onRowClick("tabella_categorie", function (row){
        var id_categoria = row.getElementsByTagName("td")[0].innerHTML;
        var nome_categoria = row.getElementsByTagName("td")[1].innerHTML;
        document.getElementById('delete_nome_categoria_titolo').innerHTML = nome_categoria;
        document.getElementById('delete_nome_categoria').value= nome_categoria;
        document.getElementById('delete_id_categoria').value= id_categoria;
        console.log("value>>", nome_categoria);
        TabellaDetailSottocategorie(id_categoria,nome_categoria)
    });
    
        onRowClick("tabella_sottocategorie", function (row){
        var id_sottocategoria = row.getElementsByTagName("td")[0].innerHTML;
        var nome_sottocategoria = row.getElementsByTagName("td")[1].innerHTML;
        document.getElementById('delete_nome_sottocategoria_titolo').innerHTML = nome_sottocategoria;
        document.getElementById('delete_nome_sottocategoria').value= nome_sottocategoria;
        document.getElementById('delete_id_sottocategoria').value= id_sottocategoria;
        console.log("value>>", nome_sottocategoria);
    });

</script>

Al click su ogni riga della prima tabella, nel div "TabellaSottocategorie" (inizialmente vuoto) viene mostrata la lista delle sottocategorie, attraverso un secondo file:"tabella_sottocategorie.php" il cui contenuto riporto qui sotto:

codice HTML:

<?php
//recupera i parametri passati
$id_categoria = $_GET['id_categoria'];
$nome_categoria = $_GET['nome_categoria'];

$con = mysqli_connect('localhost','root','','conti');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="SELECT id_sottocategoria, sottocategoria FROM sottocategorie WHERE id_categoria = ".$id_categoria;

$result = mysqli_query($con,$sql);

echo "<!-- Tabella sottocategorie da db -->\n";
        ... ometto il codice che crea la tabella .... ?>

In ognuna delle due tabelle ho aggiunto una colonna con l'icona di un cestino per aprire una finestra di conferma (div visualizzato come modal) per eliminare da database la riga selezionata.

codice HTML:

echo "<td><a data-uk-modal=\"{target:'#modal-elimina-categoria'}\" class=\"uk-icon-hover uk-icon-trash-o\" title=\"Elimina ".$row['categoria']."\"></a></td>";

Per la prima tebella la funzione onRowClick funziona perfettamente, recupera i vaolri della riga selezionata, popola con tali dati il form di conferma dell'eliminazione e al clic procede all'eliminazione da database.

Per la seconda tabella la funzione onRowClick non riesce a recuperare i dati della riga cliccata. Credo che non funzioni in quanto il codice della seconda tabella non è presente realmente nel primo file ma viene caricato dinamicamente dal secondo file nel primo.

Come posso allora, cliccando su una riga della seconda tabella, recuperare id e nome della riga stessa e passarli al form per chiedere conferma ed elimiare poi da database il dato?

Avrei bisogno di qualche suggerimento. Grazie

**matala** · 11-05-2016, 18:31

Riassumo in due parole il mio problema sperando che qualcuno mi riesca a dare qualche indicazione:
Il file categories.php richiama da database una tabella con alcune categorie.
Al click su una riga di tale tabella viene aperto il file subcategories_table.php che costruisce una tabella con le sottocategorie della categoria selezionata nella prima tabella e mette il contenuto in un div del file categories.php
Cliccando sulle righe della seconda tabella non sono in grado di recuperare i dettagli delle sottocategorie.

Per facilitare la comprensione del mio problema ne ho creato una versione essenziale e l'ho messa su un server gratuito accessibile a questo indirizzo: http://conti.hol.es/ dove sono presenti anche i sorgenti zippati e un dump del database.

Forse sbaglio approccio per creare le due tabelle collegate?
Aspetto fiducioso qualche suggerimento.

**KillerWorm** · 11-05-2016, 22:48

Ciao, da uno sguardo veloce al tuo progetto noto una possibile causa del problema.

Per la seconda tabella la funzione onRowClick non riesce a recuperare i dati della riga cliccata. Credo che non funzioni in quanto il codice della seconda tabella non è presente realmente nel primo file ma viene caricato dinamicamente dal secondo file nel primo.

Sì, in linea di massima questo è un primo punto da sistemare.

Devi tener presente che JavaScript può manipolare gli elementi della tua pagina solo quando questi sono caricati e disponibili realmente nella pagina stessa (a prescindere da dove provengono). Dal momento che stai creando del contenuto html in modo dinamico, dovrai fare attenzione a richiamare le tue funzioni (che manipolano tale contenuto) solo quando sei sicuro che il contenuto stesso sia stato "aggiunto" sulla pagina.

Ora, stai usando AJAX per caricare il contenuto dinamicamente, per cui questo sarà presente sulla pagina, e manipolabile da script, solo dopo l'avvenimento dell'evento onreadystatechange e dopo averlo aggiunto alla pagina:

codice:

document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;

Potrai quindi fare la chiamata della funzione onRowClick (relativa a "tabella_sottocategorie") solo dopo che sarà eseguita quella riga (l'innerHTML che appiccica sulla pagina il tuo html da manipolare).

Per meglio specificare, prova a spostare (e quindi metterla dopo quella riga) questa parte di script:

codice:

   onRowClick("tabella_sottocategorie", function (row){
        var id_sottocategoria = row.getElementsByTagName("td")[0].innerHTML;
        var nome_sottocategoria = row.getElementsByTagName("td")[1].innerHTML;
        document.getElementById('delete_nome_sottocategoria_titolo').innerHTML = nome_sottocategoria;
        document.getElementById('delete_nome_sottocategoria').value= nome_sottocategoria;
        document.getElementById('delete_id_sottocategoria').value= id_sottocategoria;
        console.log("value>>", nome_sottocategoria);
    });

**matala** · 12-05-2016, 19:36

@KillerWorm
Grazie mille per la dettagliata spiegazione, con le tue indicazioni ho risolto!

Discussione: Come recuperare valori della riga di una tabella creata dinamicamente da un file esterno?

Strumenti discussione

Ricerca discussione

Visualizza

Come recuperare valori della riga di una tabella creata dinamicamente da un file esterno?

non riesco a trovare la soluzione

Permessi di invio