[Ajax] Data van output scheiden. Efficiëntie?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Gerben Jacobs

Gerben Jacobs

26/10/2007 15:10:00
Quote Anchor link
http://theonewithout.srhost.info/ (Langzame gratis host, maar wel grappig. Probeer ze allemaal maar aan te kijgen voordat de eerst xmlhttprequest binnen komt ;P)

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..
 
PHP hulp

PHP hulp

28/03/2024 11:04:00
 
Robert Deiman

Robert Deiman

26/10/2007 16:23:00
Quote Anchor link
Kan wel prima met een div. Je kan ook een
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<a class="bulboff" 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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
 
Gerben Jacobs

Gerben Jacobs

26/10/2007 16:53:00
Quote Anchor link
Ja maar het wordt opgeslagen in de DB, dus ik heb die AJAX wel nodig.

Jouw script veranderd de class (en dus het plaatje) alleen maar. Of begrijp ik het verkeerd?
 
Robert Deiman

Robert Deiman

26/10/2007 18:13:00
Quote Anchor link
Klopt, maar ook dat kan je bijvoorbeeld met AJAX naar de database schrijven en weer uitlezen.

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.
 
Gerben Jacobs

Gerben Jacobs

26/10/2007 23:57:00
Quote Anchor link
Het is op het moment

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..
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.