[Résolu] Variable jquery

Bonjour,

je suis nouveau sur le forum et je tiens, avant d'exposer mon soucis, à vous remercier pour les aides que vous nous apporter. J'ai longtemps attendu avant de poster mon problème. J'aime résoudre les choses par moi-même. j'ai 50 ans et je programme depuis mes 10 ans. Longtemps développeur en VB et action-script je viens de me mettre au JS et jquery.

si je viens poster c'est parce qu'une solution a mon probleme est paru sur votre site mais ne fonctionne pas chez moi : http://forum.alsacreations.com/topic-5-66384-1-Comment-forcer-louverture-dun-element-de-lacrodeon.html.

Je souhaite en effet passer une valeur dans l'accordeon de jquery pour l'ouverture d'un élément, mais toutes mes tentatives sont voué à l'échec.

voila mon code :

<script>
		$(function(){  
		$('#accordeon').accordion({
		heightStyle: "content",
		collapsible: true,
		active:0
		});
		});

		$(function() {
		$( "input[type=submit], [type=button]" )
      		.button()
      		.click(function() {
		   		var inputId = '{active:' + this.id + '}';

		   		console.log(inputId);
			$('#accordeon').accordion(inputId);
      	});	
  		});
</script>

J'utilise les bibliotheques bouton et accordeon de jquery ui. Je précise que la balise cible se nomme bien "accordeon". La console de chrome me renvoie bien : {active:x} (ou x est le n° d'id du bouton cliquer). Je me débrouille pour le moment avec un "on case" mais je préfère optimiser mon code ...
J'ai essayé de nombreuses autres syntaxes vu sur la doc de jquery ui et sur le net ... sans succès.
exemple :

$('#accordeon').accordion("option",inputId);

ou encore :
en faisant -->

var inputId = this.id;

ces syntaxes ne donne rien :

$('#accordeon').accordion(active:inputId);

ou

 $('#accordeon').accordion("option","active", inputId);

derniere info si je remplace le # par un . (point) comme mentionné sur la doc de jquery plus rien ne fonctionne (l'accordeon disparait).

je m'en remet à votre perspicacité et vous remercie par avance du temps que vous aurez bien voulu consacrer à mon post.

Edit : j'ai oublié de préciser que lorsque l'on met une valeur le code fonctionne bien, exemple :

 $('#accordeon').accordion("option","active", 1);

ou

$('#accordeon').accordion(active : 1 );

Modifié par papywandar (30 Sep 2013 - 11:04)

Bonjour,

papywandar a écrit :
Edit : j'ai oublié de préciser que lorsque l'on met une valeur le code fonctionne bien, exemple :

 $('#accordeon').accordion("option","active", 1);

Que vaut ta variable inputId ? Il me semble que this.id retourne la valeur de l'id et non pas un l'index de l'élément de contenu de l'accordéon.

Comment associe tu ton bouton avec l'élément à ouvrir ?

la variable inputId contient l'id du bouton cliquer, je les ai nommé 1, 2, 3 etc...

<input type="button" id="1" value="Suivant"/>

le console.log me renvoie bien une valeur, j'ai meme fait un

var inputId = this.id;
console.log(inputId*2);

pour m'assurer que c'est bien une valeur qui est prise.

le fonctionnement est le suivant :
un accordeon a 4 niveaux, dans chacun d'eux un bouton. pour les 3 premiers niveaux, le bouton permet de passer au niveau suivant, le 4eme valide le formulaire. Il s'agit d'un formulaire d'inscription. Quand la premiere partie est saisie et validé, cet élément passe en "disabled", on le ferme et on ouvre l'élément suivant. Je sais pas si j'ai été très clair ... désolé.

Edit : comme je continue de fouiller sur le net, je viens de découvrir quelque chose... un probleme de version de jquery. Comme je l'ai dit, je viens de me mettre a jquery, j'ai donc installé la dernière version 1.10.3. et je viens de découvrir que :

$('#accordeon').accordion("option", "active",2)

fonctionne sur la 1.10.3 mais pas sur les versions antérieures qui prenait comme paramêtre

$('#accordeon').accordion("activate",2)

Je continue dons de regarder dans cette direction et je vais tester en installant une autre version de jquery
Modifié par papywandar (01 Oct 2013 - 11:58)

Ok inputId est donc une chaine de caractère et le paramètre de l'option active doit être un entier.

Il faut donc faire une petite conversion.

$('#accordeon').accordion("option","active", parseInt(inputId));

Arf, désolé, mais j'avais dejà essayé çà. Comme dit dans mon message précédent, en multipliant par 2 inputId l'affichage dans la console est juste, c'est donc bien un integer.

Wow, c'est un vrai mystère !

Si je comprends bien, le code ci-dessous fonctionne :

$('#accordeon').accordion("option","active", 1);

Et le code ci-dessous ne fonctionne pas ?

inputId=1;
$('#accordeon').accordion("option","active", inputId);

Petite précision :
Au départ, j'ai pensé que ton problème venait des id numériques (id="1"), car en XHTML ce n'est pas autorisé, et de même, je crois que CSS n'admet pas de sélecteurs de ce type (mais là, il y a plus expert que moi sur le sujet). Par contre, HTML5 autorise les id numériques.
Bref : j'ai testé chez moi, et il semble que valide ou non, ça passe...

Le mieux est de nous montrer l'ensemble de ton code. Tu peux par exemple le mettre sur ce site : http://jsfiddle.net/

Il y a jquery et jquery ui de disponible dans la colonne de gauche, mais je n'est jamais testé avec ui.

Merci de simplifier au maximum ton code en enlevant ce qui ne pose pas de problème (champs des formulaire, textes, autres codes javascripts...

@ petibato : c'est tout a fait cela, d'ailleurs pour que ca fonctionne j'ai fait une série de test "if" ...

if (inputId == 1){$('#accordeon').accordion("option", "active",1)}
if (inputId == 2){$('#accordeon').accordion("option", "active",2)}
if (inputId == 3){$('#accordeon').accordion("option", "active",3)}
if (inputId == 4){alert("valider le formulaire")}
if (inputId == 0){alert("autre bouton")}

... mais je cherche a optimiser mon code
edit : lien vers jsfiddle
http://jsfiddle.net/pj5db/10/
Modifié par papywandar (02 Oct 2013 - 10:42)

Oh la prise de tête pour rien

Il y a un e à parseInt() !

Mais je ne comprends pas pourquoi tu n'as pas vu l'erreur affichée sur la console de ton navigateur.

Note : un id ne doit pas commencer par un chiffre, ce n'est donc pas un code html valide.

Voici le code fonctionnel : http://jsfiddle.net/pj5db/11/

oups, vraiment désolé ... je regardais dans les logs de la console, pas l'onglet error ... je découvre la console de Chrome (un outil de vraiment génial !), effectivement cela fonctionne.
merci pour tout ^^
je reviendrais,... le plus tard possible