Discussion :

[Invité]

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]

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é]

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]

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é]

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]

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"];
?>