CODEWITHSUNDEEP
phpjquerymysqlajax
Lynob
Lynob

Reputation: 5327

Few issues in voting

<?php
    include_once 'dbconnect.php';
    include_once 'index_header.php';
    $article_id = $_GET['id'];
    $counter = 0;
    // Select article from db
        $sql = $con->query("SELECT * FROM posts WHERE post_id = '$article_id'");
          if ($sql){
            while($row = mysqli_fetch_assoc($sql)) { 
            $select_title = $row['title'];
            $Select_article = $row['article'];
            }}

    if(isset($_POST['downvote'])){
    $counter = $counter - 1;

    }
    if(isset($_POST['upvote'])){
        $counter = $counter + 1;
        if($counter<=1){
    $insert_query = $con->query("INSERT INTO votes(vote_count,post_id) VALUES(1,'$article_id')");
        }
    }

    $selet_votes = $con->query("SELECT sum(vote_count) AS vote_count_sum FROM votes WHERE post_id= '$article_id'");
      if ($selet_votes){
      $row_votes = mysqli_fetch_assoc($selet_votes);
      $votes = $row_votes['vote_count_sum'];
    }
    else {
        $votes = "0";
    }
    if (empty($votes)){
        $votes = "0";
    }
    ?>

    <!DOCTYPE html>
    <html>

    <head>
        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script type='text/javascript'>
            function switchImg() {
                if ($('#upvote').css('display') == 'none') {
                    $('#upvote').css('display', 'block');
                    $('#upvote_clicked').css('display', 'none');

                    var hr = new XMLHttpRequest();
                    // Create some variables we need to send to our PHP file
                    var url = "post.php";
                    var upvote = document.getElementById("upvote").value;
                    hr.open("POST", url, true);
                    // Set content type header information for sending url encoded variables in the request
                    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                    // Access the onreadystatechange event for the XMLHttpRequest object
                    hr.onreadystatechange = function() {
                            if (hr.readyState == 4 && hr.status == 200) {
                                var return_data = hr.responseText;
                                document.getElementById("counter").innerHTML = return_data;
                            }
                        }
                        // Send the data to PHP now... and wait for response to update the status div
                    hr.send(upvote); // Actually execute the request
                } else {
                    $('#upvote').css('display', 'none');
                    $('#upvote_clicked').css('display', 'block');

                }
            }
        </script>
        <script type='text/javascript'>
            function switchImgdown() {
                if ($('#downvote').css('display') == 'none') {
                    $('#downvote').css('display', 'block');
                    $('#downvote_clicked').css('display', 'none');
                } else {
                    $('#downvote').css('display', 'none');
                    $('#downvote_clicked').css('display', 'block');
                }
            }
        </script>
        <script type='text/javascript'>
            function switchImgdown() {
                if ($('#downvote').css('display') == 'none') {
                    $('#downvote').css('display', 'block');
                    $('#downvote_clicked').css('display', 'none');
                } else {
                    $('#downvote').css('display', 'none');
                    $('#downvote_clicked').css('display', 'block');
                }
            }
        </script>

        <title>
            <?php echo $select_title; ?>
        </title>
    </head>

    <body>
        <div id="rating">
            <table>
                <tr>
                    <div class="upvote-div">
                        <input type="image" name="upvote" id="upvote" value="1" onclick="switchImg()" src="images/up.png" />
                        <input type="image" name="upvote_clicked" id="upvote_clicked" value="-1" style="display:none" onclick="switchImg()" src="images/up_clicked.png" />
                    </div>
                </tr>
                <tr>
                    <div id="counter">
                        <?php
    echo $votes;
    ?>
                    </div>
                </tr>
                <tr>
                    <div class="downvote-div">
                        <input type="image" name="downvote" id="downvote" value="-1" onclick="switchImgdown()" src="images/down.png" />
                        <input type="image" name="dowvote_clicked" id="downvote_clicked" value="1" style="display:none" onclick="switchImgdown()" src="images/down_clicked.png" />
                    </div>
                </tr>
            </table>
        </div>
        <div class="container">
            <p>
                <h2><?php echo $select_title; ?></h2></p>
            <?php echo $Select_article; ?>

        </div>
    </body>

    </html>

    <?php
    if (isset($_POST['upvote'])){
    $sql = $con->query("INSERT INTO votes(vote_count,post_id) VALUES (1,'$article_id')");

        echo "thanks for voting";
    }
    ?>

Here's my post.php I have two issues:

The main one is that when I click vote, I get undefined index $article id on line 6. Initially when I wrote the script, i made ajax url vote.php, when i saw the error, i thought that article_id wasn't passed to vote.php so I put all the action on the same page and strangely, I still get the same problem.

My voting system is like stackoverflow, upvote, downvote and a counter in the middle, but I can't make ajax work. If I post using forms, it doesn't work.

Upvotes: 0

Views: 44

Answers (1)

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Your problem is that you are not passing the correct parameters in AJAX call. You have this:

 var upvote = document.getElementById("upvote").value;
 hr.send(upvote); // Actually execute the request

So you are sending only a number, not a complete querystring parameters. You need to make that:

 var parameters = "id=".$yourId."&upvote=true&downvote=false";
 hr.send(parameters);

This is a POST AJAX call, and you are getting the id by GET. So you need to change the method too (in line 6):

 $article_id = $_POST['id'];

Sending that parameters by POST and reading it with $_POST you can solve the problem.

Upvotes: 2

Related Questions