Question

我正在开发的webapp上的follow和unfollow功能的ajax功能工作正常，但问题是当我点击任何显示的关注者列表中的“关注”或“取消关注”按钮时，跟随或取消关注按钮仅在所显示的关注者列表中为第一个关注者切换而不刷新页面。如果我点击跟随或取消关注除列表中第一个之外的任何其他显示的关注者，我将不得不刷新页面以查看更改了关注/取消关注按钮。总之，点击任何关注者上的关注/取消关注按钮除了我显示的关注者列表中的第一个按钮之外，不会切换关闭/取消关注按钮而不刷新页面。

PHP代码

    $sql = "SELECT users.firstname, users.lastname, users.avatar, users.username FROM users INNER JOIN follows ON users.username=follows.user1 WHERE user2='$u' ORDER BY RAND()";
    $result_select = mysqli_query($db_connect, $sql);
    // Check if user has followers
    $numrows = mysqli_num_rows($result_select);
        if($numrows < 1){
        echo '<div id="nav-follow">';
          echo '<ul>';
           echo '<li>'.'<a href="http://localhost:8080/app/follow_page.php?u='.$u.'" class="selected">'.'Followers'.'</a>'.'</li>';
           echo '<li>'.'<a href="http://localhost:8080/app/following_page.php?u='.$u.'">'.'Following'.'</a>'.'</li>';
          echo '</ul>';
        echo '</div>';
        echo '<div id="followerList" style="height:60px; text-align:center; vertical-align: middle; font-size:20px; color:white;">';        
        echo "I don't have any follower yet. If I start following others, they will also follow me.";
        echo '</div></div>'; 
            include_once("template_pageRight.php");

            exit();
        }

?><?php
        echo '<div id="nav-follow">';
          echo '<ul>';
           echo '<li>'.'<a href="http://localhost:8080/app/follow_page.php?u='.$u.'" class="selected">'.'Followers'.'</a>'.'</li>';
           echo '<li>'.'<a href="http://localhost:8080/app/following_page.php?u='.$u.'">'.'Following'.'</a>'.'</li>';
          echo '</ul>';
        echo '</div>'.'<br />';
    // Fetch the user row from the query above
    $row = array();
    while ($row = mysqli_fetch_array($result_select))
        $rows[] = $row;
    foreach($rows as $row){
        $followUsername = $row['username'];



?><?php
    $following = false;


    if($u == $log_username && $user_ok == true){
        $follow_check = "SELECT id FROM follows WHERE user1='$log_username' AND user2='$followUsername' LIMIT 1";
        if(mysqli_num_rows(mysqli_query($db_connect, $follow_check)) > 0){
            $following = true;  
        }
    } elseif($u != $log_username && $user_ok == true){
        $follow_check = "SELECT id FROM follows WHERE user1='$log_username' AND user2='$followUsername' LIMIT 1";
        if(mysqli_num_rows(mysqli_query($db_connect, $follow_check)) > 0){
            $following = true;  
        }
    }
?><?php
    //$followUsername_Btn = "";
    if($following == true){
        $followUsername_Btn = '<button onclick="followUsernameToggle(\'unfollow\',\''.$followUsername.'\',\'followUsernameBtn\')">Unfollow</button>';
        } elseif($followUsername != $log_username && $following == false && $user_ok == true) {
            $followUsername_Btn = '<button onclick="followUsernameToggle(\'follow\',\''.$followUsername.'\',\'followUsernameBtn\')">Follow</button>';
        } else {
            $followUsername_Btn = '<button disabled>Me</button>';
        }
?><?php 

        echo '<div id="followerList">';
            echo '<a class="image" href="http://localhost:8080/app/user_audio.php?u='.$followUsername.'"><img src="user/'.$followUsername.'/'.$row['avatar'].'" alt="'.$followUsername.'">'.'<br />';
            echo '<div id="fuserName">'.$row["firstname"].' '.$row["lastname"].'</a>'.'</div>';
            echo '<span id="followUsernameBtn">'.$followUsername_Btn.'</span>';   
        echo '</div><br />';
} 
?>

的jQuery

function followUsernameToggle(type, user, elem) {
    var conf = confirm("Please confirm.");
    if (conf != true) {
        return false;
    }
    //_(elem).innerHTML = 'please wait...';
    var xhttp;
    if (window.XMLHttpRequest) {
        // code for modern browsers
        xhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if (this.responseText == "follow_ok") {
                _(elem).innerHTML = '<button onclick="followUsernameToggle(\'unfollow\',\'<?php echo $followUsername; ?>\',\'followUsernameBtn\')">Unfollow</button>';
            } else if (this.responseText == "unfollow_ok") {
                _(elem).innerHTML = '<button onclick="followUsernameToggle(\'follow\',\'<?php echo $followUsername; ?>\',\'followUsernameBtn\')">Follow</button>';
            } else {
                alert(this.responseText);
                _(elem).innerHTML = 'Try again later';
            }
        }
    };
    xhttp.open("POST", "php_parsers/follow_system.php", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("type=" + type + "&user=" + user);
}

follow_system.php

<?php 
$sql = "SELECT countrycode, mobile FROM users WHERE username='$log_username' LIMIT 1";
$query = mysqli_query($db_connect, $sql);
if(mysqli_num_rows($query) > 0){
    $row = mysqli_fetch_row($query);
    $countrycode = $row[0];
    $mobile = $row[1];
}
?><?php
$user = mysqli_real_escape_string($db_connect, $_POST['user']);
//$type = mysqli_real_escape_string($db_connect, $_POST['type']);
if($_POST['type'] == "follow" && isset($_POST['user'])){
$sql = "INSERT INTO follows (user1, user2, countrycode, mobile, datefollowed) VALUES ('$log_username','$user','$countrycode','$mobile',now())"; 
            $query = mysqli_query($db_connect, $sql);
            mysqli_close($db_connect);
            echo "follow_ok"; 
            exit();
        } else if($_POST['type'] == "unfollow" && isset($_POST['user'])){
            $sql = "DELETE FROM follows WHERE user1='$log_username' AND user2='$user' AND countrycode='$countrycode' AND mobile='$mobile'";
            $query = mysqli_query($db_connect, $sql);
            mysqli_close($db_connect);
            echo "unfollow_ok";
            exit();
        }   

?>

正如我所说，看下面的图片，当我点击FollowerB或C上的Follow或Unfollow时，按钮不会切换，我必须刷新页面以查看按钮的更改，从关注到取消关注，反之亦然。但是当我点击列表顶部的FollowerA时，按钮切换而不刷新。我需要帮助，为什么它只是列表中第一个正常工作的追随者。

Follow_Unfollow_Picture

跟随和取消跟随Ajax工作正常，但有显示问题

0 个答案: