I am creating a simple Follow/Unfollow system, everything works fine in the sense that it inserts the row and deletes the row when I follow/unfollow, but for some reason it refreshes the page every time, even though I’m using e.preventDefault();
, why is this? Thanks
<?php if ($is_following): ?>
<form method="POST" action="">
<input type="hidden" value="<?php echo $username; ?>" name="username">
<input type="hidden" value="<?php echo $grabUser['username']; ?>" name="following">
<input type="hidden" value="<?php echo date('Y/m/d H:i:s'); ?>" name="date">
<button class="followBtn" type="button" value="unfollow" name="action">Unfollow</button>
</form>
<?php else: ?>
<form method="POST" action="">
<input type="hidden" value="<?php echo $username; ?>" name="username">
<input type="hidden" value="<?php echo $grabUser['username']; ?>" name="following">
<input type="hidden" value="<?php echo date('Y/m/d H:i:s'); ?>" name="date">
<button class="followBtn" type="button" value="follow" name="action">Follow</button>
</form>
<?php endif; ?>
This is my script at the bottom of my webpage:
<script type="text/javascript">
//~~~~~~~~~~~~~~~~~~~~ SCRIPT FOR FOLLOWING A USER ~~~~~~~~~~~~~~~~~~~~//
(function() {
$(document).ready(function() {
console.log("Follow function is working..");
$(".followBtn").on("click", function(e) {
if ($(this).hasClass('followBtn-signin')) {
e.preventDefault(); // Prevent form submission
$('#loginModal').modal('show'); // Show login modal
return;
}
e.preventDefault();
var followButton = $(this);
var formDataFollow = {
'FollowUser': true,
'username': $(this).siblings('input[name="username"]').val(),
'following': $(this).siblings('input[name="following"]').val(),
'date': $(this).siblings('input[name="date"]').val(),
'action': $(this).val()
};
console.log(formDataFollow);
$.ajax({
type: "POST",
url: "/Blog/resources/PHP/FollowUserPHP.php",
data: formDataFollow,
dataType: 'json',
success: function(response) {
// Toggle the button text based on the response
if (response.status === "followed") {
followButton.text("Unfollow");
} else if (response.status === "unfollowed") {
followButton.text("Follow");
}
// Manually submit the form
followButton.closest('form').submit();
},
error: function(xhr, status, error) {
console.log(error);
}
});
});
});
})();
</script>
and this is my FollowUserPHP.php:
<?php
session_start();
require_once '/var/www/vhosts/my-site.xyz/httpdocs/PHP/connect.php';
if (isset($_POST['username']) && isset($_POST['following']) && isset($_POST['date']) && isset($_POST['action'])) {
$username = filter_var($_POST['username'], FILTER_SANITIZE_STRING);
$following = filter_var($_POST['following'], FILTER_SANITIZE_STRING);
$date = filter_var($_POST['date'], FILTER_SANITIZE_STRING);
$action = $_POST['action'];
if ($action == 'follow') {
$stmt = $dbh->prepare("INSERT INTO `followers` (`username`, `following`, `date`) VALUES (:username, :following, :date)");
$stmt->bindParam(':username', $username, PDO::PARAM_STR);
$stmt->bindParam(':following', $following, PDO::PARAM_STR);
$stmt->bindParam(':date', $date, PDO::PARAM_STR);
$stmt->execute();
$response = array('status' => 'followed');
} elseif ($action == 'unfollow') {
$stmt = $dbh->prepare("DELETE FROM `followers` WHERE `username` = :username AND `following` = :following");
$stmt->bindParam(':username', $username, PDO::PARAM_STR);
$stmt->bindParam(':following', $following, PDO::PARAM_STR);
$stmt->execute();
$response = array('status' => 'unfollowed');
} else {
// Invalid action value
$response = array('error' => 'Invalid action');
}
} else {
// Missing parameters
$response = array('error' => 'Missing parameters');
}
// Output the response as JSON
header('Content-Type: application/json');
echo json_encode($response);
exit;
?>