Marche à suivre - popup/ajax/récupération & co...

Invité · 26/01/2015, 16h10

Bonjour,

Petit post car je suis un poil perdu, je cherche des infos partout et notamment sur ce forum et site pour réussir à coder une partie de mon outil ...

Au niveau langage, je commence à être plus à l'aise avec le php/mysql mais le javascript et l'ajax, c'est pas encore ça ...

Sur une page, j'ai un formulaire standard, un des <input> est une liste déroulante qui va chercher son résultat dans une requête SQL.
Cette liste est composé de TYPE, il est possible d'en ajouter avec un petit "plus" qui ouvre un popup (fenêtre indépendante).
Par contre, windows.opener.location.reload recharge ensuite toute la page pour obtenir ce nouveau type ... et toutes les autres données sont remise à zéro (je pourrais récupérer les variables temporaires et les renvoyer mais je me disais que la nouvelle solution pourrait être plus propre)

Je souhaiterais recoder toute cette partie pour avoir une formulaire qui ne recharge que la liste et non toute la page. Si j'ai bien suivi, on me parle d'ajax ...
Mais pour corser le tout, j'ai trouvé sur ce site un super tuto http://dmouronval.developpez.com/tut...e-modale-css3/ pour avoir une fenêtre modale.
Après plusieurs recherches, il n'est pas possible de valider un formulaire dans ce popup car il valide la page entière ....

Du coup, je commence à me mélanger avec le JS, l'Ajax, etc ... etc ...

Est-ce que quelqu'un qui a l'habitude pourrait me dire sur quoi je dois partir pour que le popup modale s'ouvre sur la page, que je puisse renseigner un nouveau type dans la bdd et que la page principale recharge seulement le DIV.
Je ne demande pas de me faire le code, je souhaite juste savoir si je dois utiliser du HTTP POST, du XhtmlRequest... Ou bien si ce que je souhaite faire n'est pas possible avec une fenêtre modale ... M’aiguiller dans mes recherches...

Merci pour votre aide.

**ryan** · 26/01/2015, 16h55

Yop!

C'est bien du taf pour AJAX, en effet.

Dans les grandes lignes: dans ta fenêtre modale, tu as un champ de type texte pour y entrer le nouveau type, et un bouton. Sur le onclick de ce bouton, tu fais un appel AJAX en transmettant la valeur du nouveau type.

La page PHP appelée par AJAX sauve le nouveau type dans la table ad hoc et lit le nouveau contenu de la table, que tu renvoies ensuite au format qui t'arrange le mieux (XML ou JSON )

Dans ta fonction AJAX, quand ton objet XMLHttpRequest reçoit la notification du retour des données envoyées par ton script PHP, tu effaces toutes les options de ton select et tu en crées de nouvelles en lisant les données XML ou JSON.

J'ai posté un exemple de javascript/AJAX dans un post récent

Invité · 26/01/2015, 17h18

Merci de me répondre, étant donné qu'il s'agit d'un gros morceau pour moi, je vais faire les choses étape par étape.

1ère partie :

Dans les grandes lignes: dans ta fenêtre modale, tu as un champ de type texte pour y entrer le nouveau type, et un bouton. Sur le onclick de ce bouton, tu fais un appel AJAX en transmettant la valeur du nouveau type.

Attention, je vais peut-être mettre des grosses conneries !

J'ai parcouru le lien mais vu qu'il n'y a pas de formulaire, je suis un peu perdu pour cette partie.

Au niveau du form :

Code :

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

1
2
3
4
5
<form method="post" id="form">
                <table class="table_ajout">
                <tr><td class="td_modif_mini">Type</td><td><input type="text" size="35" style="text-align:center;" name="dem_type"></td></tr>	
                </table>				
                <br /><p align="center"><input type="button" id="type" onclick="valider_type();" class="valider_img" name="go" title="Modifier" value=""/></p></form>

Le code JS :

Code :

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

1
2
3
function valider_type() {
               var type =  document.getElementById("dem_type").value; 
            }

Pour cette partie, je suis déjà complètement à la masse ? (car c'est sûrement la plus simple

)

Dans la fonction valider, je dois ensuite partie sur ce type de code ?

$.ajax({
data: data,
type: "post",
url: "insertmail.php",
success: function(data){
alert("Data Save: " + data);
}

Merci !

**ryan** · 26/01/2015, 18h47

Yop!

On va y aller pas à pas...

Je vois que tu veux "valider" ce que l'utilisateur entre dans le champ type, que tu as appelé "dem_type".
Ta fonction valider_type() ne fait rien d'autre que d'essayer de placer dans une variable le contenu du champ "dem_type".
Elle ne va pas y arriver parce que tu n'as pas de champ dont l'ID est "dem_type". Tu as par contre un champ dont le nom est "dem_type".
La première chose à faire est donc d'ajouter une propriété ID à ton champ:

Code html :

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

1
2
 
<input type="text" size="35" style="text-align:center;" name="dem_type" id="dem_type">

Ensuite, dans ta fonction valider_type(), tu dois t'occuper d'envoyer ta variable "type" à un script PHP (donc sur le serveur) qui va ajouter ce type dans la table ad hoc ( BTW, "type" est un peu risqué comme nom de variable dans la mesure où il pourrait être confondu avec un mot-clé. Il vaudrait mieux utiliser "montype", ou quelque chose du genre )

Bref, il faut donc envoyer le type vers le script PHP, et sans recharger la page comme le ferait un formulaire que tu soumettrais à sa page d'action.

C'est là qu'on va utiliser l'objet XMLHttpRequest. La première chose à faire est de le créer avec cette fonction:

Code javascript :

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
 
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 
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}

On maintenant va s'occuper de l'envoi proprement dit. Dans un premier temps, on va juste s'assurer qu'on reçoit bien une réponse de la part du script PHP. Ta fonction valider_type() va s'enrichir de quelques lignes de code JS.

On va dans l'ordre:
- créer l'objet XMLHttpRequest en appelant la fonction getXhr définie plus haut
- définir ce que l'on fait quand le serveur renverra quelque chose en réponse à ta requête ( pour l'instant: une bête alertbox )
- envoyer la valeur du champ vers le script PHP

Code javascript :

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
 
function valider_type()
{
	var montype =  document.getElementById("dem_type").value; 
 
	var xhr = getXhr();
 
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			reponse = xhr.responseText;
			alert(reponse);
		}
	}	
 
	xhr.open("POST","update_type_table.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("type_a_ajouter="+montype);	
}

Et le code PHP ( provisoire )

Code php :

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

1
2
3
4
 
<?
echo $_POST["type_a_ajouter"];
?>

Voilà, si tout se passe bien, tu devrais avoir une alertbox javascript qui te donne le type que tu as entré dans ton champ "dem_type".
Tu as fait ton appel AJAX.

La suite consiste à traiter le type côté PHP (l'ajouter à la table, lire toute la table et la renvoyer) et à ajouter une option dans le select de ta page.

Invité · 26/01/2015, 19h24

Pour commencer, merci beaucoup pour toutes ces explications, les briques commencent à se remettre en ordre

Pour l'ID, même si ça n'aurait pas résolu le problème, je l'avais mis sur le bouton dans le <form>.

J'ai mis le code en place, par contre, je dois avoir un truc qui ne fonctionne pas ... J'ai testé sans le form/submit et rien ne se passe.
Avec le form et le bouton, j'appuie et rien ne se passe ...

Du coup, le texte saisie doit se valider comment ? onchange ? onclick ?

Merci !

**ryan** · 26/01/2015, 19h44

Yop!

As-tu créé la page ""update_type_table.php" avec le code PHP?

Code php :

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

1
2
3
4
 
<?
echo $_POST["type_a_ajouter"];
?>

Invité · 26/01/2015, 20h04

Aahhh le c...

J'avais pas compris, je croyais qu'on mettait l'alerte sur la page pour tester, j'avais mis le fichier mais je pensais que c'était pour la suite...

Du coup, ça fonctionne, j'ai bien l'alerte !

Si j'ai bien compris, maintenant, sur cette page PHP, j'ajoute la requête SQL pour ajouter cette variable dans la table ?

PS: Habituellement (et c'est obligatoire), en php, je contrôle la variable avec un isset/!empty et divers contrôle ... Dans notre cas, je peux les mettre et avoir en retour un message comme en PHP ?

**ryan** · 26/01/2015, 20h32

Yop!

Tu fais les vérifications d'usage, tu ajoutes le type dans la table, tu la lis dans l'ordre alphabétique croissant (le plus souvent) puis tu renvoies le tout avec un ou plusieurs "echo", et la fonction anonyme que que tu as définie sur l'événement "onreadystatechange" va traiter ce retour.

Le plus souvent, on renvoie en XML ou en JSON.

Pour le XML, tu vas avoir une boucle sur le recordset qui va créer une balise, du genre (si on admet que tu as un tableau associatif $row):

Code php :

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

1
2
 
echo "<letype>" . $row["type"] . "</letype>";

Je prévois toujours un cas où les choses ne se passent pas bien, et je m'arrange alors pour retourner une seule balise XML avec un mot-clé que je vais tester dans la fonction anonyme:

Code php :

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

1
2
 
echo "<letype>None</letype>";

Pour lire le XML dans la fonction anonyme, tu auras un code dans ce style

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
 
if(xhr.readyState == 4 && xhr.status == 200)
{
	reponse = xhr.responseXML.documentElement;
 
	if (reponse.getElementsByTagName("letype")[0].firstChild.nodeValue != "None")
	{		
		opnum = reponse.getElementsByTagName("letype").length;
 
		for (i=0;i<=opnum-1;i++)
		{
			letype = reponse.getElementsByTagName("letype")[i].firstChild.nodeValue;
		}	
	}
}

Voilà, il suffit maintenant de nettoyer ton select de tout son contenu avant de générer de nouvelles options dans la boucle for.

Invité · 26/01/2015, 21h12

mon update type

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
<?php
if (isset($dem_type) && !empty($dem_type)) {
require_once('../../models/connexion_bdd.php');
// Insertion du  type
                    $insert = $bdd->prepare('INSERT INTO TYPES (id_type, type) VALUES (?, ?)');
                    $insert->execute(array("''", "$dem_type"));
                    $insert->closeCursor();
   }                 
// Selection des types
$query_type = $bdd->query("SELECT type FROM TYPES GROUP BY 1 ORDER BY id_type");
while ($liste_types = $query_type->fetch())
{
        $liste_types_[] = $liste_types['type'];
}
$query_type->closeCursor();
?>

Dans le post, le "letype" c'est les options de $liste_types['type'] ?

Merci

**ryan** · 26/01/2015, 21h44

Envoyé par orygynz

Dans le post, le "letype" c'est les options de $liste_types['type'] ?

'Xactement.

Invité · 26/01/2015, 22h18

Alors actuellement mon select ressemble à ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<select style="text-align:center;" name="type">
                             <option value="-1">Sélectionnez le type</option>          
											<?php
                                            foreach ($liste_type_ AS $value) {
                                                echo "\t" . '<option value="' . $value . '"';
                                                if ($value == $_GET['champ_type']) {
                                                    echo ' selected="selected"';
                                                }
                                                echo '>' . $value . '</option>' . "\n";
                                            }
                                            ?>

Si je reprends ton bout de code et que je l'adapte avec ma dénomination, ça donne ç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
if(xhr.readyState == 4 && xhr.status == 200)
{
	reponse = xhr.responseXML.documentElement;
 
	if (reponse.getElementsByTagName("liste_type")[0].firstChild.nodeValue != "None")
	{		
		opnum = reponse.getElementsByTagName("liste_type").length;
 
		for (i=0;i<=opnum-1;i++)
		{
			liste_type = reponse.getElementsByTagName("liste_type")[i].firstChild.nodeValue;
		}	
	}
}

Par contre, mon select pour afficher la liste déroulante doit être en js maintenant ?

Et sinon, ma requête n'est pas bonne car elle n'intègre pas le "none" ?

**ryan** · 26/01/2015, 23h20

Yop!

Ton select d'origine ne doit pas changer. Il faut toujours le peupler avec les types qui sont dans la table au moment où la page est chargée.

Ensuite, le code PHP appelé en AJAX sort bien une série de balises <letype> qui ont chacune une valeur de type puisée dans ta table après l'INSERT du nouveau type.

Ces balises sont récupérées dans la fonction anonyme qui est incluse dans ta fonction getCoord.

Maintenant, il faut effacer toutes les options qui sont dans le select, et, à partir des balises <letype>, il faut repeupler ton select avec les nouvelles valeurs.

Disons que tu ajoutes une propriété ID à ton select dont le nom est "type":

Code :

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

1
2
 
<select style="text-align:center;" name="type" id="select_type">

Dans la fonction anonyme, on va retrouver le select grâce a son id, on va le vider sauf la première option (<option value="-1">Sélectionnez le type</option>), puis on va lui ajouter autant de nouvelles options qu'il y a de balises <letype> en les empilant à partir de l'offset 1 puisque l'offset zéro, c'est la seule option qu'on n'a pas effacée.

Ce qui devrait donner un code 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
 
if(xhr.readyState == 4 && xhr.status == 200)
{
	reponse = xhr.responseXML.documentElement;
 
	if (reponse.getElementsByTagName("letype")[0].firstChild.nodeValue != "None")
	{	
 
		select_type = document.getElementById("select_type");
		opnum = select_type.length;
		for (i=opnum-1;i>=1;i--)
		{
			select_type.options[i] = null;
		}
 
		opnum = reponse.getElementsByTagName("letype").length;
		offset = 1;
		for (i=0;i<=opnum-1;i++)
		{
			letype = reponse.getElementsByTagName("letype")[i].firstChild.nodeValue;
			select_type.options[offset] = new Option(letype,letype);
			offset = offset + 1;
		}	
	}
}

Pas testé, s'peut qu'il y ait un bug ou l'autre, mais c'est l'esprit...

La balise avec la valeur "None": je suis un pessimiste, je prévois toujours que les choses puissent mal tourner, donc je vais systématiquement un test sur le nombre d'enregistrements qui sont retournés par un SELECT.
Dans le cas du la page "update_type_table.php", si zéro enregistrement retourné, alors je ferais un echo "<letype>None</letype>"; ce qui éviterait au moins d'effacer toutes les options du select et de ne rien avoir pour les remplacer.

Invité · 27/01/2015, 10h05

Merci pour ces réponses.

Alors le fichier update_type_table

Code php :

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
<?php
 
echo $_POST["type_a_ajouter"];
 
if (isset($_POST["type_a_ajouter"]) && !empty($_POST["type_a_ajouter"])) {
    $dem_type = $_POST["type_a_ajouter"];
try {
                        $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
                        $bdd = new PDO('mysql:host=127.0.0.1;dbname=xxx', 'xxx', 'xxx', $pdo_options);
                    }
                    catch (Exception $e) {
                        die('Erreur : ' . $e->getMessage());
                    }
// Insertion du  type
                    $insert = $bdd->prepare('INSERT INTO TYPES (id_type, type) VALUES (?, ?)');
                    $insert->execute(array("''", "$dem_type"));
                    $insert->closeCursor();
 
// Selection des types
$query_type = $bdd->query("SELECT type FROM TYPES GROUP BY 1 ORDER BY id_type");
while ($liste_types = $query_type->fetch())
{
	$liste_types_[] = $liste_types['type'];
}
$query_type->closeCursor();
}
?>

Du coup, quand je valide, j'ai toujours le message d'alerte qui m'affiche ce que j'ai renseigné (logique), il faut supprimer cette partie ?

Code :

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

1
2
reponse = xhr.responseText;
			alert(reponse);

C'est à cette endroit que je dois ajouter un code qui fermer le popup ? A la place de l'alerte ?

Pour l'instant, je dois fermer le message d'alerte + le popup. Sans recharger la page, la liste n'est pas actualisé. Par contre, les données sont bien insérées dans la table

Merci !

**ryan** · 27/01/2015, 10h18

Yop!

Tu dois créer les balises <letype> dans ta page d'update et les renvoyer vers le script AJAX en faisant des echo:

Code php :

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

1
2
3
4
5
 
while ($liste_types = $query_type->fetch())
{
	echo "<letype>" .  $liste_types['type'] . "</letype>";
}

Ensuite, dans la fonction getCoord, tu dois remplacer le bloc de code

Code :

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

1
2
3
4
5
 
if(xhr.readyState == 4 && xhr.status == 200)
{
...ancien code...
}

par celui qui est dans mon dernier message.

Invité · 27/01/2015, 11h44

La fonction Getcoord ? Tu veux dire valider_type ?

Je remets mes dernières versions de script pour être sûr de bien avoir appliquer ce que tu me demandais.

update_type_table :

Code php :

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
<?php
echo $_POST["type_a_ajouter"];
if (isset($_POST["type_a_ajouter"]) && !empty($_POST["type_a_ajouter"])) {
    $dem_type = $_POST["type_a_ajouter"];
try {
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=127.0.0.1;dbname=xxx', 'xxx', 'xxx', $pdo_options);
}
catch (Exception $e) {
    die('Erreur : ' . $e->getMessage());
}
// Insertion du  type
$insert = $bdd->prepare('INSERT INTO TYPES (id_type, type) VALUES (?, ?)');
$insert->execute(array("''", "$dem_type"));
$insert->closeCursor();
// Selection des types
$query_type = $bdd->query("SELECT type FROM TYPES GROUP BY 1 ORDER BY id_type");
while ($liste_types = $query_type->fetch()){
	echo "<letype>" .  $liste_types['type'] . "</letype>";
}
$query_type->closeCursor();
}
?>

l'Ajax dans le <head> de ma page :

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
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 { 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		xhr = false; 
	} 
	return xhr;
}
function valider_type(){
	var montype =  document.getElementById("dem_type").value;  
	var xhr = getXhr();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
	reponse = xhr.responseXML.documentElement;
	if (reponse.getElementsByTagName("letype")[0].firstChild.nodeValue != "None"){
		select_type = document.getElementById("select_type");
		opnum = select_type.length;
		for (i=opnum-1;i>=1;i--){
			select_type.options[i] = null;
		}
		opnum = reponse.getElementsByTagName("letype").length;
		offset = 1;
		for (i=0;i<=opnum-1;i++){
			letype = reponse.getElementsByTagName("letype")[i].firstChild.nodeValue;
			select_type.options[offset] = new Option(letype,letype);
			offset = offset + 1;
		}	
	}
}
	}
	xhr.open("POST","update_type_table.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("type_a_ajouter="+montype);	
}

Ma form :

Code html :

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

1
2
<form method="post" id="form"><input type="text" size="35" style="text-align:center;" name="dem_type" id="dem_type">
    <input type="button" onclick="valider_type();" class="valider_img" name="go" title="Modifier" value=""/></form>

Mon select (pour information, de base la liste est récupérée avec "$query_type = $bdd->query("SELECT type FROM TYPES ORDER BY type");" :

Code php :

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

1
2
3
4
5
6
7
<select style="text-align:center;" name="recup_type" id="select_type">
    <option value="-1">- - - Sélectionnez le type - - -</value>
<?php
while ($liste_type = $query_type->fetch()) {
    echo '<option value="' . htmlspecialchars($liste_type['type']) . '">' . htmlspecialchars($liste_type['type']) . '</option>';
}
echo '</select>';

En l'état, le popup se lance, je renseigne le type, je valide et rien ne se passe. Si je fermer le popup et recharge entièrement la page, la donné est bien insérée dans la table.

Ce que je ne comprends pas dans la partie Ajax, je demande de récupérer le select_type avant la partie "xhr.open("POST","update_type_table.php",true);". C'est normal ?

**ryan** · 27/01/2015, 12h32

Yop!

La fonction valider_type, tout-à-fait, je me suis mélangé les pinceaux.

Ce que je ne comprends pas dans la partie Ajax, je demande de récupérer le select_type avant la partie "xhr.open("POST","update_type_table.php",true);". C'est normal ?

Oui, car la fonction anonyme sur l'événement onreadystatechange définit ce qu'il faudra faire quand l'événement se produira.
Ensuite le code fait la requête et attend la réponse, et cette réponse sera gérée par le code de la fonction anonyme de l'événement onreadystatechange.

Pour déboguer le code de la fonction en question, le mieux est d'insérer des alert() ou des console.log() à des endroits stratégiques.

Code javascript :

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
 
 
function valider_type()
{
	var montype =  document.getElementById("dem_type").value;  
	var xhr = getXhr();
	xhr.onreadystatechange = function()
	{
		alert('dans la fonction anonyme');
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			alert('status ok');
			reponse = xhr.responseXML.documentElement;
			if (reponse.getElementsByTagName("letype")[0].firstChild.nodeValue != "None")
			{
				alert('types ok');
				select_type = document.getElementById("select_type");
				opnum = select_type.length;
				for (i=opnum-1;i>=1;i--)
				{
					select_type.options[i] = null;
				}
 
				opnum = reponse.getElementsByTagName("letype").length;
				offset = 1;
				for (i=0;i<=opnum-1;i++)
				{
					letype = reponse.getElementsByTagName("letype")[i].firstChild.nodeValue;
					alert(letype);
					select_type.options[offset] = new Option(letype,letype);
					offset = offset + 1;
				}	
			}
		}
	}
	xhr.open("POST","update_type_table.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("type_a_ajouter="+montype);	
}

Pour déboguer la page PHP, le mieux est de l'appeler en direct avec un formulaire:

Code html :

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

1
2
3
4
5
6
7
8
9
 
<html>
<body>
<form action='update_type_table' method=post>
<input type=text name='type_a_ajouter'>
<input type=submit>
</form>
</body>
</html>

Invité · 27/01/2015, 13h41

Alors, le form php, quand je clique sur submit, la page s'ouvre et la liste des types apparaît bien avec la nouvelle entrée

Pour la partie Ajax, j'ai 6 fois de suite le message 'dans la fonction anonyme' puis 1 fois 'status ok'.

En espérant que ça aide ! Par contre, nous sommes d'accord, dans tous les cas, le popup ne se fermera pas tout seul dans le code actuelle, je dois ajouter un évènement ?

**ryan** · 27/01/2015, 14h02

Yop,

Ch'uis bête, j'ai oublié le header et la déclaratiion du XML, ça ne peut pas fonctionner...

Donc, la page update_type_table.php, il faut:
- ajouter 3 lignes au début
- enlever ou commenter la ligne echo $_POST["type_a_ajouter"];
- ajouter une ligne à la fin

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
 
<?php
header('Content-Type: text/xml; charset=iso-8859-1'); 
echo "<?xml version='1.0'?>";
echo "<reponse>";
 
//echo $_POST["type_a_ajouter"];
if (isset($_POST["type_a_ajouter"]) && !empty($_POST["type_a_ajouter"])) {
    $dem_type = $_POST["type_a_ajouter"];
try {
    $pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
    $bdd = new PDO('mysql:host=127.0.0.1;dbname=xxx', 'xxx', 'xxx', $pdo_options);
}
catch (Exception $e) {
    die('Erreur : ' . $e->getMessage());
}
// Insertion du  type
$insert = $bdd->prepare('INSERT INTO TYPES (id_type, type) VALUES (?, ?)');
$insert->execute(array("''", "$dem_type"));
$insert->closeCursor();
// Selection des types
$query_type = $bdd->query("SELECT type FROM TYPES GROUP BY 1 ORDER BY id_type");
while ($liste_types = $query_type->fetch()){
        echo "<letype>" .  $liste_types['type'] . "</letype>";
}
$query_type->closeCursor();
}
 
echo "</reponse>";
?>

Invité · 27/01/2015, 14h17

Ah !
J'ai les mêmes alertes, ensuite j'ai types ok puis une alerte par option du select ...
Je ferme le popup et sans recharger, j'ai bien le dernier type ajouté !

Maintenant, je dois trouver comment intégrer un message style "Bien ajouté" et fermeture de popup

Merci !

Pour le charset sur l'header en iso, le reste du site est en utf mais ça n'a aucune importance je présume ?