Interférence avec Mselect ? [Résolu]

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

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 :

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 :

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 :

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 :

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 :

$('#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]

Envoyé par SpaceFrog

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

[SpaceFrog]

mouarf
aller à moitié vu ...

[@po©alypse]

Envoyé par Bovino

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

Parce que si j'ai bien compris le plugin mselect remplace la liste d’origine par une batterie de div...

http://www.le-pret-a-surfer.com/mSelect/

Il donne un exemple:

Avant

Code :

1
2
3
4
5
 
<select name="exemple" id="selectDemo4">
 <option value="1" selected="selected">Teste 1</option>
 <option>Teste 2</option>
</select>

Après

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<div class="mSelect" id="selectDemo4">
 <div class="mFleche"></div>
 <div class="mSelected">Teste 1</div>
 <div class="mOption">
  <input checked="checked" value="1" class="mRadio" name="exemple" type="radio">
  Teste 1
 </div>
 <div class="mOption">
  <input value="Teste 2" class="mRadio" name="exemple" type="radio">
  Teste 2
 </div>
</div>

[@po©alypse]

Envoyé par SpaceFrog

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)

[danielhagnoul]

Bonjour

Après avoir regardé la documentation du plugin, ...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * Je suggère de tester ce code
 */
$('#select_club').mSelect({
	eventClick:function(value,html){
 
		/*
		 * qui devrait normalement retrouver la valeur de
		 * tous les inputs qui remplissent la condition.
		 */ 
 
		$(this).find("input[checked='checked']").each(function(i, item){
			console.log($(item).val());
		});
	}
});

[@po©alypse]

Envoyé par danielhagnoul

Bonjour

Après avoir regardé la documentation du plugin, ...

Code :

Un grand merci mais deux autres questions:
1- Où as tu lu ça ?
2- Est ce normal qu'une grande partie des plugin JQuery que je regarde soient codés sur 2-3 lignes ?

[SpaceFrog]

1) Dans la doc du plugin sur le site d'origine ?
2) Parcequ'il sont en général minified ("compressés")

[danielhagnoul]

Dans http://www.le-pret-a-surfer.com/web/...ersonnalisees/, caractéristiques du plugin liste toutes les informations nécessaires.

L'utilité d'un plugin n'est jamais proportionnelle au nombre de lignes qu'il contient, mais au service rendu.

Et un plugin de quelques lignes paraît toujours simpliste et inutile tant qu'on n'en a pas l'usage.

[@po©alypse]

Et une troisième: Qu'est sensé faire console.log ?
Je pensais en le testant que ça me ferait une boite dialogue comme alert mais en fait non...

Je vais faire quelque recherche sur console.log en attendant des réponses

[danielhagnoul]

Dans un navigateur récent, la touche F12 ouvre les outils de développement qui contient, en autre chose très utile, la console. Après l'avoir ouvert, il faut souvent rafraîchir la page pour que les informations s'affichent dans la console.

[@po©alypse]

Envoyé par danielhagnoul

Dans http://www.le-pret-a-surfer.com/web/...ersonnalisees/, caractéristiques du plugin liste toutes les informations nécessaires.

L'utilité d'un plugin n'est jamais proportionnelle au nombre de lignes qu'il contient, mais au service rendu.

Et un plugin de quelques lignes paraît toujours simpliste et inutile tant qu'on n'en a pas l'usage.

Non mais ce que je voulais dire c'est que rien n'est indenté.
Genre les 2 lignes de code contiennent 1000 caractères...

En fait après relecture de ton code il me semble que j'avais essayé ce code mais comme ceci:

Code :

1
2
3
 
var id_level = $('#select_level').val();
alert(id_level);

C'est bien la même chose non ?
Si oui cela ne fonctionne toujours pas car la boite de dialogue est vide

[@po©alypse]

Envoyé par SpaceFrog

1) Dans la doc du plugin sur le site d'origine ?
2) Parcequ'il sont en général minified ("compressés")

Et il y a un moyen de les décompresser histoire d'en apprendre un peu plus sur ce qui est fait dedans ?

Encore merci pour votre aide

[SpaceFrog]

il existe des unpackers ...

[@po©alypse]

Envoyé par danielhagnoul

Dans un navigateur récent, la touche F12 ouvre les outils de développement qui contient, en autre chose très utile, la console. Après l'avoir ouvert, il faut souvent rafraîchir la page pour que les informations s'affichent dans la console.

Effectivement il ouvre firebug merci .
Mais comme je ne trouvais pas ce qu'il fallait dans la console j'ai modifié le console.log par alert et aucune boite de dialogue de n'affiche...

[@po©alypse]

C'est si compliqué le JQuery ? Je galère à récupérer la valeur d'un select ....