[Jquery, AJAX] Dynamic Content
Ik heb een probleempje. Met de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
function ajaxLoad(str){
if (str==""){
document.getElementById("contentarea").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("contentarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","datafetch.php?id="+str,true);
xmlhttp.send();
}
</script>
function ajaxLoad(str){
if (str==""){
document.getElementById("contentarea").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("contentarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","datafetch.php?id="+str,true);
xmlhttp.send();
}
</script>
Hiermee laad ik met de url: <a href="#" onclick="ajaxLoad(this.id);" id="16"> de pagina datafetch.php?id=16 in op de plek van <div id="contentarea">.
Nu komt het, op de plek wil ik namelijk een aantal plaatjes weergeven die te openen zijn door middel van een lightbox. Deze lightbox wordt met de onderstaande code toegevoegd:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<a href="images/pic08.jpg"
data-target="flare"
data-flare-scale="fit"
data-flare-gallery="gallery2"
data-flare-thumb="images/pic08.jpg"
data-flare-bw="images/pic08.jpg"
class="image">
<img src="images/pic08.jpg" alt="project" style="width:280px;" /></a>
data-target="flare"
data-flare-scale="fit"
data-flare-gallery="gallery2"
data-flare-thumb="images/pic08.jpg"
data-flare-bw="images/pic08.jpg"
class="image">
<img src="images/pic08.jpg" alt="project" style="width:280px;" /></a>
Alleen nu komt het, open ik de lightbox op de pagina zelf dan doet hij het. Ga ik naar datafetch.php?id=16 dan doet hij het ook! Maar laad ik de content via de ajax op de pagina, dan doet hij het dus niet.
Weet iemand hier een oplossing voor?
Alvast bedankt!
Erwin H op 04/02/2013 16:28:19:
Grote kans dat te maken heeft met hoe de lightbox functionaliteit wordt gebonden aan de elementen. Waarschijnlijk wordt dat gedaan door na het laden van de pagina de event handlers aan de op dat moment op de pagina aanwezige elementen te binden. Die bindingen bestaan dan, maar laadt je daarna nieuwe elementen op de pagina, dan zijn de events daar niet aan gebonden. Je zult die event handlers dan dus na de ajax load aan die nieuwe elementen moeten binden.
Hmm ja, ik snap hem al. Ik moet hem namelijk zo in de pagina zetten:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<link href="js/pe.flare/jquery.pixelentity.flare.min.css" rel="stylesheet"/>
<script type="text/javascript" src="js/pe.flare/jquery.pixelentity.flare.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('a[data-target="flare"]').peFlareLightbox();
});
</script>
<head>
<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<link href="js/pe.flare/jquery.pixelentity.flare.min.css" rel="stylesheet"/>
<script type="text/javascript" src="js/pe.flare/jquery.pixelentity.flare.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(function($){
$('a[data-target="flare"]').peFlareLightbox();
});
</script>
Gewijzigd op 04/02/2013 16:56:18 door Mitchell van de Ree