0

I'm creating a follow button, more or less like the twitter one.

You click the button, and you follow the user.

You click again, and you unfollow the user.

I have done this code

HTML

<div data-following="false" class='heart canal'><i class='fa fa-heart awesome'></i></div>

AJAX

$(document).ready(function() {
$(".heart.canal").click(function() {
    if($(".heart").attr("data-following") == '0'){
        $(".heart").attr('data-following', '1');
    } else if($(".heart").attr("data-following") == '1'){
        $(".heart").attr('data-following', '0');
    }

    var usuario = $(".left h4").attr("data-id");
    var seguidor = $("#user_account_info .profile_ball").attr("data-id");
    var seguir = $(".heart").attr("data-following");

    $.ajax({
        type: "POST",
        url: "./include/php/follow.php",
        data: { user: usuario, follower: seguidor, follow: seguir },
        success: function(response) {
            if(response == '0'){
                $(".heart").addClass("like");
            } else if(response == '1'){
                $(".heart").removeClass("like");
            }
        }
    });
    return false;
});
});

PHP

<?php
$dsn = "mysql:host=localhost;dbname=tapehd;charset=utf8";
$usuario = "root";
$contraseña = "";

$conexion = new PDO($dsn, $usuario, $contraseña);
$resultado = null;

$sql = "";
$user = $_POST["user"];
$seguidor = $_POST["follower"];
$follow = $_POST["follow"];

if($follow == '0'){
    $sql = "INSERT INTO seguidores(id_canal, id_seguidor) VALUES('$user', '$seguidor')";
} else if($follow == '1'){
    $sql = "DELETE FROM seguidores WHERE id_canal = '$user' AND id_seguidor= '$seguidor'";
}

if($conexion){ $resultado = $conexion->query($sql); }

return $follow;
?>

The problem is, everytime I click the button, I only insert data in the database. I mean, I only create follows. When I click twice, it doesnt remove the follow.

Is there anyway to insert data when data-following = true and remove it when data-following = false ?

UPDATED

I have changed the boolean false and true for 2 strings, 0 and 1. But it doesn't work anyway.

Antonio
  • 99
  • 8
  • [Your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php) – Jay Blanchard Sep 01 '15 at 18:41
  • Have you looked at your error logs? You're not doing *any* error checking here and making assumptions that your queries just work. – Jay Blanchard Sep 01 '15 at 18:42
  • 2
    form submissions are strings. there are no booleans, no integers, no blobs, blah blahblah. there's just strings. if you want `$follow` to test equal to a php false, then `$_POST['seguir']` has to contain something that'll make to "false" by PHP rules. that'd be `0`, `0.0`, or an empty string. the **WORD** `false` will not test equal, because that'd be `'false' == false` – Marc B Sep 01 '15 at 18:44
  • how many `div` with class `.heart` do you have in your html ? – CodeGodie Sep 01 '15 at 18:48
  • @MarcB you nailed it. Provide that as an answer. – CodeGodie Sep 01 '15 at 18:51
  • @MarcB The problem is that I don't know how. That's the reason I ask for help – Antonio Sep 01 '15 at 18:53
  • There also another issue, look at this line, in your ajax: `data: {user: usuario, follower: seguidor, follow: seguir},` you are sending `follow: seguir`, but your PHP reads like this: `$follow = $_POST["seguir"];` . That is wrong. You should be doing this instead `$follow = $_POST["follow"];` – CodeGodie Sep 01 '15 at 18:56
  • just change your conditionals to `if ($follow === "false") {..} else if ($follow === "true") {` – CodeGodie Sep 01 '15 at 19:00
  • @CodeGodie how can I return the result of the php file when the ajax function success. Is that well done? Now, It doesnt even insert data. – Antonio Sep 01 '15 at 19:05
  • you need to `echo` any data you want your ajax to receive – CodeGodie Sep 01 '15 at 19:28

1 Answers1

1

There are numerous problems here. For one, like @Mark said, you need to understand that when sending ajax requests to PHP, you are sending strings. Also, in your JS, you are binding a click function to the .heart.canal, but then the function changes all elements with that class rather than the actual clicked element. Lastly, once you send the right information to PHP you need to print your results in order to see it in ajax.

Try the following:

JS:

$(document).ready(function () {
    $(".heart.canal").click(function () {
        var $heart = $(this);
        if ($heart.data("following")) {
            $heart.data("following", false)
        } else {
            $heart.data("following", true);
        }

        var usuario = $(".left").find("h4").data("id");
        var seguidor = $("#user_account_info").find(".profile_ball").data("id");

        $.ajax({
            type: "POST",
            url: "follow.php",
            data: {user: usuario, follower: seguidor, follow: $heart.data("following")},
            success: function (result) {
                if (result) {
                    console.log("true");
                } else {
                    console.log("false");
                }
            }
        });
        return false;

    });

});

PHP:

$user = (int)$_POST["user"];
$seguidor = (int)$_POST["follower"];
$follow = ($_POST["follow"] === 'true') ? true : false;

if ($follow) {
    // insert
} else {
    // delete
}

print $follow;
CodeGodie
  • 12,116
  • 6
  • 37
  • 66