flip-toolkit pour filtrage ajax

Par Laurent Delannoy, il y a 2 ans

Javascript
PHP Symfony

Bonjour je suis la formation filtrage en Ajax, mais je reçois une erreur

import { Flipper } from 'flip-toolkit' /** * @property {HTMLElement} pagination * @property {HTMLElement} content * @property {HTMLElement} sorting * @property {HTMLFormElement} form */ export default class Filter { /** * * @param {HTMLElement | null} element */ constructor(element) { if (element === null) { return } //console.log('coucouuuuuuu') this.pagination = element.querySelector('.js-filter-pagination') this.content = element.querySelector('.js-filter-content') this.sorting = element.querySelector('.js-filter-sorting') this.form = element.querySelector('.js-filter-form') this.bindEvents() } /** * Ajoute les comportements aux différents éléments */ bindEvents() { const aClickListenr = e => { if (e.target.tagName === 'A') { e.preventDefault() this.loadUrl(e.target.getAttribute('href')) } } this.sorting.addEventListener('click', aClickListenr) this.pagination.addEventListener('click', aClickListenr) this.form.querySelectorAll('input[type=checkbox]').forEach(input => { input.addEventListener('change', this.loadForm.bind(this)) }) } async loadForm() { const data = new FormData(this.form) const url = new URL(this.form.getAttribute('action') || window.location.href) const params = new URLSearchParams() data.forEach((value, key) => { params.append(key, value) }) return this.loadUrl(url.pathname + '?' + params.toString()) } async loadUrl(url) { const ajaxUrl = url + '&ajax=1' const response = await fetch(ajaxUrl, { headers: { 'X-Requested-With': 'XMLHttpRequest' } }) if (response.status >= 200 && response.status < 300) { const data = await response.json() //this.content.innerHTML = data.content this.flipContent(data.content) this.sorting.innerHTML = data.sorting this.pagination.innerHTML = data.pagination history.replaceState({}, '', url) } else { console.error(response) } } /** * Remplace les éléments avec effet d'animation * @param {string} content */ flipContent(content) { const flipper = new Flipper({ element: this.content }) this.content.children.forEach(element => { flipper.addFlipped({ element, flipId: element.id }) }) flipper.recordBeforeUpdate() this.content.innerHTML = content this.content.children.forEach(element => { flipper.addFlipped({ element, flipId: element.id }) }) flipper.update() } }

Ce que je veux

Avoir un rendu flip

Ce que j'obtiens

Uncaught runtime errors:
ERROR
this.content.children.forEach is not a function
flipContent@http://localhost:8080/build/app.js:439:29
_callee2$@http://localhost:8080/build/app.js:409:20
tryCatch@http://localhost:8080/build/app.js:275:1357
./assets/modules/Filter.js/_regeneratorRuntime/makeInvokeMethod/<@http://localhost:8080/build/app.js:275:4182
./assets/modules/Filter.js/_regeneratorRuntime/defineIteratorMethods/</<@http://localhost:8080/build/app.js:275:2208
asyncGeneratorStep@http://localhost:8080/build/app.js:276:103
_next@http://localhost:8080/build/app.js:277:212
promise callbackasyncGeneratorStep@http://localhost:8080/build/app.js:276:242
_next@http://localhost:8080/build/app.js:277:212
promise callbackasyncGeneratorStep@http://localhost:8080/build/app.js:276:242
_next@http://localhost:8080/build/app.js:277:212
./assets/modules/Filter.js/_asyncToGenerator/</<@http://localhost:8080/build/app.js:277:369
./assets/modules/Filter.js/_asyncToGenerator/<@http://localhost:8080/build/app.js:277:97
loadUrl@http://localhost:8080/build/app.js:424:25
_callee$@http://localhost:8080/build/app.js:371:53
tryCatch@http://localhost:8080/build/app.js:275:1357
./assets/modules/Filter.js/_regeneratorRuntime/makeInvokeMethod/<@http://localhost:8080/build/app.js:275:4182
./assets/modules/Filter.js/_regeneratorRuntime/defineIteratorMethods/</<@http://localhost:8080/build/app.js:275:2208
asyncGeneratorStep@http://localhost:8080/build/app.js:276:103
_next@http://localhost:8080/build/app.js:277:212
./assets/modules/Filter.js/_asyncToGenerator/</<@http://localhost:8080/build/app.js:277:369
./assets/modules/Filter.js/_asyncToGenerator/<@http://localhost:8080/build/app.js:277:97
loadForm@http://localhost:8080/build/app.js:379:26
EventListener.handleEvent*./assets/modules/Filter.js/bindEvents/<@http://localhost:8080/build/app.js:354:15
bindEvents@http://localhost:8080/build/app.js:353:58
Filter@http://localhost:8080/build/app.js:335:10
./assets/app.js@http://localhost:8080/build/app.js:178:1
webpack_require@http://localhost:8080/build/runtime.js:28:33
webpack_exec@http://localhost:8080/build/app.js:484:67
@http://localhost:8080/build/app.js:485:406
__webpack_require__.O@http://localhost:8080/build/runtime.js:72:23
@http://localhost:8080/build/app.js:486:56
webpackJsonpCallback@http://localhost:8080/build/runtime.js:1216:46
@http://localhost:8080/build/app.js:1:53

9 réponses

Laurent Delannoy, il y a 2 ans

voici le résultat

<div class="grid js-filter-content">

Grafikart, il y a 2 ans

Et que donne .children ?

Laurent Delannoy, il y a 2 ans

Enfait, je récupère une collection, et c'est pour ça que je ne peux pas faire un forEach. Pourtant, j'ai suivi tout à la lettre

Grafikart, il y a 2 ans

Oui c'est étrange car normalement tu peux tout à fait faire un forEach sur une collection. Au pire pour convertir une collection en tableau tu peux faire un Array.from(this.content.children).forEach()

Laurent Delannoy, il y a 2 ans

HTMLCollection { 0: div#product-1.class.card, 1: div#product-2.class.card, 2: div#product-16.class.card, 3: div#product-17.class.card, 4: div#product-18.class.card, 5: div#product-19.class.card, 6: div#product-20.class.card, 7: div#product-6.class.card, 8: div#product-4.class.card, length: 9, … }

Grafikart, il y a 2 ans

Vérifie la valeur de this.content avec un console.log pour comprendre pourquoi e n'est pas l'élément attendu.

Laurent Delannoy, il y a 2 ans

J'ai déjà essayé mais ca ne passe pas, même avec Objet.entries ça plante

Laurent Delannoy, il y a 2 ans

Bon ben je sais pas pourquoi, maintenant ça passe, merci

Laurent Delannoy, il y a 2 ans

Je reviens vers Toi GraFikart: hier tout fonctionnait et aujourd'hui quand j'ai démarré le serveur:

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\laure\PhpstormProjects\circleofflavors\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
ERROR Failed to compile with 2 errors 16:55:15

error in ./node_modules/core-js/internals/is-constructor.js 16:55:15

Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

error in ./node_modules/core-js/internals/make-built-in.js 16:55:15

Module parse failed: Unexpected character '' (10:28)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Entrypoint app [big] 1.37 MiB = runtime.js 106 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ar-6bbff4.js 1.18 MiB app.css 382 bytes app.js 83.4 KiB
webpack compiled with 28 errors

voici ce que j'ai dans mon fichier make-built-in.js :

var uncurryThis = require('../internals/function-uncurry-this'); var fails = require('../internals/fails'); var isCallable = require('../internals/is-callable'); var hasOwn = require('../internals/has-own-property'); var DESCRIPTORS = require('../internals/descriptors'); var CONFIGURABLE_FUNCTION_NAME = require('../internals/function-name').CONFIGURABLE; var inspectSource = require('../internals/inspect-source'); var InternalStateModule = require('../internals/internal-state'); var enforceInternalState = Inullnullnullnull.......

https://1drv.ms/i/s!ApTy6lAHvKDhiKZXsJau6QNcdw5D7w?e=7UqlkL