Volgersysteem
Ik wil graag een 'volgsysteem' maken zoals bijvoorbeeld op Twitter. Waarbij je dus op 'Follow' kan klikken waarbij je iemand kan volgen. Ik heb even een versimpelde opzet gemaakt, maar loop een beetje vast.
Het MYSQL-deel kan ik wel - heb ik nog even weggelaten - alleen ben ik niet zo handig met javascript/jQuery deel. Hoe kan ik dat vervolgens doen dat de button op de pagina verandert van Follow naar Unfollow als iemand er (succesvol) op heeft geklikt?
Is tot dusver zo in orde? En is Ajax dan de manier waarop dat moet? Ik vind het altijd een beetje raar dat je de URL kan zien waar die heen gaat. Dat doet een beetje amateuristisch aan voor mijn gevoel, maar dat is geen probleem? Of hoe doen grotere sites dat?
Alvast bedankt voor de hulp.
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
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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<?php
echo "<div class='button' data-button='follow' data-user='12345'><a>Follow</a></div>";
?>
<script>
$(document).ready(function(){
$(".btn").on("click", "a", function(e) { e.preventDefault() });
$(document).on('click', '.button', function(){
var user = $(this).data("user");
var button = $(this).data("button");
$.ajax({
url:"follow.php",
method:"POST",
data:{user:user, button:button},
dataType:"text",
success:function(data){
alert(data);
}
});
});
});
</script>
<?php
echo "<div class='button' data-button='follow' data-user='12345'><a>Follow</a></div>";
?>
<script>
$(document).ready(function(){
$(".btn").on("click", "a", function(e) { e.preventDefault() });
$(document).on('click', '.button', function(){
var user = $(this).data("user");
var button = $(this).data("button");
$.ajax({
url:"follow.php",
method:"POST",
data:{user:user, button:button},
dataType:"text",
success:function(data){
alert(data);
}
});
});
});
</script>
follow.php
Controleer wel in je PHP-script of alles goed is gegaan, en spuug een true uit. In je JavaScript code controller je hier ook op.
Code (php)
1
2
2
if(data == 1) $('.button').html('Unfollow').data('button', 'unfollow');
if(data == 2) $('.button').html('Follow').data('button', 'follow');
if(data == 2) $('.button').html('Follow').data('button', 'follow');
Het tweede deel van je reactie kan ik niet helemaal volgen. Bedoel je dat ik het weer uit de database moet ophalen? Met PHP en MYSQL kan ik aardig overwegen, maar jQuery en javascript is niet echt mijn ding. Vandaar ook de vraag hoe ik dat bij success moet doen.
In dat geval weet ik niet of het met if/else kan. Want dan heb je denk ik wel meer smaken nodig voor het geval er iets mis zou gaan.
Of bedoel je dat je eerst zou nagaan of het om volgen/ontvolgen gaat, en vervolgens true/false daaraan hangt? Dus wijziging is dan true, en geen wijziging is false. Maar dan wordt de code eigenlijk alleen maar groter.
Zou zou ik het doen qua opzet, en dan in json opbouwen. Bij een Status = False kan je nog een Error string meegeven met de error.
Gewijzigd op 15/09/2018 08:57:31 door - Ariën -
Zo'n status is leuk, maar is extra. Tenzij je reden hebt om aan te nemen dat dit vaak kan misgaan kun je dit achterwege laten, of je moet plannen hebben om meerdere acties op eenzelfde wijze op te zetten, dan kun je gaan nadenken over een uniform(er)e opzet, maar voor nu volstaat:
uitgaand (ajax call): follow: true/false, userid: xyz
binnenkomend (ajax response): following: true/false
Allerlei extra foutafhandeling kan handig zijn, maar dit is zoals gezegd allemaal extra. Als je de introductie van complexiteit (statussen, errorcodes) in eerste instantie niet nodig hebt, zou ik deze in eerste instantie niet inbouwen. Neemt niet weg dat je deze functionaliteit goed test, uiteraard. Maar een onnodig "verbose" systeem lijkt mij initieel niet erg zinnig, omdat je dan dingen van begins af aan al complexer maakt dan strict noodzakelijk.
Gewijzigd op 15/09/2018 12:00:56 door Thomas van den Heuvel
Heb alleen nog één bijkomende vraag. Ik heb voor de buttons een hover kleur gezet. Als je iemand volgt en op de button gaat staan geeft hij een rode kleur, als je dus dreigt te ontvolgen. Het probleem is alleen dat als je op 'volgen' klikt je direct de rode kleur krijgt, omdat je al 'hovert'. Hoe kan ik dat voorkomen dat hij bij een click geen hover doet?
Even een versimpelde opzet:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='button1'>button1</div>
<script>
$(document).on('click', '.button1', function(){
$('.button1').html("button2");
$(this).removeClass('button1');
$(this).addClass('button2');
});
</script>
<style>
.button1 {background-color: #FF0;}
.button1:hover {background-color: #F93;}
.button2 {background-color: #CDE;}
.button2:hover {background-color: #F00;}
</style>
<div class='button1'>button1</div>
<script>
$(document).on('click', '.button1', function(){
$('.button1').html("button2");
$(this).removeClass('button1');
$(this).addClass('button2');
});
</script>
<style>
.button1 {background-color: #FF0;}
.button1:hover {background-color: #F93;}
.button2 {background-color: #CDE;}
.button2:hover {background-color: #F00;}
</style>
Trouwens, regel 9, moet dat niet ook $(this) zijn in plaats van $('.button1')? Geef je daarmee niet alle divs met klasse .button1 deze de inhoud "button2"?
Dat tweede heb je gelijk in, dit was ook een beetje prutswerk.
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
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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='button1'>button1</div>
<script>
$(document).on('click', '.button1', function(){
$(this).html("button2");
$(this).removeClass('button1');
$(this).addClass('button2');
$(this).one('mouseleave', function() {
$('.button2').addClass('active');
});
});
</script>
<style>
.button1 {background-color: #FF0;}
.button1:hover {background-color: #F93;}
.button2 {background-color: #CDE;}
.active:hover {background-color: #F00;}
</style>
<div class='button1'>button1</div>
<script>
$(document).on('click', '.button1', function(){
$(this).html("button2");
$(this).removeClass('button1');
$(this).addClass('button2');
$(this).one('mouseleave', function() {
$('.button2').addClass('active');
});
});
</script>
<style>
.button1 {background-color: #FF0;}
.button1:hover {background-color: #F93;}
.button2 {background-color: #CDE;}
.active:hover {background-color: #F00;}
</style>