[AJAX] add/delete via link
voorbeeld:
Code (php)
1
2
3
4
5
6
7
8
9
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
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
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
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 ();
});
});
});
?>
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
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
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
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 ();
});
});
});
?>
// 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
bijvoorbeeld:
ajax/changestatus.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
?>
$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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 }
});
});
});
$$('.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 }
});
});
});
Daarmee kun je dus met een link een changestatus doen.
zobijvoorbeeld:
Code (php)
1
<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
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>
<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