Discussion :

[micker]

hello a tous je bute sur l'intégration de shuffle.js ...
https://www.com3elles.com/formation.html
la zone de recherche devrait être réactive ....
mais cela me renvois cette erreur

Uncaught TypeError: Cannot read property 'textContent' of null
at HTMLAnchorElement.<anonymous> (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:195)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at 769f626d67bfc69fcea38a9cdfa58d55_0.js:479
at Array.forEach (<anonymous>)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at e.value (769f626d67bfc69fcea38a9cdfa58d55_0.js:479)
at Demo._handleSearchKeyup (components/com_flexicontent/templates/fiche-realisation-2/js/flexishuffle.js:180)

dans mon js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// Advanced filtering
Demo.prototype.addSearchFilter = function () {
  var searchInput = document.querySelector('.js-shuffle-search');
  if (!searchInput) {
    return;
  }
  searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
/**
 * Filter the shuffle instance by items with a title that matches the search input.
 * @param {Event} evt Event object.
 */
Demo.prototype._handleSearchKeyup = function (evt) {
  var searchText = evt.target.value.toLowerCase();
  this.shuffle.filter(function (element, shuffle) {
    // If there is a current filter applied, ignore elements that don't match it.
    if (shuffle.group !== Shuffle.ALL_ITEMS) {
      // Get the item's groups.
      var groups = JSON.parse(element.getAttribute('data-groups'));
      var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
      // Only search elements in the current group
      if (!isElementInCurrentGroup) {
        return false;
      }
    }
    var titleElement = element.querySelector('.picture-item__title');
    var titleText = titleElement.textContent.toLowerCase().trim();
    return titleText.indexOf(searchText) !== -1;
  });
};

Dans mon html la balise est ok

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div class=" filters-group">
        <input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" placeholder="Rechercher">
    </div>

et à la fin de mon js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
   document.addEventListener('DOMContentLoaded', function () {
 
  window.demo = new Demo(document.getElementById('grid'));
 
});

Merci d'avance !

[SpaceFrog]

Heu il est ou le jquery là dedans ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
   var titleElement = element.querySelector('.picture-item__title');
    var titleText = titleElement.textContent.toLowerCase().trim();

queryselector retourne une collection ...
une selection ne peut pas avori de textcontent
le text content s'applique aux éléments individuels de la collection

=>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
      var titleElement = element.querySelector('.picture-item__title')[0];
    var titleText = titleElement.textContent.toLowerCase().trim();

[danielhagnoul]

Si l'on recherche un élément du DOM avec le nom d'une classe, querySelector( '.classe' ) donnera automatiquement la valeur du premier de la série qui sera ou non celui souhaité. Alors que querySelectorAll( '.classe' ) renverra une collection de nodes et alors [0] aura un sens.

Ici c'est la valeur contenue dans le paramètre "element" qui doit être en cause.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
Demo.prototype._handleSearchKeyup = function (evt) {
  var searchText = evt.target.value.toLowerCase();
  this.shuffle.filter(function (element, shuffle) {
    console.log( element ); // ?
  });
};

[micker]

bon le [0] renvoi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

flexishuffle.js:195 Uncaught TypeError: Cannot read property '0' of null

... apres le console log me renvois toujour le premier lien de ma liste ...
je me suis basé sur sur la doc
https://vestride.github.io/Shuffle/#advanced-filters

[SpaceFrog]

Ton objet n'est pas instancié au moment ou tu l'invoques.

[micker]

j'avoue que je ne vois pas trop la solution (en fonction de mes compétences) .. tu peu m'en dire plus ?

[SpaceFrog]

html et js sont interprétés chronologiquement ...
donc si ta ligne avec getElementById est placés dans le code avant le code html de la balise ciblée ...

[micker]

donc mon script est serait chargé .. trop tot ... pourtant j'ai bien mis le script en defer ....

[NoSmoking]

Bonjour,
si c'est ce code qui fait planter ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var titleElement = element.querySelector('.picture-item__title');
var titleText = titleElement.textContent.toLowerCase().trim();

... il te faut regarder si tu as bien un élément dans ton document dont la classe de style vaut picture-item__title.

[micker]

cool j'ai trouver grace a toi ! merci

[SpaceFrog]

Ton objet n'est pas instancié au moment ou tu l'invoques.