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

  • Creatore Discussione Creatore Discussione matala
  • Data di inizio Data di inizio
M

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
 
prova a sostituire in questo modo,
Codice: 
document.getElementById("TabellaSottocategorie").appendChild(xmlhttp.responseText);
 
marino51 ha scritto:
prova a sostituire in questo modo,
Codice: 
document.getElementById("TabellaSottocategorie").appendChild(xmlhttp.responseText);
Clicca per allargare...

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
 
codice da eliminare,
Codice: 
document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;
sostituendolo con quello postato
 
Non funziona

marino51 ha scritto:
codice da eliminare,
Codice: 
document.getElementById("TabellaSottocategorie").innerHTML = xmlhttp.responseText;
sostituendolo con quello postato
Clicca per allargare...

@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
 
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 ha scritto:
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
Clicca per allargare...
@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.
 
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:
@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
 
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:
@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!
 
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
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
[PHP] Recuperare coppia con valori i valori MAX e coppia con valori MIN
Risposte
26
Visite
3K
PHP
Max61
M
M
Recuperare valori da form
Risposte
2
Visite
1K
PHP
Mimmo82
M
A
Funzione unica per prendere e recuperare valori
Risposte
0
Visite
1K
Javascript
andreadb91
A
F
Recuperare valori da una select
Risposte
4
Visite
3K
Classic ASP
Fulvio59
F
P
Access: recuperare Indice dopo un insert into
Risposte
0
Visite
1K
MS Access
psicona
P
M
recuperare credenziali di rete
Risposte
0
Visite
2K
Reti LAN e Wireless
mitico19
M
M
Come recuperare molteplici input form
Risposte
1
Visite
976
PHP
migo80
M
A
recuperare i dati passati nel post
Risposte
1
Visite
969
PHP
marino51
marino51
A
recuperare data creazione di un file
Risposte
6
Visite
2K
PHP
AndreaCerre
A
R
Scorporare array e recuperare record tabella
Risposte
10
Visite
2K
PHP
Hormus
H
M
Recuperare valore
Risposte
5
Visite
1K
PHP
Max61
M
A
[WordPress] Recuperare testo articoli da sito danneggiato
Risposte
1
Visite
2K
WordPress
glm1986ITALY
glm1986ITALY
B
[PHP] recuperare IP dei server in load balancing [RISOLTO]
Risposte
3
Visite
2K
PHP
bdario58
B
M
Recuperare ID e usarlo in funzione
Risposte
2
Visite
1K
jQuery
marcopompilio
M
S
[WordPress] Recuperare l'url immagini in evidenza
Risposte
0
Visite
1K
WordPress
solari77
S
S
[PHP] recuperare determinato elemento con lo scraping
Risposte
1
Visite
1K
PHP
Max 1
Max 1
A
[PHP] Recuperare indice per inserirlo in un'altra tabella
Risposte
4
Visite
1K
PHP
marino51
marino51
P
[PHP] Recuperare dati da una <select>
Risposte
4
Visite
4K
PHP
PietroDeRosa
P
S
[PHP] recuperare dato da una tabella
Risposte
4
Visite
2K
PHP
mr.x
M
N
[PHP] recuperare dati da db
Risposte
4
Visite
3K
PHP
nebbia
N
Alto Basso