Discussion :

[@po©alypse]

Plop,

J'aimerai l'aide des développeurs du web qui sont dans le coin!!!!

J'ai ma page index.php qui contient l'appel aux différents script et qui affiche le template du site.

Les appels au scripts:

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
 
    <script type="text/javascript" src="/javascript/table.js"></script>
    <script type="text/javascript" src="/javascript/jquery.js"></script>
    <script type="text/javascript" src="/javascript/filtre_membre.js"></script>
    <script type="text/javascript" src="/javascript/jquery.mSelect.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#select_club').mSelect({
				eventClick:function(value,html) {
					alert(value);
					alert(this); 
					tableau_membres();
				}
				});
 
 
			$('#select_level').mSelect({
				eventClick:function(value,html) {
					alert(value);
					alert(this); 
					tableau_membres();
				}
			});
		});	
	</script>

Un morceau de mon menu:

Code :

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

1
2
3
4
 
	<li>
	   <a href="?p=membres">Membres</a>
	</li>

Pour ceux qui ont compris le principe j'ai une feuille "fonction.php" qui récupère la variable "p" et qui retourne l'affichage en conséquence.

Dans mon cas lorsque "p" vaut "membres" la page fonction.php fait appel à une fonction qui affiche 3 filtres (2 select et 1 champ texte) puis le tableau des membres:

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
 
	$options_club = "<option value=\"-1\">Filtrer par Club</option>";
 
	for($i=0; $i<count($select_c);$i++)	{
		$options_club .= "<option value=\"".$select_c[$i]->id_club."\">".$select_c[$i]->libelle."</option>";		
	}
 
	$select_level = "SELECT * FROM `level`";
	$select_l = select_gen($select_level, $connexion);
 
	$options_level = "<option value=\"-1\">Filtrer par Level</option>";
 
	for($i=0; $i<count($select_l);$i++)	{
		$options_level .= "<option value=\"".$select_l[$i]->id_level."\">".$select_l[$i]->level."</option>";		
	}
 
	$chaine = "
	<div class=\"filtre_membres\">				
		<form id=\"form_search_membre\" name=\"form_search_membre\" action=\"javascript:tableau_membres();\" method=\"post\" enctype=\"multipart/form-data\">
			<select class=\"styled\" id=\"select_club\" onchange=\"tableau_membres();\">
				".$options_club."
			</select>
 
			<select name=\"level\" id=\"select_level\" onchange=\"tableau_membres();\">
				".$options_level."
			</select>
 
			<input type=\"text\" name=\"recherche_membre\" id=\"recherche_membre\" size=\"10\"/>
		</form>
 
	</div>
 
	<div id=\"liste_membre\">
	<table class=\"listing\">
.
.
.

Le div "liste_membre" est utilisé pour reconstruire le tableau lorsque l'utilisateur modifie les filtres.

Mon problème apparaît dans la feuille "filtre_membre.js" qui est utilisé pour reconstruire le tableau des membres en récupérant les valeurs des filtres:

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
function getXhrFiltre(){
	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 { // XMLHttpRequest non supporté par le navigateur 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
	return xhr
}
 
 
/**Retourne la valeur du select selectId*/
function getSelectValue(selectId)
{
	var selectElmt = document.getElementById(selectId);
	return selectElmt.options[selectElmt.selectedIndex].value;
}
 
/**
	Fonction qui récupère les valeurs des filtres (select et text)
	et utilise la page tableau_membre.php pour reconstruire la liste des membres
**/			
function tableau_membres(){
	var xhr = getXhrFiltre();
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			leselect = xhr.responseText;
			document.getElementById('liste_membre').innerHTML = leselect;
			Table.auto();
		}
	}
	xhr.open("POST","tableau_membre.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
	// On récupére l'id du club
	id_club = getSelectValue('select_club');
 
	// On récupére l'id du level
	id_level = getSelectValue('select_level');
 
	// On récupère le filtre entré par l'utilisateur
	like = document.getElementById('recherche_membre').value;
	xhr.send("id_club="+id_club+"&id_level="+id_level+"&contient="+like);
 
 
}

Firebug me donne ce message d'erreur lorsque je modifie un de mes filtres:

selectElmt.selectedIndex is undefined

Le problème "doit" venir d'une "interférence" entre mon fichier "filtre_membre.js" et l'utilisation du plugin mselect car lorsque je n'utilise plus mselect je n'ai plus d'erreur...

Quelqu'un pourrait m'éclairer ?

Merci d'avance.

[SpaceFrog]

regarde du coté de Jquery noConflict()
http://api.jquery.com/jQuery.noConflict/

ou alors de namespaces poru les autres scripts :
http://www.google.fr/url?sa=t&source...E_KXIA&cad=rja

[@po©alypse]

Merci pour cette réponse mais en modifiant ma façon de faire cela fonctionne "presque":

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
 
<script type="text/javascript" src="/javascript/jquery.mSelect.min.js"><script type="text/javascript">
		$(document).ready(function() {
			$('#select_club').mSelect({
				eventClick:function(value,html) {
					var id_club = $("#select_level option:selected").val();
					alert(id_club); 
					$.ajax({
						type: "POST",
						dataType: "html",
						url: "tableau_membre.php",
						data: "id_club="+value+"&id_level=-1",
						success: function(msg){
							$('#liste_membre').html(msg);	
							Table.auto();
						},
						statusCode: {
							404: function() {
								alert('page not found');
							}
						}
					});
				}
			});
 
			$('#select_level').mSelect({
				eventClick:function(value,html) {
					var id_club = $("#select_club option:selected").val();
					alert(id_club); 
					$.ajax({
						type: "POST",
						dataType: "html",
						url: "tableau_membre.php",
						data: "id_level="+value+"&id_club=-1",
						success: function(msg){
							$('#liste_membre').html(msg);	
							Table.auto();
						},
						statusCode: {
							404: function() {
								alert('page not found');
							}
						}
					});
				}
			});
		});	
	</script>

Sauf que je n'arrive pas à récupérer la valeur du second sélect quand l'utilisateur choisi modifie la valeur d'un des select...
La boite de dialogue m'affiche undefined.

Quelqu'un aurait il une explication?

[@po©alypse]

Je pensais avoir compris comment fonctionne le plugin mselect mais en fait non...

Code :

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

$('#select_level input[checked="checked"]').val()

Avec ça je récupère toujours -1 (qui est la valeur par défaut sélectionné)....

[SpaceFrog]

je ne comprends pas ton sélecteur ?

#select_level
un id étant unique sur une page a quoi sert le input ?

[Bovino]

je ne comprends pas ton sélecteur ?

#select_level
un id étant unique sur une page a quoi sert le input ?

Bien vu Spaffy !
#select_level, c'est un select
Alors trouver un input checked dans un select...

[@po©alypse]

je ne comprends pas ton sélecteur ?

#select_level
un id étant unique sur une page a quoi sert le input ?

Je ne sais pas je découvre un peu le jquery donc je suis pas contre une explication ou une correction de mon bout de cote (qui ne fonctionne pas entièrement)