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
}
}
}
}
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()
}
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
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.