不能让jquery upvote工作(jquery插件)

时间:2013-10-23 12:42:17

标签: jquery-plugins voting vote jquery

我已按照 here 的说明操作,我已完成以下操作:

  1. 我已将jquery.upvote.js,jquery.upvote.css和images文件夹上传到wordpress主题文件夹,并照常注册这些文件。

  2. 我已将jquery版本设置为2.0.2

  3. 将基本div放入html:

  4. HTML

     <div id="topic" class="upvote">
        <a class="upvote"></a>
        <span class="count">0</span>
        <a class="downvote"></a>
        <a class="star"></a>
     </div>
    
    1. 并尝试启动插件:
    2. 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);
      

      它不起作用......我错过了什么?

3 个答案:

答案 0 :(得分:3)

相当老的帖子,但这是你可以将其设置为与PHP一起使用的方式。我不确定wordpress,但这应该为你提供一个很好的起点,根据你的需要进行定制。

  • 准备好HTML位(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>

我已解释过event.js以下

  • 设置PHP文件以执行服务器端(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(); }
?>
  • 最后但并非最不重要,你需要从DIV和。中获取值 将其传递给MySQL(或任何其他数据库)。这是使用Ajax post完成的。所以在我的event.js我有以下代码
$(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});


});

不要忘记MySQL表结构是这样的

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;

玩得开心!!!

答案 1 :(得分:0)

  

jQuery Upvote生成一个投票小部件,就像Stack Exchange网站上使用的一样。

通过使用正确的标记,它将呈现<div>看起来像Stack Overflow上的投票小部件。可选地,当您单击投票按钮时,它可以触发AJAX调用。它只能触发它们,它无法实现它们。实现投票系统必须在服务器端完成,jQuery插件不能这样做。

有人可以创建一个WordPress插件来实现投票系统的服务器端部分,并使用这个jQuery插件作为前端来显示投票和触发upvotes,downvotes,starring。

答案 2 :(得分:0)

这可能不是你的情况,但我将文件从Github直接下载到我的本地机器。一些HTML与.js和.css一起悄悄进入。从jquery插件网站下载有帮助 - 也许这也是你的问题。你得到什么错误?