Probleem met Ajax en Colorbox
Ik heb een website die per product ID bepaalde afbeeldingen laat zien. Elk product heeft meerdere kleuren en ik heb een AJAX navigatie ingebouwd om van kleur te verwisselen en de bijhorende foto's te laten zien.
Colorbox werkt normaal wanneer ik de pagina voor het eerst laad. Maar nadat ik AJAX gebruik om de volgende kleur op te roepen werkt Colorbox niet meer als ik op een foto druk.
Ik gebruik hierbij 2 DIV's, een Div voor de 'hoofdfoto' met de product details.
De andere Div is voor de sfeerfoto's van het product. Hierin worden meerdere foto's getoond.
Class='group1' staat voor de colorbox manier die gebruikt moet worden.
Hoe krijg ik de colorbox werkend nadat ik een ajax request heb gedaan? // Alle plaatjes laden wel correct in de twee div's.
Hierbij de code van mijn website als die voor het eerst geladen is:
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
});
</script>
<script type="text/javascript">
function getXMLRequest() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
var xmlhttp = getXMLRequest();
function showUser(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto1").innerHTML=xmlhttp.responseText;
showUser2(str);
}
}
xmlhttp.open("GET","getimage.php?q="+str,true);
xmlhttp.send();
}
function showUser2(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getimage2.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<? include_once ("header.php");?>
<div id="body">
<div id="foto1" class="links" align="center" style="vertical-align:middle;">
<p><?php echo $extraimages;?></p>
</div>
<div id="foto2" class="midden">
<table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr>
<td width="19%" valign="top"><a class="group1" href="inventory_images/<?php echo $id; ?>.jpg" title="<?php echo $product_name; ?>"><img src="inventory_images/resized_<?php echo $id; ?>.jpg" width="350" height="400" alt="<?php echo $product_name; ?>" /></a><br />
</td>
<td width="81%" valign="top"><h3><?php echo $product_name; ?></h3>
<p><?php echo $product_id; ?><br />
<p><?php echo "€".$price; ?><br />
<br />
<?php echo "$category"; ?> <br />
<br />
<?php echo $details; ?>
<br />
</p>
<form id="form1" name="form1" method="post" action="cart.php">
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<input type="submit" name="button" id="button" value="Add to Shopping Cart" />
</form>
<img id="329" src='product_images/chroom.png' width='25' height='25' onclick="showUser(this.id)"><img id="330" src='product_images/brons.png' width='25' height='25' onclick="showUser(this.id)">
</td>
</tr>
</table>
</div>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1'});
});
</script>
<script type="text/javascript">
function getXMLRequest() {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
var xmlhttp = getXMLRequest();
function showUser(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto1").innerHTML=xmlhttp.responseText;
showUser2(str);
}
}
xmlhttp.open("GET","getimage.php?q="+str,true);
xmlhttp.send();
}
function showUser2(str)
{
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("foto2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getimage2.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<? include_once ("header.php");?>
<div id="body">
<div id="foto1" class="links" align="center" style="vertical-align:middle;">
<p><?php echo $extraimages;?></p>
</div>
<div id="foto2" class="midden">
<table width="100%" border="0" cellspacing="0" cellpadding="15">
<tr>
<td width="19%" valign="top"><a class="group1" href="inventory_images/<?php echo $id; ?>.jpg" title="<?php echo $product_name; ?>"><img src="inventory_images/resized_<?php echo $id; ?>.jpg" width="350" height="400" alt="<?php echo $product_name; ?>" /></a><br />
</td>
<td width="81%" valign="top"><h3><?php echo $product_name; ?></h3>
<p><?php echo $product_id; ?><br />
<p><?php echo "€".$price; ?><br />
<br />
<?php echo "$category"; ?> <br />
<br />
<?php echo $details; ?>
<br />
</p>
<form id="form1" name="form1" method="post" action="cart.php">
<input type="hidden" name="pid" id="pid" value="<?php echo $id; ?>" />
<input type="submit" name="button" id="button" value="Add to Shopping Cart" />
</form>
<img id="329" src='product_images/chroom.png' width='25' height='25' onclick="showUser(this.id)"><img id="330" src='product_images/brons.png' width='25' height='25' onclick="showUser(this.id)">
</td>
</tr>
</table>
</div>
Arthur Ru op 21/12/2011 11:03:29:
Bedankt Aar voor je snelle reactie. Ik begin net met Javascript/AJAX, ik weet niet precies wat je hiermee bedoeld. Bedoel je dat ik mijn AJAX code moet ombouwen naar jQuery?
Jep, en deze functie werkt veel makkelijker dan de manier die je nu gebruikt. Aan deze link zal je zeker wat hebben als je de basis van JQuery kent.
Gewijzigd op 21/12/2011 11:10:09 door - Ariën -
Alleen nu heb ik het probleem dat na het laden kan hij niet meer terug naar het vorige product ID.
Als ik op het Bronze afbeelding (ID=330) druk werkt het. Dan op de wat ajax returned (praktisch zelfde output) niet meer terug als ik bv op de Chroom afbeelding (ID=329) druk.
Ik denk dat dit te maken heeft met mijn: var target = $(this).attr("id"); ?
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajaxSettings.async = false;
$(".try").click(function(){
var target = $(this).attr("id");
$('#txtHint').load('getimage.php?q='+target);
$('#txtHint2').load('getimage2.php?q='+target);
$("a:#cbox").addClass("group1");
$(".group1").colorbox({rel:'group1'});
});
});
</script>
<img class="try" id="329" src='product_images/chroom.png' width='25' height='25'><img class="try" id="330" src='product_images/brons.png' width='25' height='25'>