JQuery: historique navigateur

Hello,
j’espère que j’aurai plus de support sur le forum d’Alsacrations parce que jusqu’à maintenant sur les autres forums où j’ai posté mon problème personne a pu vraiment m’aider...

Je rencontre un problème avec ma galerie d’images et un filtrage via jQuery qui permet d’afficher mon portfolio par type de travail.

Voici la page

Le problème: quand je clique sur une vignette de ma galerie qui a déjà été filtrée par type de travail j’aboutis bien à ma page html suivante, mais au moment de retourner dans mon historique je retombe sur l’entièreté de ma galerie et non sur le filtrage effectué auparavant, vous me direz que c’est assez normal puisque ce filtrage s’effectue à chaque fois sur la même page html, mais alors comment contourner ce problème?

Après quelques recherches j’ai abouti sur deux plug-ins jQuery: jQuery Address et jQuery BBQ: Back Button & Query Library.
Je me suis penché d'abord sur le deuxième script jQuery BBQ: Back Button & Query Library, j’ai trouvé parmi les exemples du site de l’auteur ce qui semblait être LA solution, j’étais tout content d’avoir enfin quelque chose de valable sous la main, hélas ces deux scripts (solution hash après l’adresse html combiné avec le filtrage de mes travaux) rentrent en conflit.

Script jQuery BBQ: Back Button & Query Library:

Ici quand je désactive les instructions jQuery pour le filtrage de mes travaux, le hashbang est bien appliqué (voir après l'adresse html dans le barre de navigation du navigateur).

Voici le script pour l'ajout du hashbang avec le script jQuery BBQ: Back Button & Query Library:

$(function(){
 
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    var hash = location.hash;
 
    // Set the page title based on the hash.
    document.title = 'iorbita - ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
 
    // Iterate over all nav links, setting the "selected" class as-appropriate.
    $('#filtre li a').each(function(){	
      var that = $(this);
      that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
    });
  })
 
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange();
 
});

Ici quand j’active les instructions jQuery pour le filtrage de mes travaux c’est le hashbang qui n’est plus pris en considération.

Voici le script jQuery pour le filtrage de mes travaux:

$('#filtre li a').click(function () {						// On clique sur un filtre
 
        $('#filtre li').removeClass('active');						// Supprimer la classe "active" sur tous les liens du filtre
        $(this).parent().addClass('active');						// Ajouter la classe "active" sur le parent (li) du "a" cliqué
 
        var valeurFiltre = $(this).text().toLowerCase().replace(' ', '');	// On stocke dans une variable la valeur du lien cliqué, en minuscule et sans espace
 
        $('#portfolio li').hide();								// Cacher tous les projets
 
        if (valeurFiltre == "tout") {							// On teste si le filtre appliqué est sur "tout"
 
            $('#portfolio li').show('slow');						// Alors on montre tous les projets
 
        } else {
 
            $('#portfolio li').each(function () {					// Sinon c'est que l'on est dans une catégorie
 
                if (!$(this).hasClass(valeurFiltre)) {					// On vérifie si le "li" n'a pas la classe du filtre appliqué
 
                    $(this).hide('slow');							// On cache les projets qui n'ont pas cette classe
 
                } else {
 
                    $(this).show('slow');							// Sinon on les montre
 
                }
 
 
            });
 
 
        }
 
        return false;									// Bloque l'action initiale du lien
 
    });

Comment fusionner ces deux scripts afin de ne pas avoir de conflits? Les scripts fonctionnent mais selon moi puisqu'ils ciblent tous les deux les mêmes éléments il rentrent en conflit...

Assez désespéré je me suis penché aussi sur l'autre script: jQuery Address

Ici quand je désactive les instructions jQuery pour le filtrage de mes travaux le hashbang est bien appliqué (voir après l'adresse html dans le barre de navigation du navigateur).

Voici le script pour l'ajout du hashbang avec le script jQuery Address:

$('#filtre li a').click(function () {

$(this).address.history(function() {
                    return $(this).attr('href').replace(/^#/, '');
                });
				
});

Et rebelotte, là aussi conflit avec l'autre script ou en tout cas le script prends le dessus sur l'autre...
Ma conclusion c'est que les deux scripts fonctionnent individuellement... mais pas ensemble...


Cela fait maintenant quelques jours que j’effectue des recherches et que j’essaie de m’en sortir, mais je tourne en rond et je perds un temps monstre... On fait quoi quand on est face à un mur...? Quelqu’un aurait l’amabilité de m’indiquer comment m’en sortir. Merci.
Modifié par porcini (22 Jul 2012 - 21:07)

Bonjour,

À mon avis, utiliser un plugin de gestion d'historique est très overkill pour les fonctionnalités que tu veux implémenter.

En soit, tu aurais juste à ajouter un hash (#print, #web) à ton url lorsque tu effectue un nouveau filtrage.

Ensuite, tu n'as qu'à écouter l'évènement onhashchange et à re-filtrer ta galerie selon la valeur du hash. (ie7 et moins n'implémente pas onhashchange alors tu auras besoin d'un polyfill, mais c'est assez simple)

Est-ce que cela t'aide ?
Modifié par Vaxilart (22 Jul 2012 - 23:39)

merci pour cette réponse ...on va dire qu'elle m'a plus encouragé à persévérer... 
Quand tu dis "En soit, tu aurais juste à ajouter un hash (#print, #web) à ton URL lorsque tu effectues un nouveau filtrage." ...ben au fait c'est que j'essaye de faire depuis quelques jours avec ces deux plug-ins, mais la tâche est hors de ma portée et si je comprends bien il est inutile de les utiliser pour un besoin si minime, ça serait comme tuer une mouche avec un tank?

Je suis novice en programmation, je n'arrête pas de le dire sur les forums afin qu'on ne me prenne pas pour un pro de la programmation et qu'on ne me bombarde pas avec des explications encore trop "fumeuses" pour ma matière grise... 

Je reviens à mon problème, comment ajouter ce hash dans mon adresse url sans les plug-ins cités précédemment et en simultané au click de mon filtrage ? Dois-je intégrer une fonction supplémentaire à celle déjà existante pour le filtrage? Dois-je utiliser la méthode window.location? ...bref encore pleins de points d'interrogation... peut-être d'autres exemples concrets à me linker, je me rends compte qu'avec des exemples à l'appui j'ai toujours plus facile à comprendre. Merci du coup de pouce.
Modifié par porcini (23 Jul 2012 - 02:25)

... heu... donc pour finir il faut utiliser le plug-in? je croyais que tu disais que c’était "overkill"? Si je comprends bien on est reparti avec le plug-in jQuery de Ben Alman...

J’essaye de comprendre ce que tu m’as écrit.
Voci mon bout de code pour le filtrage (sans événement click() ):

var valeurFiltre = $(this).text().toLowerCase().replace(' ', '');

$('#portfolio li').hide();

if (valeurFiltre == "tout") {

    $('#portfolio li').show('slow');

} else {

    $('#portfolio li').each(function () {

        if (!$(this).hasClass(valeurFiltre)) {

            $(this).hide('slow');

        } else {

            $(this).show('slow');


        }


    });


}

et voici ton bout de code:

$(window).hashchange(function() {

var selection = location.hash;

fonction_qui_filtre( selection );

});

Si je suis ce que tu dis, il faut intégrer mon bout de code pour filtrer les travaux dans la fonction hashchange?
mais alors je n’ai plus d’événement de souris (click) pour actionner le filtrage... ou alors c’est toute ma fonction de filtrage avec l’événement click qui doit être intégrée dans la fonction hashchange? ... et comment intégrer la variable var selection = location.hash; dans mon code?
Je dois dire que j’ai assez de mal à comprendre comment rassembler les différentes informations que j’ai sous la main...
Modifié par porcini (23 Jul 2012 - 22:46)

Salut,

Je passe rapidement, mais ce script ne fonctionnerait pas ?

var filter = function( valeurFiltre ) {
	
	var filterClass = '.' + valeurFiltre;
	
	$('#portfolio li').hide();
	
	if( valeurFiltre === "tout" ) {
		
		$('#portfolio li').show('slow');
		
	} else {
		
		$('#portfolio li')
			.not( filterClass )
				.hide( 'slow' )
				.end()
			.filter( filterClass )
				.show( 'slow' );
		
	}

}

$(window).hashchange(function() {

	var valeurFiltre = location.hash;
	filter( valeurFiltre );

});

Je ne suis pas sûr toutefois à 100% de la valeur de location.hash. Peut-être que la valeur commence avec un dièze (#). À ce moment, il faudrait le supprimer ( valeurFiltre.replace('#','') )

-----

Pour faire rapidement, à peu près tout est un plugin dans jQuery. Cela dit, le script de Ben Alman offre juste une interface pour travailler avec l'évènement onhashchange directement dans jQuery. C'est donc un script léger (une dizaine de ligne) qui effectue une seule et unique tâche. (Donc est-ce exactement un plugin au sens où on l'entend habituellement ?)

À l'opposé, les plugins que tu citais plus haut (BBQ entre autre), offre des fonctionnalités beaucoup plus avancées que ce que tu semble pas nécessiter. Ce sont réellement des plugins offrant de nombreuses fonctionnalités connexes, alors que tu as seulement besoin de travailler avec l'évènement onhashchange. C'est pourquoi je dis qu'ils sont overkill pour la tâche que tu semble vouloir accomplir.

Salut,

1ere réponse

Non, plus besoin de click(). Pour être exacte, le click sur un bouton exécutera son action par défaut, changer l'URL (avec la valeur de href).

2eme question

Je ne l'ai pas fait dans l'exemple, car la variable valeurFiltre sera la valeur du hash présent dans l'URL ( provenant de cette ligne var valeurFiltre = location.hash; ).


Maintenant, comme tous tes travaux disparaissent, on sait au moins qu'on est très près du but. Le click sur tes boutons et la réponse du programme (l'évènement onhashchange) semblent bien s'exécuter.

Seulement, la valeur fournit au filtre doit être erroné. Pour cela, vérifie la valeur de l'argument passé à ta fonction. Il te suffit d'ajouter un appel à console.log() dans ton code pour voir la valeur de la variable dans la console du navigateur (firebug ou chrome dev tools onglet console). Tu peux ajouter cette ligne au début de ta fonction:

var filter = function( valeurFiltre ) {
	console.log( valeurFiltre );
	var filterClass = '.' + valeurFiltre;

Je présume que tu verras à ce moment où est l'erreur (je présume que ce sera un # dans la valeur passée).

Hello
en effet via la console j’obtiens ceci:
[Window iorbita-portfolio.html#printbook]
ou
[Window iorbita-portfolio.html#identitydesign]
selon le lien que je clique dans mon menu.

Maintenant si j’ai bien compris il faudrait modifier la valeur de l’argument passé à la fonction, il s’agirait donc d’éliminer le dièse (#) avant le mot de la catégorie concernée (#printdesign, #identitydesign, ...) afin que celui-ci soit en correspondance avec les mots de la liste de la galerie <li class="printdesign">.
Une méthode du genre substring(0, 1) dans une nouvelle variable?
Je ne pense pas qu’il soit possible de modifier la variable valeurFiltre sinon c’est la fonction .hashchange qui ne fonctionnera plus... suis-je dans le bon?

Hello
...les navigateurs que j’utilise quotidiennement sont Safari et Firefox.
Le test via la console a été effectué avec la dernière version de Firebug.

J’ai rajouté la méthode replace() à ma variable var valeurFiltre comme ci-dessous:

var valeurFiltre = location.hash.replace( '#', '' );

...cependant je m’aperçois que certains navigateurs ne réagissent pas de la même manière.

Safari et Firefox semblent prendre en compte la fonction hashchange, en effet quand je reviens en arrière dans mon historique j’ai bien la page avec mes travaux filtrés et le dièse suivi de la catégorie choisie.

Opera ne rajoute pas de dièse après l’adresse HTML, mais par contre le retour en arrière dans l’historique s’effectue convenablement...

C’est Chrome qui échappe à la règle, en effet le dièse est bien rajouté dans la barre d’adresse, mais au moment de retourner en arrière dans l’historique j’ai à nouveau toute ma galerie qui s’affiche donc de ce côté-là il y a un souci...
Je n’ai pas encore testé sous IE...
Voici la nouvelle page, si tu pouvais me dire si tu as le même résultat de ton côte... encore merci!

Hello
...j’ai bien vidé le cache de Chrome et je reviens à chaque fois sur l’entièreté de ma galerie, je ne comprends pas... au fait, j’ai pu m’apercevoir que le dièse suivi du nom de la catégorie est toujours présent dans la barre d’adresse du navigateur quand je retourne dans mon historique, mais c’est le lien "Tout" du menu qui reste sélectionné et non celui de la catégorie correspondante. Cette anomalie d’avoir "Tout" toujours sélectionne quand on revient dans l’historique est présent aussi sur les autres navigateurs, sauf que ceux-ci gardent mon filtrage effectué auparavant.... étrange, non? ...donc peut-être que le problème avec Chrome vient de cette anomalie?
Et donc chez toi sous Chrome tu n’as pas de souci?

Autre chose, tu me dis de changer la condition if(valeurFiltre === "tout") pour un truc plus générique, mais je ne comprends pas, pour quelle raison le dièse devrait être vide ou inexistant puisqu’à chaque fois une catégorie est prise en considération?
J’ai essayé de mettre if(!valeurFiltre), et changer le filtre #tout par un simple # vide, mais c’est justement avec ce changement que tout disparaît...

...on est prêt du but, mais je pense qu'il y a encore quelques petits dysfonctionnements...
Modifié par porcini (27 Jul 2012 - 11:28)

...un dernier coup de pouce? Je n'ai pas l'impression que cela fonctionne à merveille, j'ai essayé sous Windows via browserling.com et j'ai le même problème avec Chrome mais aussi avec IE 9, tu peux le confirmer? ... cela voudrait dire que le script de Ben Alman n'est pas vraiment au point...?

Hello
voici la page que je teste.
Je pense qu'il y a vraiment un problème dans le script. En effet je me suis rendu compte qu'en cliquant sur un des liens le filtrage s'effectue mais le :hover reste calé sur "Tout".
Je me demande si ce n'est pas la raison pour laquelle quand je reviens en arrière sous Chrome je reviens sur l'entièreté de la galerie. De plus je viens de m'apercevoir que sous Safari et Firefox ça marche 2 fois sur 3, c'est aléatoire...

...et chez toi tout marche nickel? Je ne comprends pas comment c'est possible, on dirait presque qu'on teste 2 pages différentes

Hello,
...désolé de revenir à chaque fois sur ce post et de m’acharner ainsi mais il n’y a que toi qui m’a vraiment aidé et je t’en remercie.

Je viens de partir en vacances et j’ai bien l’intention de porter à terme mon site pendant cette période de répos.

Concernant le :hover qui restait calé sur "Tout" cela était dû qu’on avait oublié d’intégrer le script qui supprimait et qui rajoutait la classe "active" sur tous les liens du filtre au moment du click, je l’ai rajouté et cela fonctionne bien.
Reste le problème du retour de l’historique sous Chrome (et peut-être sous IE?) mais si tu me dis que tout fonctionne bien je vais devoir me résigner à penser que le problème n'est présent que sur ma machine...?

Salut,

À ta place, je commencerais par regarder ce qui ne fonctionne pas sur mon navigateur. Tout d'abord, ouvre la console et regarde si des erreurs y sont affichés. Ensuite, ajoute simplement une commande `console.log('salut')` dans ton script pour regarder si l'évènement est bien lancé.

Ce sera déjà un bon départ. Ensuite, si rien n'y fait, tu peux inscrire `debugger;` dans ton script javascript, et ta console javascript va mettre l'exécution en pause et tu pourras sauter d'étape en étape pour voir à quel endroit ton code ne fonctionne pas.

T'expliquer concrètement comment déboguer ton application serait plutôt ardu, mais tu as au moins quelques termes pour effectuer une recherche google au besoin.

Autrement, tu peux aussi tester sur l'ordinateur d'amis et voir s'ils ont le même résultat.