[AJAX] Recharger les données d'un tableau

**Herman** · 30/06/2008, 09h12

Bonjour,

Je préfère prévenir tout de suite, je suis 0 en AJAX !!

J'ai une page des plus simple avec un tableau contenant des données, et juste en dessous un formulaire qui permet de saisir des données qui viendront s'incrémenter dans ce tableau.

Ce que j'aimerais faire, c'est qu'à chaque validation d'ajout, mon tableau se mette à jour. Je présume que c'est vraiment tout simple à faire en ajax, mais bien sur, je n'ai rien trouvé de très concret ^^

Merci d'avance !

**shito** · 30/06/2008, 11h04

La meilleure idée qui me vienne serait de placer une div à la fin de ton tableau comme ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
...
</tr>
<div id="maDiv"></div>
</table>

puis d'ajouter tes éléments à l'aide des DOM --->
les syntaxes DOM

si tu ne sais pas comment l'implémenter, envoie ton code, je pourrais peut-être t'aider

**Herman** · 30/06/2008, 11h10

Je suis parti là dessus : http://www.crea-paradise.com/sujet-1...t-un-bloc.html
la toute dernière réponse en bas de page.

Par contre, à la base mon url est du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

test.php?id=blabla&machin=blabla&truc=blabla

Donc j'ai fait un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<span onclick="request('page.php?id=blabla&machin=blabla&truc=blabla', 'block-actualiser');">Clique ici pour actualiser</span>

en espérant qu'après il me ramène mes id.

Mais ça n'est pas pris en compte quand ça recharge mon tableau

EDIT : et pire, ça me renvoie en url les champs de mon formulaire

**Herman** · 30/06/2008, 11h23

Tableau d'affichage des données :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<table>
	<tr>
		<TD class="titrelogin" width="15%">Catégorie</TD>
		<TD class="titrelogin" width="15%">Date réalisation</TD>
		<TD class="titrelogin" width="15%" align="center">Etat avancement</TD>
		<TD class="titrelogin" width="40%" align="center">Intitul&eacute;</TD>
		<TD class="titrelogin" width="10%" align="center">Jour/Homme</TD>
		<TD class="titrelogin" width="10%" align="center">Coûts</TD>
		<TD width="5%"></td>
	</tr>
	<?php if (isset($_GET['edit'])){
        $reponse = mysql_query('SELECT * FROM moyen WHERE id_action = "'. $_GET['edit'] . '" ');
        
        while ($donnees = mysql_fetch_array($reponse) )
        {
        $date = explode('-',$donnees['date_realisation']);
        ?>
 
	<tr class="donneetableauut" onmouseover="this.style.background='#dcdcdc'"  onmouseout="this.style.background='#FFFFFF'" >
		<td class="" id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $donnees['moyen']; ?></td>
		<td class="" id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $date[2],'/',$date[1],'/',$date[0]; ?></td>
		<td class="" id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $donnees['etat_avancement']; ?></td>
		<td class="" id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $donnees['intitule_moyen']; ?></td>
		<td class="" id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $donnees['jour_homme']; ?></td>
		<td id ="<?php echo $donnees['id_moyen']; ?>" align="center"><?php echo $donnees['cout']; ?></td>
 
	</tr>
	<?php
        }
        }?>
</table>

Formulaire de saisie :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form method="get">	
	<table>
		<tr>
			<td width="15%">
				<SELECT name="type_moyen">
					<option value="" selected="selected">- - -</option>
					<option value="Technique">Technique</option>
					<option value="Humain">Humain</option>
					<option value="Organisationnel">Organisationnel</option>
					<option value="Humain">Humain</option>
				</SELECT>
			</td>
			<td width="15%"><INPUT type=text name="date"></td>
			<td width="15%"><INPUT type=text name="etat_avancement"></td>
			<td width="30%" align="center"><INPUT size="40" type=text name="intitule"></td>
			<td width="10%" align="center"><INPUT type=text name="jour_homme"></td>
			<td width="10%" align="center"><INPUT type=text name="cout"></td>
			<td width="5%" ><span onclick="request('actualiser.php?edit=<?php echo $_GET['edit']; ?>&id=<?php echo $_GET['id']; ?>&id_exercice=<?php echo $_GET['id_exercice']; ?>&id_ut=<?php echo $_GET['id_ut']; ?>&id_ref=<?php echo $_GET['id_ref']; ?>&id_act=<?php echo $_GET['id_act']; ?>&id_danger=<?php echo $_GET['id_danger']; ?>#fragment-3', 'tableau_actualiser');"><input type="image"  src="images/button_ok.png" width="14"></span></td>
		</tr>	
	</table>
</form>

Quand je click sur le bouton "ok" du formulaire, j'aimerais que ça fasse l'insertion puis que ça mette à jour mon tableau d'affichage des données

**shito** · 30/06/2008, 12h21

pour sûr, ça ne pouvait pas marcher...

dans le code sur lequel tu te bases, la fonction appelée par un clic sur ta balise "span" ne fait que créer ton objet ActiveX, et n'exécute pas le reste du code ^^

Une façon un peu plus propre de faire tes appels (selon moi) serait comme ceci:

D'abord tu déclare ton objet et tu te fais une fonction javascript de création d'objet ActiveX:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
var XmlHttp;
function getXmlHttpObject()
{
	var xmlhttpreq=null;
	if(window.XMLHttpRequest)
	{
		xmlhttpreq = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		xmlhttpreq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
		alert("Votre navigateur ne supporte pas les HTTP Request, veuillez contacter votre administrateur (ou mettre à jour votre version de Firefox/Internet Explorer)");
	}
	return xmlhttpreq;
}

faire comme celà te sera très utile par la suite si tu as besoin de faire plusieurs appels de fonctions AJAX...

Ensuite j'ai du mal à saisir ce que tu essaye de faire...
Il me semble que tu commences par récupérer tes données à partir de ta variable $_GET["edit"] et maintenant tu veux ajouter des enregistrements au fur et à mesure?

Si c'est le cas je te conseille déjà de passer ton "edit" par post (ça décrassera déjà un peu les milliards de variables que tu passes en "GET" ^^), puis pour plus de lisibilité (déjà je suis pas sûr que ton code puisse marcher comme ça au niveau du tableau), récupère tous les GET dont tu as besoin dans des variables et fais un seul bloc de code php pour l'affichage de ton tableau, du genre:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<table>
	<tr>
		<TD class="titrelogin" width="15%">Catégorie</TD>
		<TD class="titrelogin" width="15%">Date réalisation</TD>
		<TD class="titrelogin" width="15%" align="center">Etat avancement</TD>
		<TD class="titrelogin" width="40%" align="center">Intitul&eacute;</TD>
		<TD class="titrelogin" width="10%" align="center">Jour/Homme</TD>
		<TD class="titrelogin" width="10%" align="center">Coûts</TD>
		<TD width="5%"></td>
	</tr>
<?php
if (isset($_GET['edit']))
{
        $reponse = mysql_query('SELECT * FROM moyen WHERE id_action = "'. $_GET['edit'] . '" ');
        while ($donnees = mysql_fetch_array($reponse) )
        {
                $date = explode('-',$donnees['date_realisation']);
                echo '<tr class="donneetableauut" onmouseover="this.style.background=\'#dcdcdc\'"  onmouseout="this.style.background=\'#FFFFFF\'" >
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['moyen'].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$date[2].'/'.$date[1].'/'.$date[0].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['etat_avancement'].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['intitule_moyen'].'</td>
                <td class="" id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['jour_homme'].'</td>
                <td id ="'.$donnees['id_moyen'].'" align="center">'.$donnees['cout'].'</td>
                </tr>';
        }
}
?>
</table>

Pour finir, si j'ai vu juste dans tes intentions, il faudra refaire une bonne partie du code... Seulement là je rame un peu au taf donc je n'aurais pas le temps de voir ça avant ce soir...

**Herman** · 30/06/2008, 13h06

Oui, mon paramétre "edit" représente un numéro d'action, et pour chaque action, je veux ajouter des moyens.

Mon premier tableau (celui que je veux mettre à jour avec de l'AJAX) récupère tous les moyens de l'action dans laquelle je me trouve (paramètre "edit"), et via le formulaire d'après je veux insérer d'autre moyens.

Sinon les tableaux marchent très bien là =) Avec le lien que je t'ai montré, si je met l'appel de la fonction sur l'image "ok", deux choses peuvent se passer :

- si je garde les balises form : lorsqu'il a tenté de mettre à jour mon tableau, il me passe en paramètres les valeurs des champs du formulaire, et non les id qui sont actuellement en GET ==> Résultat : mes requêtes basées sur mes GET ne marche plus, donc ça va pas puisque ça me fait 50 000 erreurs sur des index non existants.
- si j'enlève les balises form : si j'insère un moyen via easyphp, et que je click sur l'image "ok", pas de problème, il me garde mes bonnes valeurs en paramètre, et il me met bien à jour mon tableau.

Maintenant, il faut qu'en plus de ça, j'arrive à faire l'insertion via le formulaire, et donc il faut que je garde les balises form. Mais j'en reviens au problème ci-dessus, à savoir qu'en gardant les balises form, mes paramètres passés en GET ne sont pas gardés ;(

[AJAX] Recharger les données d'un tableau

JavaScript

Vue hybride

Discussions similaires

Partager

Partager