Jquey en Ajax
Ik begin vandaag voor het eerst met Jquery. Ik heb nu het volgende:
Code (php)
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
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
function product( code )
{
$('body').append('<div id="overlay"></div><div id="lightbox" align="center"><div id="prodinfo"></div></div>');
var arrPageSizes = _getPageSize();
$('#overlay').css({
backgroundColor: '#000',
opacity: '0.8',
height: arrPageSizes[1]
}).fadeIn();
var arrPageScroll = _getPageScroll();
$('#lightbox').css({
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
left: arrPageScroll[0]
}).show();
$.get("../dlginh/producten.php", { artikelnr: code },
function(data){
$("#prodinfo").ajaxSuccess(function(){
$(this).html(data);
});
$("#prodinfo").slideDown("slow");
});
}
{
$('body').append('<div id="overlay"></div><div id="lightbox" align="center"><div id="prodinfo"></div></div>');
var arrPageSizes = _getPageSize();
$('#overlay').css({
backgroundColor: '#000',
opacity: '0.8',
height: arrPageSizes[1]
}).fadeIn();
var arrPageScroll = _getPageScroll();
$('#lightbox').css({
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
left: arrPageScroll[0]
}).show();
$.get("../dlginh/producten.php", { artikelnr: code },
function(data){
$("#prodinfo").ajaxSuccess(function(){
$(this).html(data);
});
$("#prodinfo").slideDown("slow");
});
}
Dit werkt perfect, in IE en Chrome. In FireFox werkt het ook goed!, alleen dan kan ik het stukje javascript wat op de pagina staat die ingeladen wordt niet gebruiken. In IE en Chrome werkt dit echter wel.
De pagina die in geladen wordt:
Code (php)
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div id="prodimg">
<script type="text/javascript">
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("alt");
var largeAlt = $(this).attr("title");
$("#largeIMG").attr({ src: largePath, alt: largeAlt });
return false;
});
});
</script>
<style type="text/css">
#largeIMG {
border: solid 1px #ccc;
width: 200px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 30px;
height: 30px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>
</head>
<body>
<p><img id="largeIMG" src="/versie 7/prodafb/prod/70310.jpg" alt="Large image" /></p>
<p class="thumbs">
<a alt="/versie 7/prodafb/prod/70320.jpg" title="Image 1"><img src="/versie 7/prodafb/prod/70320.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70312.jpg" title="Image 2"><img src="/techid/versie 7/prodafb/prod/70312.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70314.jpg" title="Image 3"><img src="/versie 7/prodafb/prod/70314.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70316.jpg" title="Image 4"><img src="/versie 7/prodafb/prod/70316.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70318.jpg" title="Image 5"><img src="/versie 7/prodafb/prod/70318.jpg" /></a>
</p>
<div class="clear"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("alt");
var largeAlt = $(this).attr("title");
$("#largeIMG").attr({ src: largePath, alt: largeAlt });
return false;
});
});
</script>
<style type="text/css">
#largeIMG {
border: solid 1px #ccc;
width: 200px;
padding: 5px;
}
.thumbs img {
border: solid 1px #ccc;
width: 30px;
height: 30px;
padding: 4px;
}
.thumbs img:hover {
border-color: #FF9900;
}
</style>
</head>
<body>
<p><img id="largeIMG" src="/versie 7/prodafb/prod/70310.jpg" alt="Large image" /></p>
<p class="thumbs">
<a alt="/versie 7/prodafb/prod/70320.jpg" title="Image 1"><img src="/versie 7/prodafb/prod/70320.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70312.jpg" title="Image 2"><img src="/techid/versie 7/prodafb/prod/70312.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70314.jpg" title="Image 3"><img src="/versie 7/prodafb/prod/70314.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70316.jpg" title="Image 4"><img src="/versie 7/prodafb/prod/70316.jpg" /></a>
<a alt="/versie 7/prodafb/prod/70318.jpg" title="Image 5"><img src="/versie 7/prodafb/prod/70318.jpg" /></a>
</p>
<div class="clear"></div>
</div>
iemand een idee waarom javascript niet werkt op de pagina die ingeladen wordt in FF?
Gewijzigd op 01/01/1970 01:00:00 door Robin
Dat hij die niet nog eens kan inladen?
Verder zie ik namelijk niets mis. Geeft firebug ook geen melding?
Maar waarin moet ik $(document) veranderen?