Rechargement de script après requête AJAX

Par JeremieMeunier, il y a 9 ans

Javascript

Bonsoir,

J'utilise un système de recherche en AJAX qui m'affiche dynamiquement les résultats de la recherche.
Sur ces résultats, j'ai des boutons de partages et un script JS qui me les récupère et ajoute des event seulement les résultats chargés dynamiquement n'ont pas ces event puisqu'au chargement de la page ils n'existait pas !

J'aurais donc aimé savoir si il existait un moyen de recharger les script en question ?

(function () { var popUpCenter = function (url, title, width, height) { var popUpWidth = width || 640 var popUpHeight = height || 360 var windowLeft = window.screenLeft || window.screenX var windowTop = window.screenTop || window.screenY var windowWidth = window.innerWidth || document.documentElement.clientWidth var windowHeight = window.innerHeight || document.documentElement.clientHeight var popUpLeft = windowLeft + windowWidth / 2 - popUpWidth / 2 var popUpTop = windowTop + windowHeight / 2 - popUpHeight / 2 var popup = window.open(url, title, 'scrollbars=yes, width=' + popUpWidth + ', height=' + popUpHeight + ', top=' + popUpTop + ', left=' + popUpLeft) popUp.focus() return true } var twitterS = document.querySelectorAll('.sharer.twitter') var facebookS = document.querySelectorAll('.sharer.facebook') var googleS = document.querySelectorAll('.sharer.google') for(var i = 0; i < twitterS.length; i++) { var twitter = twitterS[i] twitter.addEventListener('click', function (e) { e.preventDefault() var url = this.getAttribute('data-url') var shareUrl = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(document.title) + "&via=pad_books" + "&url=" + encodeURIComponent(url) popUpCenter(shareUrl, "Partager sur Twitter") }) } for(var j = 0; j < facebookS.length; j++) { var facebook = facebookS[j] facebook.addEventListener('click', function (e) { e.preventDefault() var url = this.getAttribute('data-url') var shareUrl = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url) popUpCenter(shareUrl, "Partager sur Facebook") }) } for(var k = 0; k < googleS.length; k++) { var google = googleS[k] google.addEventListener('click', function (e) { e.preventDefault() var url = this.getAttribute('data-url') var shareUrl = "https://plus.google.com/share?url=" + encodeURIComponent(url) popUpCenter(shareUrl, "Partager sur Google+") }) } })() var search = document.querySelector('form.ajax-search') var filter_S = document.querySelectorAll('span.search.sort-span') var body = document.querySelector('body') var select_S = document.querySelectorAll('select.search') var searcher = search.querySelector('i.fa.fa-search') var clear = search.querySelector('i.fa.fa-times') searcher.addEventListener('click', function(e) { sendSearch() }) clear.addEventListener('click', function(e) { var input = search.querySelector('input.header-search-input') input.value = '' }) search.addEventListener('submit', function(e) { e.preventDefault() sendSearch() }) for(var i = 0; i < filter_S.length; i++) { var filter = filter_S[i] filter.addEventListener('click', function(e) { e.preventDefault() var sort = this.getAttribute('data-sort') var icon = this.querySelector('i.fa') var name = this.getAttribute('data-sort-name') if(sort === '') { this.setAttribute('data-sort', 'asc') icon.classList.remove('fa-sort') icon.classList.add('fa-sort-asc') search.setAttribute('data-sort-' + name, 'asc') sendSearch() } else if(sort === 'asc') { this.setAttribute('data-sort', 'desc') icon.classList.remove('fa-sort-asc') icon.classList.add('fa-sort-desc') search.setAttribute('data-sort-' + name, 'desc') sendSearch() } else { this.setAttribute('data-sort', '') icon.classList.remove('fa-sort-desc') icon.classList.add('fa-sort') search.setAttribute('data-sort-' + name, 'noApplicable') sendSearch() } }) } for(var i = 0; i < select_S.length; i++) { var select = select_S[i] select.addEventListener('change', function(e) { e.preventDefault() var value = this.value this.setAttribute('data-sort', value) var sort = this.getAttribute('data-sort') var name = this.getAttribute('data-sort-name') search.setAttribute('data-sort-' + name, sort) sendSearch() }) } function sendSearch() { if(search.getAttribute('data-redirect')) { var redirect = search.getAttribute('data-redirect') setTimeout(function() { window.location.href = redirect }, 2000) } var xhr_form = new XMLHttpRequest() var data = new FormData(search) var reload_S = document.querySelectorAll('script[data-reload]') var actionPage = search.getAttribute('data-action-page') var filterDate = search.getAttribute('data-sort-date') var filterPrice = search.getAttribute('data-sort-price') var filterType = search.getAttribute('data-sort-type') var filterCategory = search.getAttribute('data-sort-category') var actionNew = actionPage + '?filter=' + filterDate + '|' + filterPrice + '|' + filterType + '|' + filterCategory search.setAttribute('action', actionNew) xhr_form.open('POST', search.getAttribute('action'), true) xhr_form.setRequestHeader('X-Requested-With', 'xmlhttpsrequest') xhr_form.send(data) body.classList.add('loading') xhr_form.onreadystatechange = function () { if(xhr_form.readyState === 4) { body.classList.remove('loading') for(var i = 0; i < reload_S.length; i++) { //Rechargements des scripts } if(xhr_form.status != 200) { //L'opé à loupé } else { //L'opé à réussis var response = xhr_form.responseText var content = document.querySelector('.results-content') content.innerHTML = response } } } }

3 réponses

quentin_ney, il y a 9 ans

Salut,

Je pense que tu peux trouver la réponse à ta question dans cette vidéo. Avec la fonction .on(), tu ne seras pas obligé de rebinder tes événements sur chaque élément que tu ajoutes

Lartak, il y a 9 ans

Bonjour.
@quentin_ney: C'est en effet une solution, mais comme tu peux le voir dans tout le code qu'il présente, il n'utilise pas jQuery, il doit donc plutôt attendre une solution qui ne le contraint pas à devoir utiliser une librairie ou un framework juste pour cette spécificité.
Ce serait quand même dommage de lui faire charger une librairie juste pour ça, bien que s'il ne charge que la version slim le poids sera moindre.

quentin_ney, il y a 9 ans

Ce que tu peux faire sans avoir recours à Jquery, c'est d'entourer ton premier code par

function bindResults() { // ton code }

au lieu de

(function () { // ton code })()

Pense bien à inclure ce fichier dans ta page HTML avant celui de ta deuxième partie de code.
Ensuite, lorsque tu récupères tes résultats, fais appel à la fonction déclarée avant.

} else { //L'opé à réussis var response = xhr_form.responseText var content = document.querySelector('.results-content') content.innerHTML = response bindResults() }