amélioration javascript (jquery) pour le prochain JoomlaDay

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • amélioration javascript (jquery) pour le prochain JoomlaDay

    Bonjour à tous,

    Avec des potes, on organise une conférence chaque année qu'on appelle JoomlaDay (si si)
    Et là j'étais en train de cogiter pour avoir des filtres sympas à mettre sur la page "Programme".

    Concrètement, il y aurait différents filtres (avec dans le HTML des Select ayant chacun bien sûr plusieurs Options).
    Et je voulais que le navigateur retienne les filtres lorsqu'on revient sur la page du Programme.

    Le script ci-dessous fonctionne (et j'en suis déjà fier ), mais je suis sûr qu'il peut être amélioré.
    En particulier pour n'avoir qu'un seul Cookie plutôt que 4 Cookies correspondant aux 4 filtres.

    Merci pour vos suggestions

    Signé : un jeune padawan en jQuery

    Code PHP:
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <
    script defer>
    // script inspired by https://stackoverflow.com/questions/31212030/how-to-save-value-from-select-in-cookie-using-jquery
    // note that it needs jquery.cookie.min.js which is therefore called above
     
    jQuery(document).ready(function(){
      var 
    selectedcategory jQuery.cookie("mycategory");
      var 
    selectedjour jQuery.cookie("myjour");
      var 
    selectedlevel jQuery.cookie("mylevel");
      var 
    selectedfav jQuery.cookie("myfav");
      
    // read the Cookie and choose the Option in each Select accordingly
      
    if (selectedcategory)  {
        
    jQuery("#category").val(selectedcategory);
      }
      if (
    selectedjour)  {
        
    jQuery("#jour").val(selectedjour);
      }
      if (
    selectedlevel)  {
        
    jQuery("#level").val(selectedlevel);
      }
      if (
    selectedfav)  {
        
    jQuery("#fav").val(selectedfav);
      }
      
    // if any of the filters has been memorized then apply filters
      
    if ((selectedcategory) || (selectedjour) || (selectedlevel) || (selectedfav))  {
        
    // update the filters txs to the other script
        
    filterCategory(jQuery('.filtering select.filtrejour').val(), jQuery('.filtering select.filtrecategory').val(), jQuery('.filtering select.filtrelevel').val(), jQuery('.filtering select.filtrefav').val());
      }

      
    // save changes for each Select in their respective cookies
      
    jQuery("#category").on("change", function(){
        var 
    selection jQuery(this).val();
        
    jQuery.cookie("mycategory"selection, {expires365path'/'})
      });
      
    jQuery("#jour").on("change", function(){
        var 
    selection jQuery(this).val();
        
    jQuery.cookie("myjour"selection, {expires365path'/'})
      });
      
    jQuery("#level").on("change", function(){
        var 
    selection jQuery(this).val();
        
    jQuery.cookie("mylevel"selection, {expires365path'/'})
      });
      
    jQuery("#fav").on("change", function(){
        var 
    selection jQuery(this).val();
        
    jQuery.cookie("myfav"selection, {expires365path'/'})
      });
    });
    </
    script
    Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

    Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

    Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

  • #2
    Bonjour Marc,

    J'ai fait une petite simplification, même si avoir 4 cookies ne me semble pas vraiment un problème. Donc, j'ai fusionné les 4 cookies dans un seul (la limite connue pour un cookie semble être de 4.000 caractères). De plus, pour simplifier ton jQuery, j'ai ajouté une classe choix à tes 4 zones.

    Code:
    jQuery(document).ready(function($){
        const Category = 0, Jour = 1, Level = 2, Fav = 3;
        var $fields = ["#category", "#jour", "#level", "#fav"];
        var $jdcookie = $.cookie("jdays");
        if ($jdcookie) {
            $jdcookie = $jdcookie.split(",")
        } else    {
            $jdcookie = ["","","",""]; // vide : initialisation
        }
        $jdcookie.forEach(fillvals); // remplir les zones d'affichage
         if (($jdcookie[Category]) || ($jdcookie[Jour]) || ($jdcookie[Level]) || ($jdcookie[Fav] ))  {
        // update the filters txs to the other script
           filterCategory($('.filtering select.filtrejour').val(), $('.filtering select.filtrecategory').val(), $('.filtering select.filtrelevel').val(), $('.filtering select.filtrefav').val());
        }
      // save changes de la classe choix
      $(".choix").on("change", function(){
        $id = $(this).attr('id'); // quelle zone ?
        $jdcookie[$fields.indexOf('#'+$id)] = $(this).val(); // sa valeur dans le cookie
        $.cookie("jdays", $jdcookie.join(","), {expires: 365, path: '/'})
      });
      function fillvals(item,index) {
      $($fields[index]).val($jdcookie[index]);
       }
    });
    Pascal

    PS: je ne connais pas ta fonction filterCategory, mais, je pense que l'on doit pouvoir supprimer le test if (($jdcookie[Category]) || ($jdcookie[Jour]) || ($jdcookie[Level]) || ($jdcookie[Fav] ))
    Dernière édition par pmleconte à 14/10/2019, 10h44
    woluweb aime ceci.
    If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

    Commentaire


    • #3
      Yeah ! Merci Pascal !!!

      Je vais tester ça.
      En fait, mon jquery fonctionnait, mais l'idée en le rationalisant comme tu l'as fait était double :
      1. le généraliser pour que ce soit facilement généralisable, qu'on ait finalement 2 ou 10 filtres
      2. j'avais en tête aussi que si on écrivait/lisait à chaque fois dans des cookies différent que ça pouvait causer un problème de perf (surtout que la priorité est d'appliquer les filtres visuellement à l'écran)

      La raison pour laquelle j'avais mis un "if (au moins un des 4 cookies existe)" était que pour un visiteur qui vient pour la 1e fois, pas de cookies. Donc pas la peine d'exécuter des filtres (au risque d'injecter des "empty" p ex).

      Encore merci en tout cas. Le jeune padawan progresse
      Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

      Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

      Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

      Commentaire


      • #4
        Bonjour

        Avant "je suis ton père" Dark Vador fût un jeune padawan..

        Attention Pascal, faut qu'on veille au bien-être de la galaxie avec notre apprenti bruxellois.

        :-)
        woluweb aime ceci.
        Christophe (cavo789)
        Mon blog, on y parle Docker, PHP, WSL, Markdown et plein d'autres choses : https://www.avonture.be
        Logiciel gratuit de scan antivirus : https://github.com/cavo789/aesecure_quickscan (plus de 45.000 virus détectés, 700.000 fichiers sur liste blanche)​

        Commentaire


        • #5
          Juste un "détail" : Joomla 4.0 se débarrasse petit à petit de jQuery.

          Apprendre à développer en jQuery n'est-il pas un peu risqué pour un padawan ?
          woluweb aime ceci.
          If anything can go wrong, it will...If I can help, I will ..https://conseilgouz.com

          Commentaire


          • #6
            Oui, à terme fini jQuery

            D'ailleurs, le script pour mettre dans les sessions du JoomlaDay en "favori" dans un cookie, c'était du javascript pur
            Mais à ce stade (et en attendant d'avoir une semaine "à ne rien faire" pour me former), pour faire vite jQuery est pratique
            Présentations : slides.woluweb.be | Coordonnées complètes : www.woluweb.be

            Un message d’erreur sur votre site Joomla... ayez le reflexe de consulter la base de connaissance : https://kb.joomla.fr

            Ce forum, vous l'aimez ? Il vous a sauvé la vie ? Vous y apprenez régulièrement ? Alors adhérer à l'AFUJ, l'Association Francophone des Utilisateurs de Joomla : https://www.joomla.fr/association/adherer

            Commentaire


            • #7
              Envoyé par pmleconte Voir le message
              Bonjour Marc,

              J'ai fait une petite simplification, même si avoir 4 cookies ne me semble pas vraiment un problème. Donc, j'ai fusionné les 4 cookies dans un seul (la limite connue pour un cookie semble être de 4.000 caractères). De plus, pour simplifier ton jQuery, j'ai ajouté une classe choix à tes 4 zones.

              Code:
              jQuery(document).ready(function($){
              const Category = 0, Jour = 1, Level = 2, Fav = 3;
              var $fields = ["#category", "#jour", "#level", "#fav"];
              var $jdcookie = $.cookie("jdays");
              if ($jdcookie) {
              $jdcookie = $jdcookie.split(",")
              } else {
              $jdcookie = ["","","",""]; // vide : initialisation
              }
              $jdcookie.forEach(fillvals); // remplir les zones d'affichage
              if (($jdcookie[Category]) || ($jdcookie[Jour]) || ($jdcookie[Level]) || ($jdcookie[Fav] )) {
              // update the filters txs to the other script
              filterCategory($('.filtering select.filtrejour').val(), $('.filtering select.filtrecategory').val(), $('.filtering select.filtrelevel').val(), $('.filtering select.filtrefav').val());
              }
              // save changes de la classe choix
              $(".choix").on("change", function(){
              $id = $(this).attr('id'); // quelle zone ?
              $jdcookie[$fields.indexOf('#'+$id)] = $(this).val(); // sa valeur dans le cookie
              $.cookie("jdays", $jdcookie.join(","), {expires: 365, path: '/'})
              });
              function fillvals(item,index) {
              $($fields[index]).val($jdcookie[index]);
              }
              });
              Pascal

              PS: je ne connais pas ta fonction filterCategory, mais, je pense que l'on doit pouvoir supprimer le test if (($jdcookie[Category]) || ($jdcookie[Jour]) || ($jdcookie[Level]) || ($jdcookie[Fav] ))
              un bon exemple

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X