11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'utilise l'exemple du menu accordéon exposé en tutoriel. Dans mon site, j'utilise également prototype.js. J'ai eu bien sur un conflit que j'ai résolu avec jQuery.noConflict(); et en remplaçant tous les $( par des jQuery(.
Je n'ai plus d'erreur affiché.

Par contre, lorsque je clique sur un des menu de l'accordéon, le naviguateur "suit" le lien <a href> et je recharge la page.
Si je n'inclue plus la librairie prototype.js, cela fonctionne à nouveau, le lien n'est pas suivi et le menu fonctionne (s'ouvre, se referme).

c'est exactement le code fournit sur le site :


	jQuery.noConflict();   

    jQuery(document).ready(
	function () {
        // On cache les sous-menus
        // sauf celui qui porte la classe "open_at_load" :
        jQuery("ul.subMenu:not('.open_at_load')").hide();
        // On selectionne tous les items de liste portant la classe "toggleSubMenu"
    
        // et on remplace l'element span qu'ils contiennent par un lien :
        jQuery("li.toggleSubMenu span").each( function () {
            // On stocke le contenu du span :
            var TexteSpan = jQuery(this).text();
            jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ;

        } ) ;
    
        // On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        jQuery("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :

            if (jQuery(this).next("ul.subMenu:visible").length != 0) {
                jQuery(this).next("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {

                jQuery("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") } );
                jQuery(this).next("ul.subMenu").slideDown("normal", function () { jQuery(this).parent().addClass("open") } );
            }
            // On empêche le navigateur de suivre le lien :

            return false;
        });
    
    }
	) ;


J'ai essayé avec e.preventDefault() mais je n'ai pas plus de succès ...
Quelqu'un aurait une idée ?
Modifié par denisc15 (13 Apr 2011 - 23:53)
Et l'utilisation de la librairie prototype est obligatoire ? N'existe t'il pas un équivalent en jQuery de ce que tu souhaites faire avec prototype ?
Pour ma part je ne suis pas fan de ce code qui crée un faux lien pour faire un bouton:
// et on remplace l'element span qu'ils contiennent par un lien : 
jQuery("li.toggleSubMenu span").each( function () { 
  // On stocke le contenu du span : 
  var TexteSpan = jQuery(this).text(); 
  jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '</a>') ; 
});

Le but, je pense, était de permettre une utilisation au clavier en permettant à l'intitulé de menu de recevoir le focus. Mais on doit pouvoir faire ça avec un attribut tabindex à zéro.
// Les intitulés de sous-menu doivent pouvoir recevoir le focus
jQuery("li.toggleSubMenu > span")
  .attr("title", "Afficher le sous-menu")
  .attr("tabindex", "0");

Et plus loin il faut bien sûr corriger le code:
// jQuery("li.toggleSubMenu > a").click( ...
jQuery("li.toggleSubMenu > span").click( ...


Pour le reste, +1 pour dire que mélanger les libs JS c'est pas top.
Modifié par fvsch (14 Apr 2011 - 16:36)
Merci pour vos réponses !

@fvsch : j'ai essayé, mais ça ne fonctionne toujours pas, j'ai une erreur sur le clic du menu :
Message : Un nombre positif fini doit être attribué à la longueur du tableau
Ligne : 464


@Libratoi : non, par encore d'exemple en ligne ...

@ZeB_panam : oui tu as sans doute raison, j'utilise la librairie prototype pour une autocompletion sur un input. Je voulais m'éviter cette voie qui semble longue, mais je crois que je ne vais pas pouvoir y couper ...
denisc15 a écrit :
j'utilise la librairie prototype pour une autocompletion sur un input. Je voulais m'éviter cette voie qui semble longue, mais je crois que je ne vais pas pouvoir y couper ...

Oui pour le coup c'est dommage car des plug-ins pour l'autocomplete y'en a sous jQuery.

Y'en a même un intégré via jQuery UI : http://docs.jquery.com/UI/Autocomplete
denisc15 a écrit :
@fvsch : j'ai essayé, mais ça ne fonctionne toujours pas, j'ai une erreur sur le clic du menu :
Message : Un nombre positif fini doit être attribué à la longueur du tableau
Ligne : 464

Pour commencer, le code que je donnais est une piste à comprendre et à adapter, pas un code à copier-coller. Il faut bien sûr tester et corriger les problèmes éventuels. Smiley smile
L'erreur que tu cites, c'est dans Internet Explorer je suppose? Est-ce que tu as la même erreur, ou une erreur plus explicite peut-être, dans les autres navigateurs?

Est-ce qu'on peut voir la page? Difficile de voir ce qu'il se passe ligne 464 (et ailleurs) sans ça. Smiley cligne
ZeB_panam a écrit :

Oui pour le coup c'est dommage car des plug-ins pour l'autocomplete y'en a sous jQuery.

Y'en a même un intégré via jQuery UI : http://docs.jquery.com/UI/Autocomplete


Oui effectivement, mais là aussi, j'ai du mal ...
D'après les exemples que je vois il suffit de faire :


var availableTags = [
			"ActionScript",
			"AppleScript",
			"Asp",
			"BASIC",
			"C",
			"C++"];

		$( "#tags" ).autocomplete({
			source: availableTags,
			//source:"search.php",
			minLength: 1

Dans le premier cas (appel à une variable locale), pas de problème, l'autocompletion fonctionne bien. Dans le second cas, j'encode le même array en JSON, mais la rien ne se passe, aucune réaction. Si j'indique un fichier inexistant, pas d'erreur non plus ...
En fait je n'arrive pas à savoir si la méthode Autocomplete intègre bien la requête AJAX ...
Et je ne trouve aucun exemple fonctionnele sur le web ...
denisc15 a écrit :

En fait je n'arrive pas à savoir si la méthode Autocomplete intègre bien la requête AJAX ...

Tu peux traiter la requête ajax du fichier search.php de façon plus encadrée en utilisant un callback (avec une fonction anonyme). Tu trouveras un exemple sur http://jqueryui.com/demos/autocomplete/#remote-jsonp (d'autres exemples de traitements ajax pour l'auto-complete sont disponibles dans le menu en haut à gauche)