CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user5035451
user5035451

Reputation:

Javascript error on vote up/down system

I've trying to adopt script for voting up and down with ajax and jquery from one tutorial. The problem (I think) is that in the tutorial the script is used with jquery-2.1.1 but I use jquery-1.10.1 This is the HTML part

<div id="links-'.$row["image_id"].'">
    <input type="hidden" id="votes-'.$row["image_id"].'" value="'.$row["votes"].'">
    <input type="hidden" id="vote_rank_status-'.$row["image_id"].'" value="'.$vote_rank.'">
    <div class="btn-votes">
        <input type="button" title="Up" class="up" onClick="addVote('.$row['image_id'].',"1")"'.$up.' />
        <div class="label-votes">'.$row["votes"].'</div>
            <input type="button" title="Down" class="down" onClick="addVote('.$row['image_id'].',"-1")"'.$down.'/>  
        </div>
    </div>

Here is the script.js which should pass clicked button to add_vote.php

function addVote(image_id,vote_rank) {
    $.ajax({
        url: "add_vote.php",
        data:'image_id='+image_id+'&vote_rank='+vote_rank,
        type: "POST",
        beforeSend: function() {
            $('#links-' + image_id + ' .pull-right').html("<img src='LoaderIcon.gif' />");
        },
        success: function(vote_rank_status){
            var votes = parseInt($('#votes-' + image_id).val());
            var vote_rank_status; // = parseInt($('#vote_rank_status-' + id).val());
            switch(vote_rank) {
                case "1":
                    votes = votes + 1;
                    // vote_rank_status = vote_rank_status + 1;
                    break;
                case "-1":
                    votes = votes-1;
                    //vote_rank_status = vote_rank_status - 1;
                    break;
            }
            $('#votes-' + image_id).val(votes);
            $('#vote_rank_status-' + image_id).val(vote_rank_status);

            var up, down;

            if (vote_rank_status == 1) {
                up = "disabled";
                down = "enabled";
            }

            if (vote_rank_status == -1) {
                up = "enabled";
                down = "disabled";
            }   

            var vote_button_html = '<input type="button" title="Up" id="up" onClick="addVote(' + image_id + ',\'1\')" ' + up + ' /><div class="label-votes">' + votes + '</div><input type="button" title="Down" id="down"  onClick="addVote(' + image_id + ',\'-1\')" ' + down + ' />';    
            $('#links-' + image_id + ' .pull-right').html(vote_button_html);
        }
    });
}

When I click vote up or down nothing happen on the page. Didn't add new vote and didn't insert into database. This is what I see in console of firefox when I click on button

SyntaxError: expected expression, got end of script

and this but I'm not sure if is relevant to this script. Showing that the error is in file jquery-1.10.1.min.js

Empty string passed to getElementById().

Upvotes: 1

Views: 227

Answers (1)

Duncan Cowan
Duncan Cowan

Reputation: 495

Your onclick functions appear to have syntax errors.

onClick="addVote('.$row['image_id'].',"1")"

As you can see, you are using double quotes (around the number 1) inside double quotes. Try:

onClick="addVote('.$row['image_id'].',\"1\")"

Upvotes: 4

Related Questions