Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > AJAX
AJAX Forum sur la programmation AJAX. Avant de poster : Cours AJAX, FAQ AJAX, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 05/08/2011, 13h48   #1
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Par défaut Comment envoyer un élément champ de type [] html en Ajax

Bonjour,
je dispose dans mon formulaire des champ de type tableau que je recupére
voilà mon formulaire :

Code php :
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
<?php
include('fonctions.php');
// connexion a la BdD
connect();
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="budget_css.css" />
	<title>Modifier un chapitre</title>
<script type="text/javascript">
 function getXhr(){
 var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
  try {
 xhr = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
 xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
}
else { // XMLHttpRequest non supporté par le navigateur 
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
  xhr = false; 
} 
            return xhr;
			}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function envoi_modif_chapitre(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
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){
reponsetxt = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
 
alert(reponsetxt);
}
				}
// Ici on va voir comment faire du post
xhr.open("POST","valide_modif.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Poster mes éléments tableaux						
xhr.send()
}
 
</head>
<body >
 
<div id="formulaire">  
<!-- formulaire -->
<form name="test" action="valide_modif_chapitres.php" method="post" >
<fieldset ><legend><b>Chapitres à modifier</b></legend>
 <table align="center" width="60%" >
<thead>
<tr>
<th>A modifier</th>
</tr>
</thead>
<tbody>
<?php
// requete : operations
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" value="ON" /></center>
</td>
</tr>
<?php
	} // fin while
?>
<tr align="center">
<td colspan="2">
<input type="submit" name="envoiform" value="Modifier les données" />
</td>
</tr>
</tbody>
</table>
 </fieldset>
</form>
</div>
 </body>
</html>

dans ma page php sous forme de tableaux array().

je veux passer par ajax pour faire la requête.
j'ai essayé par

Code :
1
2
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
mais ça marche pas.

dans ma page php
je les recupére comme ça :

Code php :
1
2
3
4
5
6
7
8
9
10
11
12
13
if (isset($_POST['labox']))
{
// recuperation des checkbox (array !)
$array_box = $_POST['labox'];
// on parcours l'array
foreach($array_box as $key => $val) {
// Si LA CASE EST COCHEE -> on traite les donnees
if($val =='ON') 
{ 
// on recupere les donnees (de la ligne correspondante)
$ID_chapitre 			= $key; // $key = id_operation !
$designation_chapitre 	= $_POST['chapitre'][$key];
.....
Comment je dois les envoyer dans ma fonction javascript ces éléments ?

Merci de vos solutions.


Cordialement.
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 14h12   #2
Nouveau Membre du Club
 
Homme Tarek
Technicien Help Desk
Inscription : juillet 2011
Messages : 32
Détails du profil
Informations personnelles :
Nom : Homme Tarek
Localisation : France, Essonne (Île de France)

Informations professionnelles :
Activité : Technicien Help Desk
Secteur : High Tech - Opérateur de télécommunications

Informations forums :
Inscription : juillet 2011
Messages : 32
Points : 35
Points : 35
Envoyer un message via Yahoo à mctarek
Citation:
Envoyé par madina Voir le message
Bonjour,
je dispose dans mon formulaire des champ de type tableau que je recupére
voilà mon formulaire :
....
Comment je dois les envoyer dans ma fonction javascript ces éléments ?
Merci de vos solutions.

Cordialement.
Je convertis l'array (php) au format json, puis je traîte directement l'objet reçu en javascript. mctarek

Lien : json_encode
mctarek est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 14h21   #3
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour mctarek,

En fait avant d'avoir l'array() pHP, javascript doit d'abord envoyer un tableau de type [] html.

Mon soucis c'est comment javascript traite ce type d’élément pour l'envoyer via ajax ?

Cordialement
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 14h29   #4
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
Code :
1
2
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
Tu n'as aucun élément dont l'id est chapitre ou labox... alors effectivement, c'est comme appeler ta femme par le prénom de la voisine, c'est rarement efficace

Citation:
comment javascript traite ce type d’élément
Uniquement comme une chaine normale, il n'existe pas le même principe qu'avec PHP à ce niveau (ne serait-ce que parce la syntaxe d'ajout dans un tableau tab[] = valeur n'existe pas en JavaScript).
Il faut donc rechercher le nom exact.
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 15h26   #5
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour

En ajoutant l'id sur les balise input comme cela

Code php :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// requete : operations
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" id="chapitre[<?php echo $idLigne; ?>]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[<?php echo $idLigne; ?>]" value="ON" /></center>
</td>
</tr>
<?php
	} // fin while
?>

et en faisant :

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function envoi_modif_chapitre(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
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){
reponsetxt = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
alert(reponsetxt);
}
}
// Ici on va voir comment faire du post
xhr.open("POST","valide_modif_chapitres.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
xhr.send("chapitre="+chapitre+"&labox="+labox);
			}
là, j'obtiens plus aucun message

je crois c'est à la transmission des éléments [] qui pose tjrs probléme.

Cordialement
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 15h35   #6
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
D'abord, ce serait sympa de poster le code HTML généré et pas le PHP (voir : Important : Les règles incontournables d'utilisation de ce forum).

Ensuite, tu n'as toujours pas d'id chapitre ou labox
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 16h51   #7
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

Tu parles de quel code html généré ?

En fait j'ai mis l'attribut d'id sur les deux champ à savoir chapitre et labox.

Cordialement
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 05/08/2011, 16h57   #8
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
Citation:
Envoyé par madina
Tu parles de quel code html généré ?
Celui affiché par ton navigateur (CTRL + U)
Citation:
Envoyé par madina
En fait j'ai mis l'attribut d'id sur les deux champ à savoir chapitre et labox.

Si j'en crois mes yeux, tu as mis
Code php :
id="chapitre[<?php echo $idLigne; ?>]"
or en JavaScript
Code :
"chapitre" == "chapitre[idLigne]"
renverra toujours false...
Citation:
Uniquement comme une chaine normale, il n'existe pas le même principe qu'avec PHP à ce niveau (ne serait-ce que parce la syntaxe d'ajout dans un tableau tab[] = valeur n'existe pas en JavaScript).
Il faut donc rechercher le nom exact.
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 13h17   #9
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

avec :

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// requete : chapitres
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" id="chapitre[]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[]" value="ON" /></center>
</td>
</tr>
<?php
} // fin while
?>

et coté javascript :

Code :
1
2
3
chapitre= document.getElementById('chapitre').value;
labox = document.getElementById('labox').value;
xhr.send("chapitre="+chapitre+"&labox="+labox);
ça m'affiche plus aucun message en réponse.
Et le le (CTRL+U) affiche une page blanche.


Cordialement.
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 15h20   #10
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
Est-ce que tu es capable de comprendre qu'avec cette notation, l'id de ton élément est "chapitre[]", pas "chapitre" !
Donc nécessairement
Code :
chapitre= document.getElementById('chapitre').value;
n'existe pas !!!
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 16h01   #11
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

Oui tout à fait c'etait évident, .

Bon avec
Code :
1
2
chapitre= document.getElementById('chapitre[]').value;
labox = document.getElementById('labox[]').value;
ça envoie bien les tableaux.

mais dans mon fichier php , j'ai cet erreur :
Code :
Warning: Invalid argument supplied for foreach()
Compréhensible car je récupérais directement le tableau envoyé ci-dessus sous forme d'array comme ça :

Code :
1
2
3
4
5
$array_box = $_POST['labox'];
// on parcours l'array
foreach($array_box as $key => $val) {
....
}
Existe-t-il un moyen de transformer le tableau de javascript envoyé en tableau array PHP pour pouvoir lui appliquer un foreach ?

Cordialement.
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 16h26   #12
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
Citation:
Envoyé par madina
Existe-t-il un moyen de transformer le tableau de javascript envoyé en tableau array PHP pour pouvoir lui appliquer un foreach ?
Non car il n'y a aucun tableau créé en JavaScript !
D'autre part, comme un id doit être unique dans la page, ta création d’identifiants est incorrecte.
Il faut que tu fasses une boucle pour récupérer la valeur de chaque input et l'ajouter aux paramètres à envoyer.
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 16h38   #13
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,



la valeur de chaque input : tu veux dire la valeur de chaque élément du tableau.

Et la boucle , je le fais à la création d'identifiants où à l'envoi du tableau ?
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 18h43   #14
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

Bovino.

Pour recupérer la valeur de chaque input, j'ai crée un tableau d'indices qui appelé indice de la même maniére que les input.

Et dans javascrip je boucle sur le nombre d'indices pour recupérer la valeur de chaque input.

voilà le html :

Code :
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
$i=0;
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
?>
<tr>  
<td class="chapt">
<input type="text" name="chapitre[<?php echo $idLigne; ?>]" id="chapitre[]" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" />
<td class="box">
<center><input type="checkbox" name="labox[<?php echo $idLigne; ?>]" id="labox[]" value="ON" /></center>
</td>
<td >
 
<input type="hidden" name="indice[<?php echo $i; ?>]" id="indice[<?php echo $i; ?>]" value="<?php echo $idLigne; ?>" />
 
// champ qui contient le nombre d'indices
<input type="hidden" name="i" id="i" value="<?php echo $i; ?>" />
</td>
<?php
$i=$i+1;     // J'incrémente la clé du tableau d'indices
  ?>
</tr>
 
<?php
	} // fin while
?>

en javascript :

Code :
1
2
3
4
5
6
7
8
indice= document.getElementById('i').value;
for(j=0;j<=indice;j++)
{
ligne=document.getElementById('indice['+j+']').value;
chapitre[ligne]= document.getElementById('chapitre['+ligne+']').value;
labox[ligne] = document.getElementById('labox['+ligne+']').value;
}
xhr.send("chapitre="+chapitre[]+"&labox="+labox[]);
mais ça m'affiche pas l'alerte de réponse

Merci d'une solution

Cordialement.
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 18h55   #15
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 13 807
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 13 807
Points : 35 797
Points : 35 797
Citation:
Envoyé par Bovino Voir le message
un id doit être unique dans la page, ta création d’identifiants est incorrecte.
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/08/2011, 23h02   #16
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 993
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 993
Points : 5 786
Points : 5 786
Envoyer un message via Skype™ à jreaux62
Bonsoir tout le monde, ... AVANT D'ALLER PLUS LOIN :
1/ Pour comprendre -> le 1er post de Madina : Modifier des enregistrements affichés dans un tableau HTML
2/ Quelqu'un a-t-il remarqué ces lignes dans le code fourni par Medina ?
Code :
1
2
3
4
5
6
7
//=> javascript :
	function envoi_modif_chapitre(){
//=> formulaire :
	<form name="test" action="valide_modif_chapitres.php" method="post" >
//-> Aucune relation ! le js ne risquait pas de se déclencher ...
//=> remplacer par :
	<form name="test" method="post" action="" onsubmit="envoi_modif_chapitre();">
Bonsoir Madina,
2 conseils :
1/ comme l'a dit Bovino -> poster UNIQUEMENT le code HTML généré, et pas le PHP
2/ Pour bien COMPRENDRE LE PRINCIPE, on va SIMPLIFIER le formulaire (3 éléments par array sont suffisants pour tester)
Donc -> crée un fichier test.php dans lequel tu mets :
Code :
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
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<link rel="stylesheet" media="screen" type="text/css" title="Design" href="budget_css.css" />
	<title>Modifier un chapitre</title>
	<script type="text/javascript">
		// .... ICI le script JAVASCRIPT/AJAX....
		// -> on aura ici en index des array : 11, 22, 33.
 
	</script>
</head>
</body>
<!-- formulaire test -->
<form method="post" action="" onsubmit="envoi_modif_chapitre();">
<table>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[11]" id="idchapitre[11]" size="80" value="blabla1" /></td>
		<td class="box"><input type="checkbox" name="labox[11]" id="idlabox[11]" value="ON" /></td>
	</tr>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[22]" id="idchapitre[22]" size="80" value="blabla2" /></td>
		<td class="box"><input type="checkbox" name="labox[22]" id="idlabox[22]" value="ON" /></td>
	</tr>
	<tr>
		<td class="chapt"><input type="text" name="chapitre[33]" id="idchapitre[33]" size="80" value="blabla3" /></td>
		<td class="box"><input type="checkbox" name="labox[33]" id="idlabox[33]" value="ON" /></td>
	</tr>
</table>
</form>
Pour éviter les confusions, j'ai mis :
... name="chapitre[33]" id="idchapitre[xx]" ...
... name="labox[33]" id="idlabox[xx]"...
A partir de là, on peut "travailler" sur le script JAVASCRIPT/AJAX.

-> TEST : on aura ici en index des array : 11, 22, 33.
-> pour info, les index sont en fait les ID des enregistrements dans la table SQL : ils ne sont donc variables, pas forcément consécutifs, ni par ordre croissant ...

-> une fois qu'on aura compris le principe, on passera au fichier réel.
Tu peux lire : Conversion d'un tableau PHP de dimension N en tableau JavaScript (mais ca ne correspond pas exactement -> à cause des index)
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/08/2011, 10h06   #17
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 993
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 993
Points : 5 786
Points : 5 786
Envoyer un message via Skype™ à jreaux62
STOP ! AVANT D'ALLER PLUS LOIN : (je me répète !)
Il m'est venu un doute sur l'utilité d'envoyer TOUTE la <table> à AJAX ...

Madina, peux-tu expliquer précisément QUEL résultat tu cherches à obtenir ?

Car s'il s'agit de modifier des lignes de <table> une par une "en live" (sans rechargement), une autre méthode est possible et moins complexe !
Citation:
- 1 <form> par ligne,
- au lieu de la chexkbox, un bouton submit "modifier"
- et on envoie la ligne à js/ajax via onsubmit="change_ligne(id_enregistrement);"
=> Tant qu'à faire, allons même plus loin : Modification "inline" de données avec AJAX (voir la démo)
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/08/2011, 20h06   #18
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

jreaux62 j’étais pas là hier.

Bon en fait je veux simplement pouvoir modifier les lignes d'une table sans rechargement de la page. L'essentiel est que les modifications faites sur chaque ligne soient enregistrées au niveau de la table.

Et dans ce cas, un simple message AJAX(pour rester dans la même page) pour lui dire que les modifications se sont bien passées suffirait.

L'idée c'est de lui faciliter la tâche de pouvoir modifier plusieurs lignes d'une table en même temps.

Les checkbox c'est pour simplement pouvoir identifier les différentes lignes qui sont modifiées et lui dire "tu as modifié nombre de lignes".

Pour le code fourni, c'est le même but c'est juste les tables qui différent.

Cordialement
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 08/08/2011, 07h34   #19
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 993
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 993
Points : 5 786
Points : 5 786
Envoyer un message via Skype™ à jreaux62
Bonjour Madina,
dans ce cas, inutiles de se compliquer la vie.
Les solutions les plus simples sont toujours les meilleures, et sont celles de mon message précédent.

1/ La solution la plus simple et la plus classique est celle-ci :
- 1 formulaire par ligne,
- input pour chaque donnée sur chaque ligne (identifiée grâce à l'ID_ligne)
- un bouton "modifier" sur cette ligne
- en cliquant sur le bouton : envoi des données de cette ligne à AJAX pour traitement

ou (petite amélioration)
- dès qu'un champ est modifié sur une ligne, on affiche automatiquement (-> test javascript) un bouton "modifier" sur cette ligne

2/ Un peu plus complexe, mais pas beaucoup plus compliqué : as-tu regardé ceci ? Modification "inline" de données avec AJAX (voir la démo)
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 09/08/2011, 15h39   #20
Débutant
 
Inscription : avril 2005
Messages : 464
Détails du profil
Informations forums :
Inscription : avril 2005
Messages : 464
Points : 69
Points : 69
Bonjour,

jreaux62, J'ai adopté pour l'instant la solution classique d'un formulaire par ligne:

Je parviens à modifier la ligne avec un bouton "modifier" à coté.
Cependant je voudrais améliorer en affichant le bouton que si un champ de la ligne est modifiée.
Mais je bloque sur l’événement qui se déclenche si le champ est modifié et comment ré-afficher le bouton caché ?

je vous donne ici le code du formulaire :

j'identifie le champ input et le bouton "modifier" par leur nom collé à l'identifiant de la ligne.

Code :
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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Modifier un chapitre</title>
<script type="text/javascript">
function envoi_modif_chapitre(id_ligne){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
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){
reponsetxt = xhr.responseText;
alert(reponsetxt);
 
}
}
 
// Ici on va voir comment faire du post
xhr.open("POST","valide_modif_chapitres.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
chapitre= document.getElementById('chapitre'+id_ligne).value;
xhr.send("chapitre="+chapitre+"&id_ligne="+id_ligne);
}
 
 
function affiche_buton_modif(id_ligne)
{
document.getElementById('modif_chapt' +id_ligne).style.visibility ="visible"; 	
}
</script>
</head>
 
<body>
 <form name="test" action="valide_modif_chapitres.php" method="post" >
<fieldset ><legend><b>Chapitres à modifier</b></legend>
 <table align="center" >
<thead>
<tr>
<th>chapitre</th>
<th>A modifier</th>
</tr>
</thead>
<tbody>
<?php
// requete : chapitres
$sql = "SELECT * FROM chapitres;";
$sql_result = mysql_query($sql);
while($row_op_mod = mysql_fetch_array($sql_result)) 
{
$idLigne = $row_op_mod['id_chapitre']; // id UNIQUE -> on s'en sert pour identifier la ligne !
 
?>
 
<form name="mod_lign_chap" >
<tr>  
<td>
<input type="text" name="chapitre<?php echo $idLigne; ?>" id="chapitre<?php echo $idLigne; ?>" size="80" value="<?php echo $row_op_mod['designation_chapitre']; ?>" onchange="affiche_buton_modif(<?php echo $idLigne; ?>);" />
<td>
<center><input type="button" style="display:none" name="modif_chapt<?php echo $idLigne; ?>"  id="modif_chapt<?php echo $idLigne; ?>" onclick="envoi_modif_chapitre(<?php echo $idLigne; ?>);"/></center>
</td>
</tr>
</form>
 
<?php
} // fin while
?>
</tbody>
</table>
</fieldset>
</form>
</body>
</html>
Est-ce que le "formulaire par ligne" est syntaxiquement correcte selon mon code html ci dessus?

Comment savoir si un champ d'une ligne est modifié pour afficher le bouton "modifier" ?

Merci de solutions.

Cordialement
madina est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 12h37.


 
 
 
 
Partenaires

Hébergement Web