can't get jquery upvote to work (jquery plugin)

Question

I've followed instructions from here and I've done the following:

I've uploaded jquery.upvote.js, jquery.upvote.css, and images folder to wordpress theme folder, and registered these files as usual.
I've set the jquery version to 2.0.2
Put in html the basic div:

HTML

 <div id="topic" class="upvote">
    <a class="upvote"></a>
    <span class="count">0</span>
    <a class="downvote"></a>
    <a class="star"></a>
 </div>

and tried to initiate the plugin:

JS

(function($){
    $(document).ready(function(){

$('#topic').upvote();
var callback = function(data) {
    $.ajax({
        url: '/vote', //I don't have this url, idk if this needs to be changed to something else
        type: 'post',
        data: { up: data.upvoted, down: data.downvoted, star: data.starred }
    });
};
    });
})(jQuery);

and it doesn't work... What am I missing?

you are correct. the `url` should point to the php / script that recieves the ajax post data and processes it. — Latheesan, Oct 23 '13 at 12:45
what would that be in wordpress? (note that I don't know nothing about ajax and php) — weaponx, Oct 23 '13 at 12:49

Youbaraj Sharma · Answer 1 · 2016-07-11T07:09:10.703

Quite and old post but this is how you may set this into work with PHP. I am not sure about wordpress but this should give you a good start point to customize as per your needs.

Get the HTML bit ready (home.html)

<html><head><title>Voting Machine</title>
<link rel="stylesheet" type="text/css" href="vote/upvote.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="event.js"></script>
<script type="text/javascript" src="vote/upvote.js"></script>
</head><body>
<div id="topic-123" class="upvote">
<a class="upvote" title="This idea is helpful"></a>
<span class="count">5</span>
<a class="downvote"></a>
<a class="star starred"></a>
</div>
<div id="message"></div>
</body>
</html>

I have explained about event.js below

Set the PHP file to execute the server side (insert.php)

<?php
 $con = mysql_connect("localhost","root","password");
 if (!$con) {
 die('Could not connect: ' . mysql_error());
 }
 mysql_select_db("ccy", $con);
 $code=$_POST['id'];
 $up=$_POST['up'];
 $down=$_POST['down'];
 $star=$_POST['star'];
 $query=mysql_query("INSERT INTO mytable(code,up,down,star) VALUES('$code','$up','$down','$star')");
if($query){
echo "Data for $name inserted successfully!";
}
else{ echo "An error occurred!" . mysql_error(); }
?>

Last but not the least, you need to get the values from the DIV and pass it on to MySQL (or any other database). This is done using Ajax post. So in my event.js I have following code

$(document).ready(function(){
var callback = function(data) {
    $.ajax({
        url: 'insert.php',
        type: 'post',
        data: { id: data.id, up: data.upvoted, down: data.downvoted, star: data.starred },
         success: function(data) {
            $("#message").html(data);
$("#message").hide();
$("#message").fadeIn(1500); 
        }
    });
};
$('#topic-123').upvote({id: 123, callback: callback});


});

Not to forget that the MySQL table structure is like this

CREATE TABLE `mytable` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `code` bigint(20) DEFAULT NULL,
  `up` varchar(45) DEFAULT NULL,
  `down` varchar(45) DEFAULT NULL,
  `star` varchar(45) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=129 DEFAULT CHARSET=utf8;

Have fun!!!

What is event.js?? – Omari Victor Omosa Jul 09 '16 at 18:22 — Omari Victor Omosa, Jul 09 '16 at 18:22

score 0 · Answer 2 · answered Dec 26 '13 at 09:20

jQuery Upvote generates a voting widget like the one used on Stack Exchange sites.

By using the correct markup, it will render a <div> to look like the voting widget on Stack Overflow. Optionally it can trigger AJAX calls when you click on the voting buttons. It can only trigger them, it cannot implement them. Implementing the voting system must be done on the server-side, a jQuery plugin cannot do that.

Somebody could create a WordPress plugin that implements the server-side part of a voting system, and use this jQuery plugin as the front-end for displaying votes and for triggering upvotes, downvotes, starring.

score 0 · Answer 3 · answered Aug 15 '15 at 18:11

This might not be your situation, but I download the files from Github directly into my local machine. Some HTML crept in along with the .js and .css. Downloading from the jquery plugin site helped - maybe that's your issue as well. What error are you getting?

can't get jquery upvote to work (jquery plugin)

3 Answers3