[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 ;(

**shito** · 30/06/2008, 13h16

^^ pas de doutes c'est bien de l'AJAX qu'il te faut

Je vais essayer de te faire ça ce soir

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

Ok merci c'est sympa si t'as 10 p'tites minutes :p

**Herman** · 30/06/2008, 15h02

Bon apparemment, je suis pas loin, le seul problème étant que je n'arrive pas à faire passer l'id (paramètre edit) vers mon actualiser.php, du coup ma requête ne prend rien, et mon tableau renvoyé est vide.

Pour tester que ça vient bien de là, j'ai fait un echo tout au début de mon actualiser.php :

Code :

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

Notice: Undefined index: edit in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 4

Donc ça semble bien venir de là. Comment je peux faire pour transférer ce foutu id xD

Extrait de ma page normale :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<div id="tableau_actualiser">
	<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>
</div>	
	<br />							
<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', 'tableau_actualiser');"><img src="images/button_ok.png" width="14" /></span></td>
		</tr>	
	</table>
</form>

actualiser.js :

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
function request(url,cadre) {
var XHR = null;
 
if(window.XMLHttpRequest) // Firefox
XHR = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
XHR = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
return;
}
// envoie de la requête, methode GET et de l'url
XHR.open("GET",url, true);
 
// on guette les changements d'état de l'objet
XHR.onreadystatechange = function attente() {
 
// l'état est à 4, requête reçu !
if(XHR.readyState == 4)     {
 
// ecriture de la réponse
document.getElementById(cadre).innerHTML = XHR.responseText;
   }
}
XHR.send(null); // le travail est terminé
return;
}

actualiser.php :

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
32
33
34
35
36
37
38
<?php
require('connec.php');
//mysql_query("INSERT INTO moyen VALUES('', '" . $_GET['edit']. "', '". $_POST['type_moyen'] ."', '". $_POST['date'] ."', '". $_POST['etat_avancement'] ."', '". $_POST['intitule'] ."', '". $_POST['jour_homme'] ."', '". $_POST['cout'] ."')");
echo $_GET['edit'];
 
echo '<table>
        <tr>
                <TD class="titrelogin" width="15%">Cat&eacute;gorie</TD>
                <TD class="titrelogin" width="15%">Date r&eacute;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&ucirc;ts</TD>
                <TD width="5%"></td>
        </tr>';
        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>';
        
        }
        }
echo '</table>';
 
?>

EDIT : En mettant ça :

Code :

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

<span onclick="request('<?php echo $_GET['edit'];?>', 'tableau_actualiser');">

Code :

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

function request(id,cadre) {

Code :

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

XHR.open("POST",'actualiser.php?edit='+id, true);

Je réussis à récupérer l'id. Par contre mon insertion ne marche pas, il me sort un :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
Notice: Undefined index: type_moyen in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3
 
Notice: Undefined index: date in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3
 
Notice: Undefined index: etat_avancement in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3
 
Notice: Undefined index: intitule in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3
 
Notice: Undefined index: jour_homme in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3
 
Notice: Undefined index: cout in C:\Program Files\EasyPHP 2.0b1\www\actualiser.php on line 3

Donc il ne trouve pas les paramètres de mon formulaire que j'ai rempli :s

**shito** · 30/06/2008, 22h18

Forcément, tu n'envoyais pas les données à la fonction que tu appelais, ça ne pouvait pas marcher...

Déjà le mieux c'est de nommer ton formulaire, et ensuite comme tu l'as fait, tu englobait tout ton tableau dans un div, donc Ajax perd tout son intérêt, tu as autant recharger normalement la page... ^^'
Si tu tiens à exploiter Ajax et gagner en temps de rafraichissement, il faut que tu ne réactualise que les données que tu ajoutes, donc il faut mettre ta div tout à la fin de ton tableau (donc tu n'affiches que 6 chaines que tu connais déjà au lieu de refaire un parcours entier de ta base

)

Je te propose de faire comme ça:

Pour ton javascript, prends ça et je te laisse le soin de regarder les commentaires et de remplir toi-même ce qu'il manque, tout est indiqué

(ben oui jvais pas faire tout le boulot non plus...

)

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
var XmlHttp;
function getXmlHttpObject()
{
	var xmlhttpreq=null;
	if(window.XMLHttpRequest)
	{
		xmlhttpreq = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		xmlhttpreq = new ActiveXObject("Microsoft.XMLHTTP");
	}
	else
	{
		alert("Objets HTTP non supportés par le navigateur!");
	}
	return xmlhttpreq;
}
 
function ajouter(formu)
{
	// ici, pour avoir un code plus lisible, crée une variable pour chacun de tes éléments... ex: pour la date et l'état d'avancement
	var date = formu.date.value;
	var etat = formu.etat_avancement.value;
	//etc...
	XmlHttp.onreadystatechange=stateChanged;
	XmlHttp.open("GET","actualiser.php?date="+date+"&etat="+etat+"&etc...");	//reprend toutes tes variables ici pour les envoyer à ta page de traitement
	XmlHttp.send(null);
}
 
function stateChanged()
{
	if(XmlHttp.readyState==4)
	{
		var reg = new RegExp("[;]+", "g");
		list($date,$etat,$var3) = XmlHttp.responseText.split(reg);	//à compléter!! met dans list une variable pour chaque donnée que tu récupères
 
		var tr = document.createElement('tr');	// génération de la ligne à ajouter au tableau
		var td1 = document.createElement('td');	// génération des td
		var td2 = document.createElement('td');
		var td3 = document.createElement('td');
		var td4 = document.createElement('td');
		var td5 = document.createElement('td');
		var td6 = document.createElement('td');
		td1.appendChild(document.createTextNode($date));	// remplissage des td
		td2.appendChild(document.createTextNode($etat));
		td3.appendChild(document.createTextNode($var3));
		// à compléter!! ici on insère dans les balises td chaque élément de ton résultat continue de la même façon
 
		// insertion des tous les td dans le tr
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tr.appendChild(td6);
 
		getElementById("divAjout").appendChild(tr);	// et pour finir, ajout de ta ligne à la fin de ton tableau
	}
}

ensuite pour ta page de base, remplace par ça...

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
<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>';
        }
        }?>
<div id="divAjout"></div>
</table>
<br />	
 
<form name="formAjout">	
<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="ajouter(this.form);"><img src="images/button_ok.png" width="14" /></span></td>
	</tr>	
</table>
</form>

Pour finir, dans ta page actualiser.php, il faudra que tu fasses une requête pour insérer tes données dans ta base, ensuite fais un simple "echo" de toutes tes variables (récupérées par un GET bien sûr

) que tu sépares par un ";" (ex: echo "$date;$etat;$var3..."; )
fais attention de les afficher dans le même ordre que tu les récupères dans ton javascript

je te laisse le soin de tester, ça devrait marcher

sinon, ou si tu as des questions, je reste à ta disposition

**Herman** · 01/07/2008, 08h19

tu englobait tout ton tableau dans un div, donc Ajax perd tout son intérêt, tu as autant recharger normalement la page... ^^

Ahah non, mon fichier fait un peu plus de 1000 lignes (j'ai 3 onglets et dans chaque onglet j'ai 3 autres onglet xDD), donc j'y gagne même à recharger mon tableau entier :pp

Je test ça de suite, merci

**Herman** · 01/07/2008, 08h30

Hum, aucune réaction quand je clique sur le bouton "ok", ce serait pas dû au fait que le bouton se trouve dans le formulaire et qu'il n'y a aucun action=" " dans ce form ??

EDIT : Nan en fait, même en dehors du form il n'y a aucun réaction

**shito** · 01/07/2008, 08h50

Met le "onClick" de ton span sur le bouton ^^'
edit:
Je suis aussi un peu débutant en Ajax, mais un script comme ça devrait marcher assez facilement...
Si ça ne fait toujours rien, ouvre la console d'erreur et dis-moi ce qu'il te renvoie

**Herman** · 01/07/2008, 08h57

Met le "onClick" de ton span sur le bouton ^^'

le bouton ? xD J'en ai aucun ^^

**shito** · 01/07/2008, 09h03

Envoyé par Herman

Hum, aucune réaction quand je clique sur le bouton "ok"

Je parlais de ce bouton-là

(l'img si tu préfères...

)

**Herman** · 01/07/2008, 09h05

ah wai, dsl xD
Euh j'ai déjà testé aussi, aucune réaction.

**Herman** · 01/07/2008, 09h10

hum, j'ai un :

Code :

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

formu has no properties

sur cette ligne :

Code :

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

var type_moyen = formu.type_moyen.value;

**Bovino** · 01/07/2008, 09h19

Code :

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

<span onclick="ajouter(this.form);">

this correspond à ton span... mais this.form ne correspond à rien !
D'abord parce que ton span ne contient pas de formulaire, mais surtout parce que document.forms récupère tous les formulaires et que pour accéder aux propriétés, il faut préciser duquel on parle...

Code :

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

document.forms[formulaire]

formulaire étant soit le numéro d'ordre de ton form à l'intérieur de la page, soit le nom du formulaire recherché.

**Herman** · 01/07/2008, 09h26

1/ Si je met :

Code :

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

<span onclick="ajouter(document.forms[formAjout]);">

J'ai maintenant le droit à un :

Code :

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

formu has no properties

sur

Code :

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

var type_moyen = formu.type_moyen.value;

2/ Si je met :

Code :

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

<span onclick="ajouter(document.forms['formAjout']);">

J'ai droit à un :

Code :

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

XmlHttp has no properties

sur

Code :

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

XmlHttp.onreadystatechange=stateChanged;

**shito** · 01/07/2008, 09h34

Haha oui sur ce coup je suis un gros blaireau

Dans ta fonction ajouter, tout au début j'ai oublié de mettre la ligne:

Code :

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

1
2
 
XmlHttp = getXmlHttpObject();

C'est bien beau de faire des fonctions pour que ce soit propre, encore faut-il les appeler...

Pour le problème du span, je pense que ça marchera si tu dégage juste les balises span et /span après avoir mis ta fonction "onClick" sur ton bouton

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

JavaScript

Discussions similaires

Partager

Partager