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

matala

Nuovo Utente
8 Mag 2016
7
0
0
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.
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:
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.
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
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
prova a sostituire in questo modo,
Codice:
document.getElementById("TabellaSottocategorie").appendChild(xmlhttp.responseText);
 

matala

Nuovo Utente
8 Mag 2016
7
0
0
prova a sostituire in questo modo,
Codice:
document.getElementById("TabellaSottocategorie").appendChild(xmlhttp.responseText);

Ho fatto un po' di prove, ma non credo di aver capito bene il suggerimento.
Dove devo utilizzare il codice che mi hai suggerito?
Al click della riga nella prima tabella al posto di:
Codice:
TabellaDetailSottocategorie(id_categoria,nome_categoria) ?

Ho provato ma non funziona comunque.

Avrei bisogno di qualche indicazione in più.

Grazie
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
codice da eliminare,
Codice:
document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;
sostituendolo con quello postato
 

matala

Nuovo Utente
8 Mag 2016
7
0
0
Non funziona

codice da eliminare,
Codice:
document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;
sostituendolo con quello postato

@marino51, Grazie per il suggerimento, mi sono studiato appendChild che mi hai suggerito (e adesso capisco anche il senso del tuo suggerimento) ma purtroppo così non funziona più il caricamento della tabella delle sottocategorie.

Avrei bisogno di qualche altro suggerimento.

Grazie mille
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
il codice che hai postato non è semplice,
anche se è ben identificabile l'istruzione che dovrebbe restituire il "codice" da aggiungere,
la modifica che ti ho suggerito era la più facile, non funzionando bisognerebbe fare delle prove con il codice completo,
aspettiamo qualche persona che abbia l'occhio più acuto del mio e sia in grado di trovare il malfunzionamento
 

matala

Nuovo Utente
8 Mag 2016
7
0
0
il codice che hai postato non è semplice,
anche se è ben identificabile l'istruzione che dovrebbe restituire il "codice" da aggiungere,
la modifica che ti ho suggerito era la più facile, non funzionando bisognerebbe fare delle prove con il codice completo,
aspettiamo qualche persona che abbia l'occhio più acuto del mio e sia in grado di trovare il malfunzionamento
@marino51 grazie comunque per l'interessamento.

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.
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
per cortesia, fai tu la prova sostituendo con questo codice
PHP:
$risposta  = "<!-- Subcategories Table -->\n";
$risposta .= "	<h3>Sottocategorie " . $name_category . " </h3>\n";
$risposta .= "		<table id=\"subcategories_table\" > <thead> <tr>\n";
$risposta .= "		<th>Id</th>\n";
$risposta .= "		<th>Subcategory</th>\n";
$risposta .= "		</tr></thead><tbody>\n";
while($row = mysqli_fetch_array($result)) {
	$risposta .= "		<tr>\n";
	$risposta .= "			<td>". $row['id_sottocategoria'] ."</td>\n";
	$risposta .= "			<td>". $row['sottocategoria'] ."</td>\n";
	$risposta .= "		</tr>\n";
} 
$risposta .= "		</tbody></table>";
echo $risposta;
Ajax dovrebbe aspettarsi un echo solo ...

poi in categoria hai messo >class="id_categoria"< mentre in sottocategoria non hai messo nessuna classe
 
Ultima modifica:

matala

Nuovo Utente
8 Mag 2016
7
0
0
@marino51

Innanzitutto grazie per l'interessamento.
Ho effettuato la modifica ma il risultato è lo stesso.
Ho provato anche a usare il primo suggerimento (che ho lasciato commentato) ma il risultato purtroppo non cambia.
Ho aggiornato l'esempio online

Grazie
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
ho lasciato un po' di alert per farti vedere,

1 - il messaggio che ritorna dallo script "subcategories_table.php"
(è un poco schifosetto ma potrebbe dipendere dal browser e/o dal fatto che lo script di fatto è un html)

2 - la sua ripulitura

3 - la sequenza di esecuzione del codice, in particolare di "onRowClick", sulla tab sottocateg veniva eseguito prima della sua esistenza, per cui l'ho spostato

per fare le prove, ho dovuto cambiare la gestione del db (ms sql), che ho tolto, spero di non aver lasciato qualche errore nello script, con mysql non posso provarlo

categories.php

PHP:
<html>
    <head>
		<title>Categories</title>

	<script>
	//function that open 'subcategories_table.php'
	function Subcategories_Table(id_categoria,nome_categoria) {
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

				var risposta = xmlhttp.responseText;
				alert(risposta);

				var n1 = risposta.indexOf("<table");
				var n2 = risposta.indexOf("</table>") + 8;
				risposta = risposta.substring(n1, n2);
				alert(risposta);

				document.getElementById("TabellaSottocategorie").innerHTML = risposta;
				alert('aggiornata tabella');

				onRowClick("subcategories_table", function (row){
					var subcategory_id = row.getElementsByTagName("td")[0].innerHTML;
					var subcategory_name = row.getElementsByTagName("td")[1].innerHTML;
					document.getElementById('delete_subcategory_name').value= subcategory_name;
					document.getElementById('delete_subcategory_id').value= subcategory_id;
				});

			}
		};
		xmlhttp.open("GET","subcategories_table.php?id_category="+id_categoria+"&name_category="+nome_categoria);
		xmlhttp.send();
	}
	</script>
	
    </head>

    <body>
			
	<!-- Categories Table -->
	<div id="categorie" >
		<?php
		$con = mysqli_connect('mysql.hostinger.it','u674960300_user','testtest','u674960300_conti');
		if (!$con) { die('Could not connect: ' . mysqli_error($con)); }
		mysqli_select_db($con,"ajax_demo");
		$sql="SELECT id_categoria, categoria FROM categorie";
		$result = mysqli_query($con,$sql);

		echo "<table id=\"categories_table\"> <thead> <tr>
		<th>Id</th>
		<th>Category</th>
		</tr>
		</thead>
		<tbody>\n";

		while($row = mysqli_fetch_array($result)) {
			echo "<tr>\n";
			echo "	<td class=\"id_categoria\">". $row['id_categoria'] . "</td>\n";
			echo "	<td>" . $row['categoria'] . "</td>\n";
			echo "</tr>\n";
		}
		echo "		</table>";
		mysqli_close($con);
		?>
	</div>
	
	<!-- Space for Subcategories Table -->
	<div id="TabellaSottocategorie" class="uk-width-1-2" > </div>

<!-- MODAL DELETE CATEGORY -->
<div>
	<h3>Category detail</h3>
	<form action="delete_category.php" method="GET" >	
		<p>You have clicked on this category row</p>
		<input id="delete_category_id">
		<input id="delete_category_name">
	</form>
</div>

<!-- MODAL DELETE SUBCATEGORY -->
<div>
	<h3>Subcategory detail</h3>
	<form action="delete_subcategory.php" method="GET" >	
		<p>You have clicked on this subcategory row</p>
		<input id="delete_subcategory_id">
		<input id="delete_subcategory_name">
	</form>
</div>

<script type="text/javascript">
// Function that retrieves on row click the row detail of category and subcategory 
	function onRowClick(tableId, callback) {
		alert('onRowClick '+tableId);
		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("categories_table", function (row){
		var category_id = row.getElementsByTagName("td")[0].innerHTML;
		var category_name = row.getElementsByTagName("td")[1].innerHTML;
		document.getElementById('delete_category_name').value= category_name;
		document.getElementById('delete_category_id').value= category_id;
		Subcategories_Table(category_id, category_name);
	});
	
</script>

    </body>
</html>

subcategories_table.php

PHP:
<html>
<head>
	<title>Subcategories table</title>
</head>

<body>
<?php
$id_category = $_GET['id_category'];
$name_category = $_GET['name_category'];

$con = mysqli_connect('mysql.hostinger.it','u674960300_user','testtest','u674960300_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_category;
$result = mysqli_query($con,$sql);

$risposta  = "<!-- Subcategories Table -->\n";
$risposta .= "	<h3>Sottocategorie " . $name_category . " </h3>\n";
$risposta .= "		<table id=\"subcategories_table\" > <thead> <tr>\n";
$risposta .= "		<th>Id</th>\n";
$risposta .= "		<th>Subcategory</th>\n";
$risposta .= "		</tr></thead><tbody>\n";

while($row = mysqli_fetch_array($result)) {
	$risposta .= "		<tr>\n";
	$risposta .= "			<td>". $row['id_sottocategoria'] ."</td>\n";
	$risposta .= "			<td>". $row['sottocategoria'] ."</td>\n";
	$risposta .= "		</tr>\n";
} 
$risposta .= "		</tbody></table>";
echo $risposta;

mysqli_close($con);
?>

</body>
</html>

ps, il risultato

Cattura.PNG
 
Ultima modifica:

matala

Nuovo Utente
8 Mag 2016
7
0
0
@marino51
Grazie mille!!!
Adesso mi studio per bene gli errori che ho fatto e domani sistemo tutto il codice per bene.
Ti sono davvero molto riconoscente!
 

marino51

Utente Attivo
28 Feb 2013
3.036
192
63
Lombardia
ps, la ripulitura l'ho fatta partire da "<table" ma puoi farla partire anche dal commento se ti serve includere anche il titolo "h3"
ciao
 
Discussioni simili
Autore Titolo Forum Risposte Data
M [PHP] Recuperare coppia con valori i valori MAX e coppia con valori MIN PHP 26
M Recuperare valori da form PHP 2
A Funzione unica per prendere e recuperare valori Javascript 0
F Recuperare valori da una select Classic ASP 4
M recuperare credenziali di rete Reti LAN e Wireless 0
M Come recuperare molteplici input form PHP 1
A recuperare i dati passati nel post PHP 1
A recuperare data creazione di un file PHP 6
R Scorporare array e recuperare record tabella PHP 10
M Recuperare valore PHP 5
A [WordPress] Recuperare testo articoli da sito danneggiato WordPress 1
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
M Recuperare ID e usarlo in funzione jQuery 2
S [WordPress] Recuperare l'url immagini in evidenza WordPress 0
S [PHP] recuperare determinato elemento con lo scraping PHP 1
A [PHP] Recuperare indice per inserirlo in un'altra tabella PHP 4
P [PHP] Recuperare dati da una <select> PHP 4
S [PHP] recuperare dato da una tabella PHP 4
N [PHP] recuperare dati da db PHP 4
A [RISOLTO]Recuperare dati inviati con json tramite php PHP 4
F Recuperare dati json con php PHP 2
F Recuperare una stringa in formato json con php PHP 0
G Recuperare dato caricato dinamicamente jQuery 2
S recuperare un dato da una tabella mysql per inserirlo in una casella di input jQuery 3
S recuperare il valore di un campo input cliccando sul relativo dato di una tabella jQuery 0
Metazoo Recuperare variabile php da javascript senza aggiornare pagina PHP 5
S [PHP] Recuperare dato esatto tabella PHP 16
M Recuperare id e nome utente loggato PHP 0
D E-Commerce Recuperare dati da un sito E-Commerce 3
M Recuperare valore array Classic ASP 0
elpirata Recuperare i dati in una select PHP 5
Nik Recuperare ultimo ID inserito PHP 2
Devil-94 Recuperare il valore di un attributo del div tramite ajax. Ajax 3
Devil-94 Recuperare contenuto div Ajax 5
I recuperare testo da una pagina web html Ajax 2
IImanuII Salvare/recuperare html da un db PHP 5
filippino Recuperare i contenuti di un sito penalizzato SEO e Posizionamento 1
felino [Windows XP] Recuperare file in Word cancellato Windows e Software 4
Violetta De Amicis Recuperare la stringa di un ipertesto con javascript Javascript 1
G JQUERY recuperare il testo selezionato su un paragrafo jQuery 1
M Recuperare dati checkbox in diverse pagine PHP 1
Marcolotto Recuperare data e orario corrente in app Android Sviluppo app per Android 1
Marcolotto Recuperare i crash-data della mia app Android Sviluppo app per Android 1
J Recuperare variabili da php a java Javascript 2
felino Recuperare i livelli (photoshop) da un file JPG Photoshop 5
P [RISOLTO]recuperare dati da tabella jQuery 4
L [risolto] recuperare il nome dell'ultimo file caricato in una cartella PHP 2
F Recuperare file da un database PHP 6
C Come recuperare file Sicurezza e Virus 3
A Recuperare valore di una select e stamparla Javascript 3

Discussioni simili