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

**senacle** · 09/06/2006, 09h55

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 :

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
 
	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 :

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

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 :

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

**senacle** · 10/06/2006, 22h06

Personne n'a d'idée ?

**No0ZBeeX** · 12/06/2006, 12h36

Salut, vala ce que je fais en php

la fonction ajax :

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
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 :

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

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 :

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

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

**senacle** · 13/06/2006, 09h57

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

2/

Code :

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

1
2
 
var content = document.getElementById("requestserver");

requestserver est-il un div ?

3/

Code :

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

1
2
 
var selected = document.choix_impression.MOTIF.value;

Que représente MOTIF ?

4/

Code :

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

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 :

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

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

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

Code :

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

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 !

**No0ZBeeX** · 13/06/2006, 14h22

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 :

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

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

4/ hum bonne question en fait

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

**senacle** · 15/06/2006, 16h11

Bon, ça y est, ça fonctionne.

Pour le javascript :

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
 
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 :

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

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 :

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

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

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

JavaScript

Discussions similaires

Partager

Partager