amélioration javascript (jquery) pour le prochain JoomlaDay

[woluweb]

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

<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, {expires: 365, path: '/'})
  });
  jQuery("#jour").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("myjour", selection, {expires: 365, path: '/'})
  });
  jQuery("#level").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("mylevel", selection, {expires: 365, path: '/'})
  });
  jQuery("#fav").on("change", function(){
    var selection = jQuery(this).val();
    jQuery.cookie("myfav", selection, {expires: 365, path: '/'})
  });
});
</script> 

[pmleconte]

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.

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] ))

[woluweb]

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

[cavo789]

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.

:-)

[pmleconte]

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]

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

[dadi0111]

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.

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