Discussion :

[mathieu.dubiez]

Bonjour,

je suis en train de transférer mes application d'un ancien serveur vers un nouveau et lors du test je me rends compte que mes onchange ne fonctionnent plus.

Voici un exemple

Code html :

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

<select name="tri" id="tri" onchange="window.location.href='<?php echo $this->baseUrl();?>/Fichier/listeclients/tri/'+this.value+'/filtre/'+$('select#filtre').attr('value')+'/filtre2/'+$('select#filtre2').attr('value')+'/page/<?php echo $page->getCurrentPageNumber();?>'">

J'ai modifié mon select pour afficher une simple alerte et ça marche

Code html :

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

<select name="tri" id="tri" onchange="alert('ok')">

Quelqu'un aurait-il une idée du pourquoi ça fonctionnait avant et plus maintenant ?

[Bovino]

Heu... tu veux que JavaScript interprète du code PHP ?

[mathieu.dubiez]

c'est quelque chose qui fonctionnait parfaitement sur mon ancien serveur donc pourquoi ça ne fonctionnerait plus maintenant ? ou sinon comment faire pour intégrer ces informations ?

De plus le php est bien interprété car lorsque je regarde le code source de la page j'ai ceci :

Code :

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

1
2
 
<select name="tri" id="tri" onchange="window.location.href='/cdl/Fichier/listeclients/tri/'+this.value+'/filtre/'+$('select#filtre').attr('value')+'/filtre2/'+$('select#filtre2').attr('value')+'/page/1'">

je viens de modifier mon code de la manière suivante

Code :

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

1
2
 
<select name="tri" id="tri" onchange="window.location.href='<?php echo $this->baseUrl();?>/Fichier/listeclients/tri/code_identif_cci/filtre//filtre2/1/page/<?php echo $page->getCurrentPageNumber();?>'">

et celui-ci fonctionne parfaitement.

Le problème ne serait donc pas au niveau du php mais des variables en javascript

[Puuck]

Pour récupérer la valeur sélectionnée du <select> , tu peux remplacer ton "this.value" par :

Code :

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

this.options[this.selectedIndex].value

Idem pour ton $('select#filtre2').

[Bovino]

@Puuck : aucune utilité. Cette syntaxe était utile pour Netscape4 / IE4, depuis, tous les navigateurs comprennent parfaitement this.value pour un select.

@mathieu.dubiez : ah... je croyais j'osais espérer que tu avais lu Important : Les règles incontournables d'utilisation de ce forum qui stipule clairement de poster le code généré et non le code serveur qui n'a aucun intérêt ici...

Sinon

Code :

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

$('select#filtre').attr('value')

Code :

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

$('select#filtre').val()

[Watilin]

Attention à l'efficacité du sélecteur : avec "select#filtre", c'est le DOM tout entier qui est d'abord scanné à la recherche des éléments <select>, puis seul celui qui porte l'id "filtre" est gardé.

Peut-être que jQuery optimise les sélecteurs en interne, mais il vaut mieux ne pas faire le pari.

Le plus efficace de tous les mécanismes de sélection, c'est l'id. Ainsi, "#filtre" est bien plus efficace que "select#filtre".

[Bovino]

Il me semble que tu as raison sur le fond mais pas sur la forme...
A priori, CSS (et jQuery le fait aussi je crois) lit les sélecteurs de la droite vers la gauche, donc dans ton exemple, il cherchera d'abord l'id puis vérifiera ensuite s'il correspond à un select.
Néanmoins, encore une fois, tu as raison sur le fond, la notation "select#filtre" est maladroite et ne devrait pas être utilisée.

[mathieu.dubiez]

Merci à vous pour ces réponses très constructives et qui ont répondu à mes questions. L'utilisation de #filtre au lieu de select#filtre et de .val() au lieu de attr.('value') ont permis de corriger mes problèmes précédemment cités.

Il m'en reste cependant un autre au niveau de mes formulaires Zend.
Lors du positionnement sur un champ, j'ai sur le onFocus de mes champs divers actions qui s’exécutent en faisant appelle à un fichier .js . Les actions sont les suivantes :
- je mets en évidence le premier champs de la liste
- j'affiche dans la div "aide" une page d'aide à la saisie (clavier ou liste)
- j'enlève la mise en évidence du champ en cours et on passe au suivant en le mettant en évidence et ainsi de suite


Voici le code généré de ma page :

Code html :

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
67
68
69
70
71
72
73
74
75
76
77
78
<div id="saisie"><form id="creationclient" enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form">
<dt id="id-label">*</dt>
<dd id="id-element">
<input type="hidden" name="id" value="" id="id" /></dd>
<dt id="Types_clients_id-label"><label for="Types_clients_id" class="tabaide required">Type de clients <em>*</em></label></dt>
<dd id="Types_clients_id-element">
<input type="text" name="Types_clients_id" id="Types_clients_id" value="" onFocus="champsur(this)" /></dd>
<dt id="code_identif_cci-label"><label for="code_identif_cci" class="required">Code_identif_cci <em>*</em></label></dt>
<dd id="code_identif_cci-element">
<input type="text" name="code_identif_cci" id="code_identif_cci" value="" onFocus="champsur(this)" maxLength="11" /></dd>
<dt id="Formes_juridiques_id-label"><label for="Formes_juridiques_id" class="tabaide optional">Forme juridique</label></dt>
<dd id="Formes_juridiques_id-element">
<input type="text" name="Formes_juridiques_id" id="Formes_juridiques_id" value="" onFocus="champsur(this)" /></dd>
<dt id="nom_court-label"><label for="nom_court" class="required">Nom court <em>*</em></label></dt>
<dd id="nom_court-element">
<input type="text" name="nom_court" id="nom_court" value="" onFocus="champsur(this)" maxLength="15" /></dd>
<dt id="nom_complet-label"><label for="nom_complet" class="required">Nom complet <em>*</em></label></dt>
<dd id="nom_complet-element">
<input type="text" name="nom_complet" id="nom_complet" value="" onFocus="champsur(this)" maxLength="45" /></dd>
<dt id="adresse-label"><label for="adresse" class="optional">Adresse</label></dt>
<dd id="adresse-element">
<input type="text" name="adresse" id="adresse" value="" onFocus="champsur(this)" maxLength="45" /></dd>
<dt id="complement_adresse-label"><label for="complement_adresse" class="optional">Complément d'adresse</label></dt>
<dd id="complement_adresse-element">
<input type="text" name="complement_adresse" id="complement_adresse" value="" onFocus="champsur(this)" maxLength="45" /></dd>
<dt id="code_postal-label"><label for="code_postal" class="optional">Code postal</label></dt>
<dd id="code_postal-element">
<input type="text" name="code_postal" id="code_postal" value="" onFocus="champsur(this)" maxLength="10" /></dd>
<dt id="ville-label"><label for="ville" class="optional">Ville</label></dt>
<dd id="ville-element">
<input type="text" name="ville" id="ville" value="" maxLength="45" onFocus="champsur(this)" /></dd>
<dt id="Pays_id-label"><label for="Pays_id" class="tabaide required">Pays <em>*</em></label></dt>
<dd id="Pays_id-element">
<input type="text" name="Pays_id" id="Pays_id" value="" onFocus="champsur(this)" /></dd>
<dt id="telephone-label"><label for="telephone" class="optional">Téléphone</label></dt>
<dd id="telephone-element">
<input type="text" name="telephone" id="telephone" value="" onFocus="champsur(this)" maxLength="20" /></dd>
<dt id="fax-label"><label for="fax" class="optional">Fax</label></dt>
<dd id="fax-element">
<input type="text" name="fax" id="fax" value="" onFocus="champsur(this)" maxLength="20" /></dd>
<dt id="mail-label"><label for="mail" class="optional">Email</label></dt>
<dd id="mail-element">
<input type="text" name="mail" id="mail" value="" onFocus="champsur(this)" /></dd>
<dt id="contact-label"><label for="contact" class="optional">Contact</label></dt>
<dd id="contact-element">
<input type="text" name="contact" id="contact" value="" onFocus="champsur(this)" maxLength="45" /></dd>
<dt id="contact_numero-label"><label for="contact_numero" class="optional">Contact numéro</label></dt>
<dd id="contact_numero-element">
<input type="text" name="contact_numero" id="contact_numero" value="" onFocus="champsur(this)" maxLength="20" /></dd>
<dt id="identification_bateau-label"><label for="identification_bateau" class="required">Identification des bateaux <em>*</em></label></dt>
<dd id="identification_bateau-element">
<label><input type="radio" name="identification_bateau" id="identification_bateau-0" value="0" />Non</label><br /><label><input type="radio" name="identification_bateau" id="identification_bateau-1" value="1" />Oui</label></dd>
<dt id="proprietaire-label"><label for="proprietaire" class="required">Propriétaire d'emballages <em>*</em></label></dt>
<dd id="proprietaire-element">
<label><input type="radio" name="proprietaire" id="proprietaire-0" value="0" />Non</label><br /><label><input type="radio" name="proprietaire" id="proprietaire-1" value="1" />Oui</label></dd>
<dt id="siret-label"><label for="siret" class="optional">Siret</label></dt>
<dd id="siret-element">
<input type="text" name="siret" id="siret" value="" onFocus="champsur(this)" maxLength="14" /></dd>
<dt id="TVA_id-label"><label for="TVA_id" class="tabaide required">Code TVA <em>*</em></label></dt>
<dd id="TVA_id-element">
<input type="text" name="TVA_id" id="TVA_id" value="" onFocus="champsur(this)" maxLength="20" /></dd>
<dt id="num_tva_intracom-label"><label for="num_tva_intracom" class="optional">N°TVA intracom.</label></dt>
<dd id="num_tva_intracom-element">
<input type="text" name="num_tva_intracom" id="num_tva_intracom" value="" onFocus="champsur(this)" maxLength="20" /></dd>
<dt id="num_boite_lettre-label"><label for="num_boite_lettre" class="optional">N° boite aux lettres</label></dt>
<dd id="num_boite_lettre-element">
<input type="text" name="num_boite_lettre" id="num_boite_lettre" value="" onFocus="champsur(this)" maxLength="3" /></dd>
<dt id="submit-label">*</dt><dd id="submit-element">
<input type="submit" name="submit" id="submit" value="Valider" /></dd></dl></form><p style="font-size: xx-small; font-weight: bolder; margin: 0 0 0 0;">*
: champ obligatoire</p>
<p
	style="font-size: xx-small; font-weight: bolder; color: #F8B600; margin: 0 0 0 0;">pr&eacute;sence
d'une liste de choix</p>
<button
	onclick="document.location='/cdl/Fichier/listeclients';">-
Retour -</button>
</div>
<div id="aide"></div>

Voici une partie de mon script js (je reprécise que tout ceci fonctionne sur mon ancien serveur)

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
...
//action à réaliser lors du postionnement du curseur dans un champ
function champsur(obj){
	champ=obj;
	$("input").removeAttr("disabled");
	$("input").removeClass("avecFocus").addClass("sansFocus");
	$("select").removeClass("avecFocus").addClass("sansFocus");
	$("textarea").removeClass("avecFocus").addClass("sansFocus");
	champ.className  = "avecFocus";
}
//fonction permettant de passer au champ suivant après un choix
function doNext(el)
{
	var f = el.form;
	var els = f.elements;
	var x, nextEl;
	for (var i=0, len=els.length; i<len; i++){
		x = els[i];
		if (el == x && (nextEl = els[i+1])){
			if (nextEl.focus){
				el.className  = "sansFocus";
				nextEl.className  = "avecFocus";	
				nextEl.focus();				
			}
			return nextEl;
		}
	}
}
//fonction permettant de choisir un élément dans une liste et d'implementer le choix dans la zone de texte
function choisi(val){
        champ.value=val;
	champ.disabled=false;
	champ=doNext(champ);
	champ.focus();
}
...
//fonction JQuery réalisée lorsque le document est chargé
$(document).ready(function(){
//positionnement sur le premier input
	$("#saisie input[type=text]:visible:enableC:first").focus();
	$("#identif input[type=text]:visible:enableC:first").focus();
 
 
	//affichage des tableaux d'aide à la saisie (liste et clavier virtuel selon le champ)
	$("#Types_clients_id").focus(function(){
		$("#Types_clients_id").attr("disabled", "disabled");
                nombre= Math.floor(Math.random() * 999)+1;
		$(this).delay(125,function(){
			jQuery.ajax({
				url:monUrl+"/Info/infotypesclients/"+nombre,
				success:function(msg){
					$("div#aide").html(msg);
				}
			});
		});
	});
...

si je mets un alert('je suis ici'); avant le $(document).ready(function(){
il apparaît bien si je le mets après il n’apparaît plus

[mathieu.dubiez]

Finalement, j'ai téléchargé une librairie plus récente de JQuery et ça refonctionne.

Il ne me manque qu'un dernier élément.
J'ai un champs de saisie avec un attribut 'lettre', je modifie cet attribut et en récupère la valeur pour le chargement d'une page annexe.

Avant je récupérais cette valeur par $("#Clients_id").attr('lettre') mais aujourd'hui celui-ci ne me renvois plus rien. L'outils de dev de chrome me permet de constater que 'lettre' possède bien la valeur que je lui passe mais je n'arrive pas à la lire dans mon script.

Comment récupérer cette valeur vu que $("#Clients_id").attr('lettre') ne fonctionne pas ?

[Watilin]

J'ai un champs de saisie avec un attribut 'lettre'

Tu peux nous montrer le code HTML de ce champ de saisie ?

Normalement l'attribut lettre n'existe pas, mais en principe ça n'empêche pas jQuery de le trouver quand tu le demandes. Le problème vient d'ailleurs.

[mathieu.dubiez]

voici le code html

Code html :

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

1
2
3
4
5
6
7
<form id="creationreceptionarticlessales" enctype="application/x-www-form-urlencoded" action="" method="post"><dl class="zend_form">
<dt id="id-label">*</dt>
<dd id="id-element">
<input type="hidden" name="id" value="" id="id" /></dd>
<dt id="Clients_id-label"><label for="Clients_id" class="tabaide required">Client <em>*</em></label></dt>
<dd id="Clients_id-element">
<input type="text" name="Clients_id" id="Clients_id" value="" onFocus="champsur(this)" lettre="" /></dd>

comme je le disais l'attribut est bien rempli par la lettre que je peux choisir (contenu bien visible avec l'outil de dev de google chrome) mais je ne parviens plus à lire cette valeur

[Watilin]

Bizarre. As-tu vérifié ce que donne $("#Clients_id") tout court ?

[mathieu.dubiez]

finalement le problème est résolu par

Code :

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

$("#Clients_id").prop('lettre')

[Bovino]

Ceci dit, utiliser des attributs non standards n'est pas la bonne façon de procéder.
HTML5 permet de créer des attributs personnalisés avec data-*, l'avantage, c'est que jQuery (et le JavaScript natif aussi) les manipule facilement avec l'objet .data().

Donc tu aurais avantage à remplacer les attributs lettre par data-lettre et utiliser les méthodes standardisées.

[Watilin]

finalement le problème est résolu par

Code :

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

$("#Clients_id").prop('lettre')

Ca c'est encore plus bizarre. En tant qu'attribut non standard, il n'est pas reflété par le DOM et ne devrait même pas exister sous la forme d'une propriété. Quelle version de jQuery utilises-tu ?

Edit: j'ai fait un fiddle pour vérifier... Ca marche avec .attr() mais pas avec .prop().
Pour mémoire : http://api.jquery.com/prop/