[AJAX] Case à cocher-->mise à jour select

Version imprimable

Selon la case qui est cochée, la zone de liste est remplie différemment.
Je me suis inspiré de ce que j'ai trouvé, mais pour l'instant, ça ne fonctionne pas.

Dans le script :

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
 
	var xhr = null; 
 
	function getXhr()
		{
		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; 
			} 
		}
 
			// Node cleaner
		function go(c)
			{
			if(!c.data.replace(/\s/g,''))
				c.parentNode.removeChild(c);
			}
 
		function clean(d)
			{
			var bal=d.getElementsByTagName('*');
 
			for(i=0;i<bal.length;i++)
				{
				a=bal[i].previousSibling;
				if(a && a.nodeType==3)
					go(a);
				b=bal[i].nextSibling;
				if(b && b.nodeType==3)
					go(b);
				}
			return d;
			}
			/**
			* Méthode qui sera appelée lors de la sélection d'une case à cocher
			*/
		function gophp(){
			getXhr();
			// On définit 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)
					{
					reponse = clean(xhr.responseXML.documentElement);
					// On se sert de innerHTML pour rajouter les options a la liste
					document.getElementById('idjs_select_categorie_ou_offre').innerHTML = reponse;
					}
				}
			xhr.open("GET",'<dtml-var expr="Script.Python.pRequete_impression_offre">',true);
			xhr.send(null);
			}

Le <dtml-var expr="Script.Python.pRequete_impression_offre"> est du code Zope/python qui renvoie :

Code:

1
2
3
4
5
6
7
 
<SELECT name="categorie_ou_offre" id="idjs_categorie_ou_offre" size="5" multiple class="moyen" onFocus="idjs_input_tout_categorie.checked=false;">
<option value="35">Titi</option>
<option value="36">Toto</option>
<option value="37">Tata</option>
<option value="38">Tutu</option>
</select>

Dans le body :

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
 
				<FORM Name="choix_impression" ACTION="Page/Index1/Impression_Ouvrir_Page" onsubmit="return Verifier_champ_Impression();" METHOD="GET" ENCTYPE="multipart/form-data">
					<table border="0" width="60%">
						<tr valign="middle">
							<td colspan="2">
								<input type="checkbox" name="liste" id="idjs_liste" onFocus="test('liste');" onclick="gophp();"><label for="idjs_liste">Liste des offres</label>
							</td>
						</tr>
						<tr valign="middle">
							<td colspan="2">
								<input type="checkbox" name="enveloppe" id="idjs_env" onFocus="test('env');"><label for="idjs_env">Enveloppes</label>
							</td>
						</tr>
						<tr valign="middle">
							<td colspan="2">
							&nbsp;
							</td>
						</tr>
						<tr align="center" valign="middle">
							<td>
								<div style="visibility:hidden;display:inline;" id="idjs_select_categorie_ou_offre">
									<label for="idjs_categorie_ou_offre" id="idjs_label_categorie_ou_offre"></label>
									<br><br>
									<SELECT name="categorie_ou_offre" id="idjs_categorie_ou_offre" size="5" multiple class="moyen" onFocus="idjs_input_tout_categorie.checked=false;">
									</SELECT>
								</div>
							</td>
							<td>
								<div id="idjs_tout_categorie" style="visibility:hidden;">
									<input type="checkbox" name="tout_categorie" id="idjs_input_tout_categorie" onFocus="idjs_categorie_ou_offre.selectedIndex=-1;"><label for="idjs_input_tout_categorie">Toutes les cat&eacute;gories</label>
								</div>
							</td>
						</tr>
					</table>
					<p align="center">
					<BUTTON TYPE="submit" class="bouton_ok2">Imprimer</BUTTON>&nbsp;&nbsp;&nbsp;<BUTTON TYPE="reset" class="bouton_reset">Effacer</BUTTON>
				</FORM>

10/06/2006, 22h06
senacle

Personne n'a d'idée ?

Salut, vala ce que je fais en php :D

la fonction ajax :

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
function sendData(data, page, method){
    if(document.all){
        //Internet Explorer
        var XhrObj = new ActiveXObject("Microsoft.XMLHTTP") ;
    }//fin if
    else{
        //Mozilla
        var XhrObj = new XMLHttpRequest();
    }//fin else
 
    //définition de l'endroit d'affichage:
    var content = document.getElementById("requestserver");
 
    //si on envoie par la méthode GET:
    if(method == "GET"){
        if(data == 'null'){
            //Ouverture du fichier sélectionné:
            XhrObj.open("GET", page);
        }//fin if
        else{
            //Ouverture du fichier en methode GET
            XhrObj.open("GET", page+"?"+data);
        }//fin else
    }//fin if
    else if(method == "POST"){
        //Ouverture du fichier en methode POST
        XhrObj.open("POST", page);
    }//fin elseif
 
    //Ok pour la page cible
    XhrObj.onreadystatechange = function(){
        if (XhrObj.readyState == 4)
			eval(XhrObj.responseText);
    }    
 
    if(method == "GET"){
        XhrObj.send(null);
    }//fin if
    else if(method == "POST"){
        XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        XhrObj.send(data);
    }//fin elseif
}//fin fonction SendData

Appel de la fonction oncheckbox :

Code:

1
2
3
4
function Generate_Option(){
		var selected = document.choix_impression.MOTIF.value;
		sendData('select='+selected, 'monfichieraexecute', 'POST');
}

le fichier qui s'execute (en php mais à adapter):

Code:

1
2
3
4
5
echo "var o = null;";
echo "var s = document.forms['choix_impression'].elements['categorie_ou_offre'];";
echo "s.options.length = 0;";
echo "s.options[s.options.length] = new Option('Choisir','');";
echo "s.options[s.options.length] = new Option('NOM','ID',false,false);";

J'espère que çà te donnera une piste pour y arriver ;)

1/Peux-tu me donner un exemple de fichier html ?

2/
Code:

1 2 var content = document.getElementById("requestserver");
requestserver est-il un div ?

3/
Code:

1 2 var selected = document.choix_impression.MOTIF.value;
Que représente MOTIF ?

4/

Code:

var o = null;

A quoi ça sert ?

5/J'ai toujours le message d'erreur javascript Erreur : missing ) after argument list.

C'est monfichieraexecute dans

Code:

sendData('select='+selected, 'monfichieraexecute', 'POST');

qui pose problème.
Pourtant, voici ce que retourne ce fichier :
Code:

1 2 3 4 5 6 7 var o = null; var s = document.forms['choix_impression'].elements['categorie_ou_offre']; s.options.length = 0; s.options[s.options.length] = new Option('Choisir',''); s.options[s.options.length] = new Option('titi','39',false,false); s.options[s.options.length] = new Option('tata','43',false,false); s.options[s.options.length] = new Option('toto','2',false,false);
Je ne vois pas où il y a une ) manquante !

13/06/2006, 14h22
No0ZBeeX

2/ c'est un script XHR.js que j'ai récupéré, il utilise la variable content afin de modifier le contenu d'un div "requestserver". Ici, je ne prête pas attention à cette possibilité...

3/ le "MOTIF" est la valeur de la variable que je fais passer. Pour toi, çà devrait être la valeur du checkbox :

Code:

var selected = (document.choix_impression.liste.checked==true)? condition1 : condition2;

4/ hum bonne question en fait :P

5/ pour l'erreur, je ne comprends pas trop, j'ai exactement cela sur ma page, et je n'ai aucune erreur ...

Bon, ça y est, ça fonctionne.

Pour le javascript :

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
 
var xhr = null; 
 
function getXhr(){
	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; 
	} 
}
 
/**
* Méthode qui sera appelée sur le choix de la case à cocher
*/
function gophp(choix){
	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){
			leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('idjs_div_categorie_ou_offre').innerHTML = leselect;
		}
	}
	// Ici on va voir comment faire du post
	xhr.open("POST","Script/Python/pRequete_impression_offre",true);
	// ne pas oublier ça pour le post
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	// ne pas oublier de poster les arguments
	xhr.send("choix="+choix);
}

Le body :

Code:

1
2
3
4
5
6
7
8
9
 
<FORM Name="choix_impression">
	<input type="radio" name="liste_env" id="idjs_liste" value="liste" onFocus="gophp('Categorie');">&nbsp;&nbsp;<label for="idjs_liste">Liste</label>
	<input type="radio" name="liste_env" id="idjs_env" value="env" onFocus="gophp('Offre');">&nbsp;&nbsp;<label for="idjs_env">Enveloppes</label>
	<div id="idjs_div_categorie_ou_offre" style="display:inline">
		<SELECT name="categorie_ou_offre" id="idjs_categorie_ou_offre" size="5" multiple class="moyen">
		</SELECT>
	</div>
</form>

Pour le script pRequete_impression_offre (python en l'occurence, mais vous trouverez pour php et autre) :

Code:

1
2
3
4
5
6
 
resultat ='<SELECT name="categorie_ou_offre" id="idjs_categorie_ou_offre" size="5" multiple class="moyen">'
for Enregistrement in container.Requete.Select.Votre_Requete(param=choix):
	resultat = resultat + "<option value='"  + str(Enregistrement['ID']) + "'>" + Enregistrement['Nom'] + "</option>"
resultat = resultat + "</select>"
return resultat