Jquery for Followers Index

Question

Good afternoon,

And the following I have an area where users can follow other users need to know if with jquery when clicking below it is possible to insert the data in the table and change the button not to follow and another color if possible and how can I do jquery

Example table users

Code

<script>
$(document.body).on('click', '#follow', function(e) {
    e.preventDefault(); //Evita o comportamento padrão
    $.ajax({
        url: "ajax/processa_seguidores.php",
        type: "POST",
        dataTtype: "JSON",
        data: {
            user_logged: <?php echo $_SESSION['user_id']; ?>, //Aqui vai o usuário que clicou
            user_to_follow: <?php echo $row_foodies->id; ?>, //Aqui vai o id do usuário que gostaria de seguir
        }
    }).done(function(data) {
        if (data.error === 0) {
            $( this ).addClass( "unfollow" );
            $( this ).html( "Unfollow" );
            alert(data.message);
            //Uma sugestão você pode usar o Toastr (http://codeseven.github.io/toastr/)
            //para exibir seus retornos de forma mais elegante ao seu usuário
        } else {
            alert('Opa algum erro ocorreu');
        }
        console.log(data);
    });
})
</script>
<div class="my_account user wow fadeInLeft">
<figure>
    <a href="users/<?php echo $row_foodies->slug; ?>"><img style=" border-top-left-radius:10px; border-top-right-radius:10px;" src="<?php echo $row_foodies->user_foto; ?>" alt="" /></a>
</figure>
<div class="container_user" style="border-bottom-left-radius:10px; border-bottom-right-radius:10px;">
    <p><?php echo utf8_encode(limita_caracteres($row_foodies->fb_nome, 13, false)); ?></p>
    <div style="font-family:Arial, Helvetica, sans-serif; margin-top:-15px; font-size:13px; color:#999;"><?php echo $bar['id']; ?> Opiniões</div> 
    <div style="font-family:Arial, Helvetica, sans-serif; margin:0px 0px 10px 0px; font-size:13px; color:#999;">0 Seguidores</div> 
    <?php
    if($_SESSION['FBID'] || $_SESSION['user_id']){
    ?>
        <div id="#follow" class="seguir_user" style="margin:0px 0px 15px 0px; cursor: pointer;">Seguir</div>
    <?php
    }
    ?>
</div>

Answer 1

You may not enter data into the database by a client language such as Javascript (unless you are using Nodejs and from what I’ve seen it’s not your case).

You could create a page on your website with the server language of your choice, in your case PHP, that receives requests and in these requests you send the data that should be entered. This asynchronous call from client and server is called Ajax.

You can handle these requests the same way you handle normal form submission requests with the variable $_POST or $_GET of PHP.

jQuery has a native functionality that allows you to do this. jQuery Ajax.

And about changing colors, it is not difficult. You can use jquery native functions CSS or theddClass

Answer 2

I’ve made a very simple example for you and it needs a clear complement to your need, but the basics I believe are there:

Script

  <script>
        $(document.body).on('click', '#follow', function(e) {
            e.preventDefault(); //Evita o comportamento padrão
            $.ajax({
                url: "addfollower.html",
                type: "POST",
                dataTtype: "JSON",
                data: {
                    user_logged: Y, //Aqui vai o usuário que clicou
                    user_to_follow: X, //Aqui vai o id do usuário que gostaria de seguir
                }
            }).done(function(data) {
                if (data.error === 0) {
                    $( this ).addClass( "unfollow" );
                    $( this ).html( "Unfollow" );
                    alert(data.message);
                    //Uma sugestão você pode usar o Toastr (http://codeseven.github.io/toastr/)
                    //para exibir seus retornos de forma mais elegante ao seu usuário
                } else {
                    alert('Opa algum erro ocorreu');
                }
                console.log(data);
            });
        })
    </script>

addfollower.php page

    <?php 
    $userOn = filter_input(INPUT_POST, 'user_logged', FILTER_SANITIZE_NUMBER_INT);
    $userToFollow = filter_input(INPUT_POST, 'user_to_follow', FILTER_SANITIZE_NUMBER_INT); //Garante que receberá um inteiro

    //Aqui vai seu sql;
    $SQL = "INSERT INTO FOLLOWER (id_user, id_follower) VALUES ($userOn, $usertoFollow)";
    //Aqui você trata o retorno como preferir;
    return json_encode(['error' => 0, "message" => "Você agora está seguinte: XY|"]);

CSS

.unfollow {
    background-color: #FF123F;
}

Also remembering that none of this has been tested and may contain some error syntax;