[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