[Ajax] Data van output scheiden. Efficiëntie?
Per 'lampje' heb ik een div gemaakt, die door ajax verwisseld word door innerHTML. Maar eigenlijk vind ik dit best lelijk.
Ik wou het eerst met alleen js doen door de src te veranderen, maar ik moest ook de URL wijzigen, dus dat was niet voldoende.
Dus mijn vraag, is er een andere manier om dit aan te pakken? Dus beetje data van output scheiden..
Code (php)
1
<a class="bulboff" id="bulb1" onclick="action()"></a>
doen, maar dan moet je in de style de a op display:block zetten en de afbeelding van een lampje als background van die a doen. Pas je met je JS de id van de
Code (php)
1
2
3
2
3
<a class="bulboff" id="bulb1" onclick="action()"></a>
naar
<a class="bulbon" id="bulb1" onclick="action()"></a>
naar
<a class="bulbon" id="bulb1" onclick="action()"></a>
Op deze manier worden ook de afbeeldingen gecashed en eigenlijk heb je helemaal geen AJAX meer nodig. :)
Edit:
Ik heb onderstaande code even uitgewerkt ;)
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
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Robert Deiman">
<title>Lightswitch</title>
<script type="text/javascript">
function switchlight(id){
//var lightid = document.getElementById(id)
if(id.className == 'lighton'){
id.className = 'lightoff';
}
else if(id.className == 'lightoff'){
id.className = 'lighton';
}
//document.write(id.class);
}
</script>
<style type="text/css">
a {
display:block;
height:16px;
width:16px;
cursor:pointer;
}
a.lighton{
background:#ffffff url('lightbulb.png') no-repeat;
}
a.lightoff{
background:#ffffff url('lightbulb_off.png') no-repeat;
}
</style>
</head>
<body>
<a class="lighton" id="light1" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light2" onclick="switchlight(this)"></a><br />
<a class="lightoff" id="light3" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light4" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light5" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light6" onclick="switchlight(this)"></a>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Robert Deiman">
<title>Lightswitch</title>
<script type="text/javascript">
function switchlight(id){
//var lightid = document.getElementById(id)
if(id.className == 'lighton'){
id.className = 'lightoff';
}
else if(id.className == 'lightoff'){
id.className = 'lighton';
}
//document.write(id.class);
}
</script>
<style type="text/css">
a {
display:block;
height:16px;
width:16px;
cursor:pointer;
}
a.lighton{
background:#ffffff url('lightbulb.png') no-repeat;
}
a.lightoff{
background:#ffffff url('lightbulb_off.png') no-repeat;
}
</style>
</head>
<body>
<a class="lighton" id="light1" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light2" onclick="switchlight(this)"></a><br />
<a class="lightoff" id="light3" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light4" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light5" onclick="switchlight(this)"></a><br />
<a class="lighton" id="light6" onclick="switchlight(this)"></a>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
Jouw script veranderd de class (en dus het plaatje) alleen maar. Of begrijp ik het verkeerd?
Zet om die linkjes een div met een bepaald id (bijv "lightdiv"). Zet in je database bijvoorbeeld
id - status
1 - on
2 - off
enz..
Daar haal je je gegevens uit en je zet met javascript (AJAX) de innerHTML van de lightdiv. Zou al mooier werken dan een het werken met de afbeeldingen zoals jij doet.
id - active
1 - 0
2 - 0
3 - 1
5 - 1
6 - 0
0 is uit en 1 is aan, uiteraard.
Maar ik werk al met divjes om de image en link heen.. Alleen ik dacht meer aan iets dat de response "id=3&active=on" is en dat ik dan met JS de rest afhandel.
Nu is het gewoon in de DB update en dan het correcte plaatje met link outputten in de response..