Volgersysteem

Bij je success-event zorg je ervoor dat je met jQuery je style aanpast.

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.

Na wat speurwerk heb ik dit toegevoegd aan het success deel. En het werkt, maar is dat zo netjes op deze manier?

if(data == 1) $('.button').html('Unfollow').data('button', 'unfollow');
if(data == 2) $('.button').html('Follow').data('button', 'follow');

Bij het genereren van de pagina weet je toch al of je iemand volgt of niet? En dit kun je ook dynamisch updaten als dat verandert, dus de bovenstaande code is niet heel erg voor de hand liggend.

Ja, dat haal ik inderdaad op uit de database. Dus bij het genereren van de pagina weet je of er Follow of Unfollow komt te staan.

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.

Hm, bij nader inzien dekt het bovenstaande wel de lading denk ik, al zou ik een boolean teruggeven die aangeeft of -iemand in de nieuwe situatie iemand anders volgt (true) of niet (false). Omdat er ook maar 2 smaken zijn zou je dit in een if/else kunnen zetten. En het enige wat in principe bijgewerkt hoeft te worden is de labeltekst en een manier om over te brengen welke actie uitgevoerd dient te worden, dus het bovenstaande kan ook prima.

Maar dan gebruik je dus 'false' voor een succesvolle activiteit, dus eigenlijk true? Wat ik nu met 1 en 2 heb, maar dan met true en false? Want je hebt volgen > ontvolgen, maar ook ontvolgen > volgen.

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.

Status = true / false, action = follow / unfollow, UserID = 1234

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.

Bij het uitsturen van de un/follow actie moet je natuurlijk een userid meegeven, maar bij de respons is dat waarschijnlijk niet nodig, omdat je weet welke click de un/follow actie initieert.

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.

Bedankt voor jullie hulp. Heb het nu inderdaad met following true/false gedaan. Helemaal zoals ik het wil.

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:

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

Iemand een idee hoe ik bovenstaande kan oplossen?