Affichage popup au clic sur bouton like ou dislike

-
Bonjour à tous,

Je suis en train de réaliser un système de votes. J'ai 2 boutons like et dislike.
J'aimerais au clic sur l'un des boutons afficher une popup avec un formulaire de connexion si l'utilisateur n'est pas authentifié. Je suis bloqué car mon code ne marche pas.


<!-- Partie HTML boutons like - dislike -->
<div class="vote" id="1">
<div class="vote_btn">
<div class="btn_like"><img src="thumbs-up.png" alt="like"></div><span class="votes_like">0</span>
</div>
<div class="vote_btn">
<div class="btn_dislike"><img src="thumb-down.png" alt="dislike"></div><span class="votes_dislike">0</span>
</div>
</div>
<!-- Popup -->
<div class="vote_pop" style="display:none;">
<div class="vote_pop_content">
<form action="" method="POST" id="vote_pop_connex">
<h3>Connexion :</h3>
<input type="text" name="email" required placeholder="Votre email"><br>
<input type="submit" name="connexion" value="Connexion" class="connexx">
</form>
</div>
</div>

// partie php 
// j'ai juste mis une partie du code php (à ce niveau pas de problème)
// j'envoie bien ma session
$session_id = $_SESSION['user_id'];

$vote_like = ($rows5["vote_like"])?$rows5["vote_like"]:0;
$vote_dislike = ($rows5["vote_dislike"])?$rows5["vote_dislike"]:0;

$env_rep = array('vote_like'=>$vote_like, 'vote_dislike'=>$vote_dislike, 'myVar'=>$session_id);
echo json_encode($env_rep);

// partie js
$(document).ready(function() {
    $.each($('.vote'), function () {
        var unique_id = $(this).attr("id");
        //console.log(unique_id);
        post_data = {'unique_id': unique_id, 'vote': 'fetch'};
        $.post('inc/php/vote_process.php', post_data, function (response) {
            $('#' + unique_id + ' .votes_like').text(response.vote_like);
            $('#' + unique_id + ' .votes_dislike').text(response.vote_dislike);
        }, 'json');
    });
    $(".vote .vote_btn").click(function (e) {
        var click_button = $(this).children().attr('class');
        var unique_id = $(this).parent().attr("id");
        if (click_button === 'btn_dislike') {
            post_data = {'unique_id': unique_id, 'vote': 'dislike'};
            $.post('inc/php/vote_process.php', post_data, function (data) {
                var check_session = data.myVar;
                if (check_session === '') {
                    $('.vote_btn').on('click', function(){
                        $('.vote_pop').slideToggle();
                    });
                }
                $('#' + unique_id + ' .votes_dislike').text(data);
            }).fail(function (err) {
                alert(err.statusText);
            });
        } else if (click_button === 'btn_like') {
            post_data = {'unique_id': unique_id, 'vote': 'like'};
            $.post('inc/php/vote_process.php', post_data, function (data) {
                var check_session = data.myVar;
                if (check_session == '') {
                    $('.vote_btn').on('click', function(){
                        $('.vote_pop').slideToggle();
                    });
                }
                $('#' + unique_id + ' .votes_like').text(data);
            }).fail(function (err) {
                alert(err.statusText);
            });
        }
    });
});

J'ai besoin de quelqu'un pour m'aider.
Merci par avance !
Afficher la suite 

Votre réponse

1 réponse

Messages postés
354
Date d'inscription
mercredi 13 avril 2011
Dernière intervention
22 novembre 2018
0
Merci
Salut, ton code est trop élastique, tu devrais nous expliquer les lignes qui tes dérangent, pcq là tu nous donne un travail de lire tes codes sources.
En faites fais du CSS pour afficher des Modals pcq les popups ne sont pas une bonne solution, vu que certains navigateurs les bloquent
Commenter la réponse de DevLama

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.