Follow button with AJAX - php

Question

I have created a button with which you can follow/unfollow a user, with AJAx and PHP.
If you click on the button, you follow, else, you unfollow.
There's a function that checks if the user you try to follow is already followed...
HTML
<div class="heart"><i class="fa fa-heart awesome"></i></div>
PHP
public static function Follow($user, $seguidor){
$sql = "INSERT INTO seguidores (id_canal, id_seguidor) VALUES ('$user', '$seguidor')";
$resultado = self::Conexion($sql);
return $resultado;
}
public static function CheckFollow($user, $seguidor){
$heart = "";
$sql = "SELECT * FROM seguidores WHERE id_canal = '$user' AND id_seguidor= '$seguidor'";
$resultado = self::Conexion($sql);
$verificacion = false;
if(isset($resultado)) {
$fila = $resultado->fetch();
if($fila !== false){
$verificacion = true;
}
}
if($verificacion == false){
$heart = "<div data-id='".$user."' class='heart'><i class='fa fa-heart awesome'></i></div>";
} else {
$heart = "<div data-id='".$user."' class='heart like'><i class='fa fa-heart awesome'></i></div>";
}
return $heart;
}
public static function Unfollow($user, $seguidor){
$sql = "DELETE FROM seguidores WHERE id_canal = '$user' AND id_seguidor= '$seguidor'";
$resultado = self::Conexion($sql);
return $resultado;
}
AJAX
$(document).ready(function () {
$function() {
var element = $(this);
var data_id = element.attr("data-id");
$.ajax({
type: "POST",
url: "database.php",
data: data_id,
success: function(){ }
});
return false;
}
});
The problem is, how can I load those php funcionts everytime I click the button...
Click > follow
Another click > unfollow

Answer 1

Here's a few suggestions:
I notice you are creating HTML strings in PHP. If at all possible, you want to avoid doing that.
Keep all your HTML, CSS and JavaScript client-side. As you progress as a developer, you will start to see why. Think of them as templates.
In this case, you just need to return either "followed" or 'unfollowed" to the client callback. Could boil it down to a boolean!
So, in your template, define both the followed state and the unfollowed state. Use CSS to hide the appropriate one. This can be incredibly lightweight!
In these examples, you just set the follow attribute on your button.
So your javascript would look like:
// I would do something like:
find=document;
id="getElementById";
/* ... */
success: function (request, status)
{
if (!status)
return
;
find[id]("follow-1").setAttribute("follow", request.responseText)
}
(check the ajax api of the lib)
1.)
<button id="follow-1" follow="true">
<img src="transparent.png" />
</button>
+
button[follow="false"] > img
{ background: transparent url("unfollow.png");
}
button[follow="true"] > img
{ background: transparent url("follow.png");
}
2.)
<button id="follow-1" follow="true">
<img src="follow.png" />
<img src="unfollow.png" />
</button>
+
button[follow] > img
{ display: none;
}
button[follow="false"] > img:last-child
{ display: block;
}
button[follow="true"] > img:first-child
{ display: block;
}

Answer 2

I would suggest using framework such as CodeIgniter to handle the back-end as you can post data directly to public controller methods directly from ajax, but for rough idea on how it could work (you may need to fix up bugs / tweak as I wrote from memory):
Add to PHP to handle incoming requests:
//Minimal vulnerability protection while getting inputs.
$update_types = array("Follow", "CheckFollow", "Unfollow");
$update_method = in_array($_POST["update_type"],
$update_types)? $_POST["update_type"], "");
if ($update_method) {
//Call the update function & bounce the response
//in JSON back to the AJAX handler.
echo json_encode(call_user_func($update_method,
(int) $_POST["user_id"], (int) $_POST["seguidor"]));
}
Javascript:
$(document).ready(function () {
//Button click handler.
$("div.heart").on("click", function() {
var my_button = $(this);
var update_type = "";
if (my_button.hasClass('.like'))
update_type = "Unfollow";
else
update_type = "Follow";
$.ajax({
type: "POST",
url: "database.php",
data: {
"update_type": update_type,
user_id: my_button.attr("data-id"),
seguidor: "some value here - not sure based on code"
},
success: function(response) {
//response from server - check for errors...
//Update the UI - add heart if follow updated, remove it if not.
//You will need to modify your php functions to return result code and then either add "like" class or remove it - obviously this is not a complete rewrite of your app.
if ("/* result is followed */")
my_button.addClass("like");
else
my_button.removeClass("like");
}
});
});
});