Jeg er ved at programmere en webshop, men er stødt på et problem, jeg håber I kan hjælpe mig med.
Jeg har en <div> med ID'en "kurvFelt" der indeholder antallet af varer (f.eks. "3 varer"). Jeg har lavet en funktion til at opdatere denne div:
function opdaterKurvFelt()
{
varer = <?php echo mysql_num_rows(mysql_query("SELECT * FROM indkoebskurv")); ?>;
if(varer == 1)
{
tekst = '1 vare';
}
else
{
tekst = varer + ' varer';
}
document.getElementById('kurvFelt').innerHTML=tekst;
}Jeg véd at PHP-delen virker, så den behøver vi ikke tænke på
Når jeg loader siden, kører jeg funktionen lige efter <div>'en er indlæst, og det virker.
Men her kommer problemet så:
Når jeg klikker på et billede, skal funktionen tilfoej_vare() køres, og når varen er tilføjet, skal opdaterKurvFelt() køres igen, så jeg lige kan få det nye antal varer vist. tilfoej_vare() virker som den skal, men siden opfører sig som om, den ikke kører opdaterKurvFelt() efter jeg har tilføjet en vare til kurven. Jeg har gjort koden lidt mere simpel, så den er lidt lettere at finde rundt i (skal køres i firefox):
<?php
include("func_mainpage.php");
include("settings.php");
mysql_connect($mysql_host, $mysql_username, $mysql_password) or die(mysql_error());
mysql_select_db($mysql_database) or die(mysql_error());
?>
<head>
<title>
Webshop
</title>
<script type="text/javascript">
function opdaterKurvFelt()
{
varer = <?php echo mysql_num_rows(mysql_query("SELECT * FROM indkoebskurv")); ?>;
if(varer == 1)
{
tekst = '1 vare';
}
else
{
tekst = varer + ' varer';
}
document.getElementById('kurvFelt').innerHTML=tekst;
}
function tilfoej_vare(vareid)
{
var xmlHttp;
xmlHttp=new XMLHttpRequest();
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==1)
{
document.getElementById('tekst' + vareid).innerHTML='Tilføjer til kurv...';
}
if(xmlHttp.readyState==4)
{
document.getElementById('tekst' + vareid).innerHTML=xmlHttp.responseText;
opdaterKurvFelt();
}
}
xmlHttp.open("GET","yay.php?vareid=" + vareid + "&variant=" + document.getElementById('variant' + vareid).value,true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id="kurvFelt"></div>
<script type="text/javascript">
opdaterKurvFelt();
</script>
<select id="variant12" style="display: none">
<option value="0" selected>0</option>
</select>
<img src="laeg_i_kurv.png" onclick="tilfoej_vare(12);">
<div id="tekst12"></div>
</body>
</html>