Follow button aktualisieren

[Jeremygolf]

Hallo zusammen,

ich arbeite gerade an einem kleinen Sozialen Netzwerk. Ich habe ein Follower-System.
Nun wenn ich die Profilseite lade schaue ich mit php und mysql nach ob ich diesem User schon folge und zeige somit den richtigen Button dar.

<div class="follow-status">
            <?php
            if($username != $_SESSION["username"]) {
                $currentUser = $_SESSION["userid"];
                $sql = mysql_query("SELECT * FROM following WHERE from_user = '$currentUser' AND to_user = '$userid'");
                if(mysql_num_rows($sql) > 0) { ?>
               
                <button class="unfollowbtn" id="unfollow" value="<?php echo($userid); ?>">
                    Unfollow
                </button>
               
                <?php 
                } else { ?>
                <button class="followbtn" id="follow" value="<?php echo($userid); ?>">
                    Follow
                </button>
                <?php
                }
            }   
           
            ?>   
            </div>

Wenn ich nun auf den Follow button drücke muss ich mit AJAX einen Eintrag in die Datenbank machen und der Button soll sich auf Unfollow ändern.
[/CODE]
$(function() {
$("#follow").click(function() {
var myData = 'follow='+ $("#follow").val();
jQuery.ajax({
type: "POST",
url: "plugins/follow/followunfollow.php",
data: myData,
success: function(data) {
$("#follow").hide();
$(".follow-status").append('<button class="unfollowbtn" id="unfollow" value="<?php echo($userid); ?>">
Unfollow
</button>');
}, error: function () {
alert(" Can't do");
},
});
});

$("#unfollow").click(function() {
var myData = 'unfollow='+ $("#unfollow").val();
jQuery.ajax({
type: "POST",
url: "plugins/follow/followunfollow.php",
data: myData,
success: function(data) {
$("#unfollow").hide();
$(".follow-status").append('<button class="followbtn" id="follow" value="<?php echo($userid); ?>">
Follow
</button>');
}, error: function () {
alert(" Can't do");
},
});
});
});

Hier ist noch das PHP script
[CODE]
<?php
   
include("../../php/auth.php"); 
include("../../php/connect.php");

if(isset($_POST["follow"])){

    $userid = $_POST["follow"];
    $currentUser = $_SESSION["userid"];
   
    $query = mysql_query("INSERT INTO following (from_user, to_user) VALUES ('$currentUser', '$userid')");
   
    if($query) {
        echo("true");
    } else {
        die(mysql_error());
    }
} else if(isset($_POST["unfollow"])){

    $userid = $_POST["unfollow"];
    $currentUser = $_SESSION["userid"];
   
    $query = mysql_query("DELETE FROM following WHERE from_user = '$currentUser' AND to_user = '$userid'");
   
    if($query) {
        echo("true");
    } else {
        die(mysql_error());
    }
}


?>

Kann mir hier jemand weiterhelfen oder eine bessere Lösung vorschlagen.

Vielen Dank Leute

 

[Tronjer]

$("#unfollow").click(function() {}

Das dürfte nicht funktionieren. Dynamisch ins DOM eingefügte Elemente benötigen einen Event-Listener auf einem Parent, also bsw.: $('.follow-status').on('click', '#unfollow', function() {})

 

[Sempervivum]

Ein Problem könnte darin liegen, dass Du den Follow-/Unfollow-Button immer nur verbirgst und dann einen neuen Button hinzu fügst. Durch das Verbergen verschwindet er nicht aus dem DOM und es entstehen mehrere Buttons mit der selben ID. Ich würde
entweder auf das Verbergen verzichten und den Button stattdessen im DOM löschen
oder beide Buttons gleichzeitig anlegen und immer den richtigen anzeigen und den anderen verbergen.

 

[Tronjer]

beide Buttons gleichzeitig anlegen und immer den richtigen anzeigen und den anderen verbergen.

Das auch.

Es existiert eigentlich kein Grund, die Buttons nachträglich im DOM einzufügen oder zu löschen. Ich baue gerade so etwas mit Angular. Dort gibt es neben dem klassischen show und hide die Direktive ng-if, die eine Expression auswerten kann und davon abhängig DOM-Elemente rendert, anstatt diesen lediglich ein display: block/none per Inline-Style zu geben.

Technisch funktioniert es so, dass man innerhalb des Angular-Controllers eine Status-Variable auf true setzt, die per ng-if den Follow-Button rendert. Beim Button-Click wird per Ajax-Request die Datenbank upgedatet und im Success-Handler die Variable auf false gesetzt, woraufhin der Follow-Button verschwindet und der Unfollow-Button gerendert wird. Also ähnlich, wie man es früher mit PHP gemacht hätte, nur eben asynchron per JavaScript, ohne Seitenreload.