[AJAX] add/delete via link

Jurgen assaasas

09/10/2008 09:19:00

Ik heb een aantal artikelen en ik zou deze graag dynamisch veranderen van status:

voorbeeld:

Code (php)

1
2
3
4
5
6
7
8
9

art nr        artikel        status
1              iets            actief
2              iets            actief
3              iets            inactief
4             iets            actief
5              iets            inactief
6              iets            actief
7              iets            inactief
8             iets            actief

Ik wil gebruik maken van het Mootools framework maar ik kan geen tuts/voorbeelden vinden die bij mijn probleem passen. De bedoeling is dus:

1. Ga naar pagina
2. Klik producten actief of inactief (dit moet dynamisch worden veranderd met ajax dus).

Ik wil 2 plaatjes een vinkje en een kruisje laten veranderen als er op wordt geklikt.

Gewijzigd op 01/01/1970 01:00:00 door Jurgen assaasas

PHP hulp

23/05/2012 20:38:56

Gesponsorde koppelingen:

stien ss

09/10/2008 12:02:00

Ok wat je doet is dit:

Je maak de links voor je status, de href maak je gewoon zoals je hem zou maken zonder ajax, deze links geef je een class ajax-link.

Hieronder heb ik een stukje met mootools geschreven (1.2) die ongeveer doet wat jij wil. Je moet in onSuccess nog even naar het goede statusObject verwijzen ik weet namelijk niet hoe je site in elkaar zit.

Ook de plaatjes zal je in onSuccess moeten veranderen, maar snap niet helemaal wat je bedoeld.

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

<?php
window.addEvent ( 'domready', function () {

    $$('a.ajax-link').each ( function (node) {

        node.addEvent ( 'click', function(e) {

            new Event(e).stop ();

            var Request = new Request ({ url: this.href,
                                         method: 'get',

                                         onSuccess: function ( responseText, responseXML ) {
                                            var statusObject = $('ietsdf');
                                            statusObject.set ( 'html', responseText );
                                         }.bind(this),

                                         onFailure: function () {
                                         }
                                       });

            Request.send ();

        });

    });

});
?>

* Ongetest

Gewijzigd op 01/01/1970 01:00:00 door stien ss

Jurgen assaasas

09/10/2008 14:20:00

Ik snap de syntax niet echt, ik begrijp niet wat er gebeurd.

Ik zal even een testpagina maken wat de bedoeling is.

Edit: hier een voorbeeld:

Klik!

Deze gegevens komen dus uit een database

Gewijzigd op 01/01/1970 01:00:00 door Jurgen assaasas

stien ss

09/10/2008 16:00:00

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

<?php
// Als de site geladen is (domready event) dan voeren we de gegeven functie uit
    window.addEvent ( 'domready', function () {

        // We gaan door elke link met class ajax-link loopen
        $$('a.ajax-link').each ( function (node) {

            // Als op deze node geklikt wordt, dan gaan we de gegeven functie uitvoeren
            node.addEvent ( 'click', function(e) {

                // Normaal als je op een link klinkt wordt een andere pagina geladen, dit moet niet meer
                new Event(e).stop ();

                // We gaan een ajax request maken met de href van de link
                // Als deze request slaagt dan wordt onSuccess uitgevoerd en veranderen we het plaatje van de img
                // Normaal gesproken verwijst this in onSuccess naar het Request object, maar dit willen we niet
                // Daarom gebruik ik .bind(this). Dat betekend dat als we nu this gebruiken in de onSuccess functie we verwijzen naar het link object, niet naar het request object
                //
                // In javascript kan je {} voor een array. Dus {url: this.href} zou in php betekenen: array ( 'url' => this.href)
                var r = new Request.HTML ({ url: this.href,
                                             method: 'get',

                                             onSuccess: function ( responseText, responseXML ) {
                                                this.set ( 'src', ( this.get('src') == 'false.png') ? 'true.png' : 'false.png' );

                                             }.bind(this),

                                             onFailure: function () {
                                                alert ( 'foutje' );

                                             }

                                           });

                // Verzend het request
                r.send ();

            });

        });

    });
?>

Heb er wat commentaar bij gedaan, hopelijk begrijp je het zo een beetje.

Je moet wel elke link naar een goede php file laten verwijzen, bijvoorbeeld:
changeState.php?id=(nummer)

Gewijzigd op 01/01/1970 01:00:00 door stien ss

Henk PHP

09/10/2008 16:20:00

Je maakt eerst een map met die ajax heet of iets dergelijks, met je php bestanden.
bijvoorbeeld:

ajax/changestatus.php

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php

$id = $_GET['id'];
$action = $_GET['action'];

if($action == 1) { $status = 1; } else { $status = 0; }

$sql = "UPDATE artikelen SET status = " . mysql_real_escape_string($status) . " WHERE id = " . mysql_real_escape_string($id) . "";

$query = mysql_query($sql) or die(mysql_error());
if($query){

echo $action;
}

?>

Daar kan je dus dingen in je database veranderen. Uiteraard moet je dat nog even (goed) beveiligen. het werkt zo: 'ajax/changestatus.php?id=10&action=1'

- action = 1 is actief en 0 is inactief -

Nu hebt je de volgende javascript:

(met mootools 1.11 btw)

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

Daarmee kun je dus met een link een changestatus doen.
zobijvoorbeeld:

Code (php)

<a href="#" class="changestatus" rel="1" rev="0">vinkje</a></td></tr>';

rel = artikel id
rev = actie (dus of het inactief of actief moet worden, in dit geval inactief.

Dan heb je bijvoorbeeld zo je index.php (of w/e :P)

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

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
    $$('.changestatus').each(function(el) {
            el.addEvent('click', function(e){
           e = new Event(e).stop();

           var id = el.rel;
           var action = el.rev;

                var url = "ajax/changestatus.php";
                url = url + "?id=" + id;
                url = url + "&action=" + action;

           new Ajax(url, {
            method: 'get',
            update: $(el)
            }).request();

            if(el.rev == 0) { el.rev = 1 } else { el.rev = 0 }

});

    });
               });
</script>
</head>
<?php

$sql = "SELECT * FROM artikelen";
$query = mysql_query($sql) or die(mysql_error());

echo '<table border=1 width=600>';
echo '<tr><td>id</td><td>titel</td><td>status</td></tr>';
while($row = mysql_fetch_assoc($query))
{

    if($row['status'] == 1) { $action = 0; } else { $action = 1; }
    echo '<tr><td>' . $row['id'] . '</td>
    <td>' . $row['titel'] . '</td><td>
    <a href="#" class="changestatus" rel="' . $row['id'] . '" rev="' . $action . '">' . $row['status'] . '</a></td></tr>';


}

echo '</table>';
?>

</body>
</html>

Zo moet het ongeveer werken.

hier staat een werkend voorbeeld online.

Gewijzigd op 01/01/1970 01:00:00 door Henk PHP

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!