[AJAX] actualiser un tableau sans recharger la page

**lamiae2** · 20/04/2009, 19h31

bonjour;

j'ai un problème au niveau de l'actualisation de ma page php!
je fais une mise a jour d'un champ dans mon tableau ca marche tres bien mais la page s'actualise en entier et m'ajoute une ligne qui est la dernière ligne de mon tableau (répetition)!! j'ai cherché et j'ai trouvé que ca se fait avec AJAX!! j'ai lu un tuto http://siddh.developpez.com/articles/ajax/!!
mais je sais pas comment faire un code qui m'actualise que le tableau et qui prend en considération la mise a jour??? la mise à jour je l'effectue avec une requete simple update!!!

merci de me répondre

**emmanuel.remy** · 20/04/2009, 21h08

Suis pas sûr d'avoir tout pigé, mais si tu veux mettre à jour uniquement une partie de ton tableau HTML, tu peux effectivement effectuer une requête AJAX qui va te renvoyer les données de mise à jour.
Ensuite tu manipules ta table via le DOM Html pour ajouter/modifier les lignes avec les données reçues.

ERE

**lamiae2** · 21/04/2009, 00h30

merci pour la réponses!mais comment faire ceci vous pouvez m'aidezencore plus avec un exemple de code?

merci

**emmanuel.remy** · 21/04/2009, 00h55

Envoyé par lamiae2

merci pour la réponses!mais comment faire ceci vous pouvez m'aidezencore plus avec un exemple de code?

merci

C'est difficile de te donner un code qui fasse ce que tu attends (pas assez d'info notamment) et si tu reprends le tutoriel AJAX ( http://siddh.developpez.com/articles/ajax/ ) tu peux quasiment faire un copier coller et ajouter ton code:

Code :

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

1
2
3
4
5
6
7
8
 
xhr.onreadystatechange = function(){
   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  if(xhr.readyState == 4 && xhr.status == 200){
     //A TOI DE MODIFIER TA TABLE ICI
 
  }
}

ERE

**andry.aime** · 21/04/2009, 06h59

Salut,

mais la page s'actualise en entier

Je pense que tu as utilisé un submit au lieu d'un simple appel d'une fonction Ajax

**lamiae2** · 21/04/2009, 10h48

le problème je sais pas comment integrer ma requete qui fait updat dans ajax!!!!

**andry.aime** · 21/04/2009, 10h59

On peut voir ton code JS et html?

**emmanuel.remy** · 21/04/2009, 10h59

Envoyé par lamiae2

le problème je sais pas comment integrer ma requete qui fait updat dans ajax!!!!

Précise stp. La requête SQL sur le server, appelée dans le cadre du script Ajax ?

ERE

**lamiae2** · 21/04/2009, 11h06

voila ma requete update:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>
  <input name="recherche" type="submit" class="Style1" id="recherche" value="Rechercher" align="right" onclick="pop()" on />
</p>
<form id="form2m" name="form2m"  method="post" action="" onsubmit="return validerMonFormulaire();">
  <input name="us" type="hidden" id="us" />

pour l'affichage:

Code :

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

1
2
3
4
5
6
$orl = mysql_query("SELECT livr FROM article where id='".$ida."'"); // Requête SQL
$li = mysql_fetch_array($orl);
$liv=$li['livr'];
<tr>
 <td><?php echo $liv; ?></td>
    </tr>

lorsque je qlique sur utiliser il m'execute correctement la requete mais il m'affiche une ligne de plus???

merci de m'aidez

**lamiae2** · 21/04/2009, 11h11

Code :

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

1
2
3
4
5
6
7
xhr.onreadystatechange = function(){
   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  if(xhr.readyState == 4 && xhr.status == 200){
     //je ne sias pas comment integrer ici ma requte d 'update???
 
  }
}

**emmanuel.remy** · 21/04/2009, 11h37

Code :

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

if( isset($_POST['utiliser']))

Fais bien attention à envoyer tes données en POST de puis AJAX

Code :

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

1
2
3
4
5
6
7
xhr.onreadystatechange = function(){
   // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
  if(xhr.readyState == 4 && xhr.status == 200){
     //je ne sias pas comment integrer ici ma requte d 'update???
     //FAIS un document.getElementById("XXX").innerHTML = xhr.responseText;
  }
}

ERE

**lamiae2** · 21/04/2009, 11h42

voila le code ajax que j'ai mis:

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
<script language="JavaScript" type="text/javascript">
var HttpObj = null;
var HttpStr = null;
 
function sendRequest(HttpStr) {
 if ( window.XMLHttpRequest ) {
  // Objet XmlHttpRequest pour les moteurs GECKO
  HttpObj = new XMLHttpRequest();   
 } else if ( window.ActiveXObject ) {
  // Objet XmlHttpRequest pour Internet Explorer
  HttpObj = new ActiveXObject( 'Microsoft.XMLHTTP' );   
 } else {
  // Navigateur non-compatible
  alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
  return;
 }
 // On traite l'argument passé à la fonction
 // On ouvre la requete vers la page désirée
 HttpObj.open( 'GET', HttpStr, false );
 // On lui donne le pointeur de fonction de retour
 HttpObj.onreadystatechange = returnRequest;
 // On envoi la requete
 HttpObj.send( null );
}
function returnRequest() {
 // Sur le retour de la requete, on teste son état
 if ( HttpObj.readyState == 4 && HttpObj.status == 200) {
  // On injecte notre retour dans la DIV prevue a cet effet
  document.getElementById( 'liste' ).innerHTML = HttpObj.responseText;
 }
} 
 
function affiche(id){
 var strHtml = document.getElementById(id).value;
 sendRequest('Moneygems.php?str='+strHtml);
 alert(strHtml);
}

mais je ne sais pas comment passer mon :

Code :

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

1
2
3
 <?php 
if( isset($_POST['utiliser']))
{

en ajax????

**andry.aime** · 21/04/2009, 12h07

1-Tu n' envoies str dans ton AJAX mais tu récupères us et utilisateur dans la page php.

sendRequest('Moneygems.php?str='+strHtml);
........
$_POST['utiliser']....
$_POST['us'].....

2- Tu utilises GET dans l'AJAX et tu utilises POST pour le récupérer.

HttpObj.open( 'GET', HttpStr, false );

**lamiae2** · 21/04/2009, 12h19

Code :

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

1
2
3
4
5
6
7
8
function affiche(id){
 var strHtml = document.getElementById(id).value;
 sendRequest('Moneygems.php?str='+strHtml);
$_POST['utiliser'];
$_POST['us'];
 alert(strHtml);
 
}

!!!!!!!!!!!!! comme ca???

**andry.aime** · 21/04/2009, 12h31

function affiche(id){
var strHtml = document.getElementById(id).value;
sendRequest('Moneygems.php?str='+strHtml);
$_POST['utiliser'];
$_POST['us'];
alert(strHtml);
}

ne met pas du php dans js!

Code :

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

1
2
3
4
function affiche(id){
 var strHtml = document.getElementById(id).value;
 sendRequest('Moneygems.php?str='+strHtml)+'&utiliser='+LaValeurUtiliser+'&us='+LaValeurUs;
 alert(strHtml);

et dans php

Code :

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

1
2
$_GET['utiliser']...
$_GET['us']

parceque tu utilises GET en js

HttpObj.open( 'GET', HttpStr, false );

**emmanuel.remy** · 21/04/2009, 12h33

Envoyé par lamiae2

Code :

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

1
2
3
4
5
6
7
8
function affiche(id){
 var strHtml = document.getElementById(id).value;
 sendRequest('Moneygems.php?str='+strHtml);
$_POST['utiliser'];
$_POST['us'];
 alert(strHtml);
 
}

!!!!!!!!!!!!! comme ca???

Arrive un moment où il faut savoir ce que l'on fait. Du PHP ou du Javascript. Et lire un tutoriel ou deux, apprendre un minimum car on ne peut pas toujours passer son temps à faire des copier-coller.

ERE

**lamiae2** · 21/04/2009, 12h45

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script language="JavaScript" type="text/javascript">
var HttpObj = null;
var HttpStr = null;
 
function sendRequest(HttpStr) {
 if ( window.XMLHttpRequest ) {
  // Objet XmlHttpRequest pour les moteurs GECKO
  HttpObj = new XMLHttpRequest();   
 } else if ( window.ActiveXObject ) {
  // Objet XmlHttpRequest pour Internet Explorer
  HttpObj = new ActiveXObject( 'Microsoft.XMLHTTP' );   
 } else {
  // Navigateur non-compatible
  alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
  return;
 }
 // On traite l'argument passé à la fonction
 // On ouvre la requete vers la page désirée
 HttpObj.open( 'POST', HttpStr, false );
 HttpObj.open( 'POST', HttpStr, false ); 
 // On lui donne le pointeur de fonction de retour
 HttpObj.onreadystatechange = returnRequest;
 // On envoi la requete
 HttpObj.send( null );
}
function returnRequest() {
 // Sur le retour de la requete, on teste son état
 if ( HttpObj.readyState == 4 && HttpObj.status == 200) {
  // On injecte notre retour dans la DIV prevue a cet effet
  document.getElementById( 'liste' ).innerHTML = HttpObj.responseText;
 }
} 
 
function affiche(id){
elt3=document.getElementById("us");
elt4=document.getElementById("utiliser");
 var strHtml = document.getElementById(id).value;
 sendRequest('Moneygems.php?str='+strHtml)+'&utiliser='+elt3.value+'&us='+elt4.value;
 
 alert(strHtml);
 
}
var testsub=0; 
function selectionner(valeur,valdeux,valtrois,valquatre) {
 testsub=1;
 var  val= valeur;
 document.form2m.us.value=val;
 document.form1m.us2.value=val;
 
}
function validerMonFormulaire() {
		// Traiter les éléments du formulaire
		if(testsub==1)
			{
 
			return true;
			}
		else
			{
			alert("Veuillez séléctionner SVP")
			return false;
 
			}
	}
 
 
 
 
</script>
</head>
<body>
<fieldset>
 
<div align="center">
  <legend  align="center" class="Style2">NOUVEAU MONEY-GEMS</legend>
</div>
 
 
 
 if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>
  <input name="recherche" type="submit" class="Style1" id="recherche" value="Rechercher" align="right" onclick="pop()" on />
</p>
<form id="form2m" name="form2m"  method="post" action="" onsubmit="return validerMonFormulaire();">
  <input name="us" type="hidden" id="us" />
		?>

SVP aidez moi!!!!je suis vraiment debutante et j'ai vraiment besoin de votre aide!!

**andry.aime** · 21/04/2009, 13h34

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
function sendRequest(HttpStr,data) {
 if ( window.XMLHttpRequest ) {
  HttpObj = new XMLHttpRequest();   
 } else if ( window.ActiveXObject ) {
  HttpObj = new ActiveXObject( 'Microsoft.XMLHTTP' );   
 } else {
  alert( 'Votre navigateur ne supporte pas les objets XMLHTTPRequest...' );   
  return;
 }
 HttpObj.open( 'POST', HttpStr, true );
 HttpObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//Pour POST
 HttpObj.onreadystatechange = returnRequest;
 HttpObj.send( data );
}
function returnRequest() {
 if ( HttpObj.readyState == 4 && HttpObj.status == 200) {
  document.getElementById( 'liste' ).innerHTML = HttpObj.responseText;
 }
} 
function affiche(id){
elt3=document.getElementById("us");
elt4=document.getElementById("utiliser");
 var strHtml = document.getElementById(id).value;
 var data;
 data='str'+strHtml;
 data+='&utiliser'+elt3.value;
 data+='&us'+elt4.value;
 sendRequest('Moneygems.php',data);
 }

**lamiae2** · 21/04/2009, 13h46

ca marche toujours pas !!!!il me fait tjrs l'actualisation??????

Code :

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

1
2
3
4
5
6
7
8
9
if( isset($_POST['utiliser']))
{
     mysql_connect("localhost", "root", "");
        mysql_select_db("article");
		$mgere=$_POST['us'];
 
		mysql_query("UPDATE articlee SET livr='OUI' where idg='".$mgere."'");
		}
		?>

est ce que ce code je dois le laisser car il me fais tjrs l'actualisation!!!
le code du bouton utiliser:

Code :

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

      <input name="utiliser" type="button" class="Style1" id="utiliser" value="  Utiliser "  onclick="affiche(liste);"/>

lorseque j'afiche strHtml:

Code :

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

alert(strHtml)

il retourne à undifined????? il ne reconner pas id 'liste' même si l'i de mon tableau c 'liste'!!!

Code :

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

<table width="100%" border="2" bordercolor="#0000FF" class="Style1" id="liste">

**andry.aime** · 21/04/2009, 13h56

Met liste entre une quote

Code :

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

<input name="utiliser" type="button" class="Style1" id="utiliser" value="  Utiliser "  onclick="affiche('liste');"/>

[AJAX] actualiser un tableau sans recharger la page

AJAX

Discussions similaires

Partager

Partager