Volgersysteem

Door G Jansma op 14-09-2018 20:25

2.366 views

Hoi,

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.


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

follow.php


<?php

	// mysql checks, nog even eruit gelaten. Even een versimpelde versie.

	print_r($_POST);
	
	if($_POST['button'] == 'follow' and $_POST['user'] == 12345) {echo "1";}
	elseif($_POST['button'] == 'unfollow' and $_POST['user'] == 12345) {echo "2";}
	else {echo "3";}
	
?>

Thomas van den Heuvel

25-09-2018 15:58

Euh, in eerste instantie geen rode hoverkleur definiëren? Of wellicht een :active (sub)class introduceren? Of misschien onderscheid maken tussen de "mousedown" en "mouseup" events, in plaats van het "click" event te gebruiken?

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

G Jansma

25-09-2018 19:39

Thanks voor je hulp. Je hebt me op het goede pad geholpen. Een beetje googlen op die mouse-dingen heeft me naar mouseleave geleid. Heb nu dat na de klik, en nadat je de muis van de button haalt een active class wordt toegevoegd.

Dat tweede heb je gelijk in, dit was ook een beetje prutswerk.

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

Thomas van den Heuvel

25-09-2018 22:23

Of nog een andere optie: maak de button tijdelijk inactief als deze in "transitie" is, en dan, als je AJAX-call resultaat heeft geretourneerd, pas je de classes pas toe? Dan is namelijk ook pas bevestigd dat de wijziging ook daadwerkelijk is uitgevoerd.

Reageren

Inloggen om te reageren