Система голосования с использованием PHP, MySQL и jQuery - НЕ работает (ДИАГНОСТИКА)
Попытка заставить это голосование в стиле Reddit работать с PHP, MySQL и jQuery.
Проблема: когда я нажимаю "Проголосовать вверх" или "Проголосовать вниз", ничего не возвращается. Ничего не происходит на странице, вообще.
Я установил, что votes.php
хотя страница работает, но не могу понять, почему нет.
В основном, есть 3 набора кодов:
01. jQuery-скрипты, которые входят в < head
>,
02. HTML внутри < body
> (отображает: кнопки голосования и результаты) / index.php
...
03. страница PHP (votes.php
) куда jquery отправляет действие.
01.) Размещено в моем < head
>:
<script type="text/javascript" src="http://site.com/js/jquery.pack.js"></script>
<script type="text/javascript">
$(function(){
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).html(msg);
//fadein the vote count
$("span#votes_count"+the_id).fadeIn();
//remove the spinner
$("span#vote_buttons"+the_id).remove();
}
});
});
$("a.vote_down").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_down&id="+$(this).attr("id"),
url: "votes.php",
success: function(msg)
{
$("span#votes_count"+the_id).fadeOut().html(msg).fadeIn();
$("span#vote_buttons"+the_id).remove();
}
});
});
});
</script>
02.) Размещено внутри цикла внутри < body
>:
(Кнопки голосования и где должны отображаться результаты)
<div class=\"entry\">
<span class=\"votes_count\" id=\"votes_count" .$id. "\">" .$effective_vote. " votes</span>
<span class=\"vote_buttons\" id=\"vote_buttons" .$id. "\">
<a href=\"javascript:;\" class=\"vote_up\" id=\"" .$id. "\">Vote Up!</a>
<a href=\"javascript:;\" class=\"vote_down\" id=\"" .$id. "\">Vote Down!</a>
</span>
</div>
03.) Мой votes.php
страница (где происходит действие):
// Database connection here //
function getAllVotes($id)
{
$votes = array();
$q = "SELECT * FROM cover WHERE id='$id' ";
$r = mysql_query($q) or die("Error: ". mysql_error(). " with query ". $q);
if(mysql_num_rows($r)==1) {
$row = mysql_fetch_assoc($r);
$votes[0] = $row['votes_up'];
$votes[1] = $row['votes_down'];
}
return $votes;
}
function getEffectiveVotes($id)
{
/**
Returns an integer
**/
$votes = getAllVotes($id);
$effectiveVote = $votes[0] - $votes[1];
return $effectiveVote;
}
$id = $_POST['id'];
$action = $_POST['action'];
//get the current votes
$cur_votes = getAllVotes($id);
//ok, now update the votes
if($action=='vote_up') //voting up
{
$votes_up = $cur_votes[0]+1;
$q = "UPDATE cover SET votes_up = $votes_up WHERE id = $id";
}
elseif($action=='vote_down') //voting down
{
$votes_down = $cur_votes[1]+1;
$q = "UPDATE cover SET votes_down = $votes_down WHERE id = $id";
}
$r = mysql_query($q);
if($r) //voting done
{
$effectiveVote = getEffectiveVotes($id);
echo $effectiveVote." votes";
}
elseif(!$r) //voting failed
{
echo "Failed!";
}
В частности, что мне особенно нравится в этом, по сравнению с другими методами оценки, предоставляемыми онлайн, так это то, что он возвращает общее количество голосов (вычитает количество голосов из числа поднятых голосов и возвращает это значение).
Я не делаю много jQuery или ajax, это иногда смущает меня, но у меня есть очень простые простые знания. (Я обычно просто следую кодам)
Кроме того, как мне сделать это в версии для PDO, а не с помощью MySQL Queries? Буду признателен, если кто-то может помочь с этим. : о)
Не уверен, как уведомить пользователя о Stackru, но разработчик этого проекта:
Пользователь: abhisek (пользователь: 4507330)
Спасибо за ваше время! Надеюсь, кто-то может диагностировать источник проблемы.
2 ответа
Поскольку вы используете jQuery и prototype.js на одной странице, вы должны быть осторожны с тем, как вы используете $
функция (так как обе платформы утверждают, что имя). Одним из вариантов является замена вашей основной функции:
jQuery(function($) {
...
});
Таким образом, вы сможете использовать $
как псевдоним для jQuery
внутри этого блока (но вы не сможете получить доступ к prototype.js). Другой вариант - использовать jQuery's. noConflict
, Проверьте документы для получения дополнительной информации о том, как его использовать.
Вам может понравиться эта система голосования Jquery Ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$(".voteMe").click(function() {
var voteId = this.id;
var upOrDown = voteId.split('_');
$.ajax({
type: "post",
url: "<?= base_url();?>/index.php/article/voteMe",
cache: false,
data:'voteId='+upOrDown[0] + '&upOrDown=' +upOrDown[1],
success: function(response){
try{
if(response=='true'){
var newValue = parseInt($("#"+voteId+'_result').text()) + 1;
$("#"+voteId+'_result').html(newValue);
}else{
alert('Sorry Unable to update..');
}
}catch(e) {
alert('Exception while request..');
}
},
error: function(){
alert('Error while request..');
}
});
});
});
</script>
<style>
ul,ol,li{
list-style-type: none;
}
h2{
color: #2864B4;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<?php
if(is_array($VOTES) && count($VOTES) ) {
?>
<div>
<ul>
<?php foreach($VOTES as $loop){ ?>
<li>
<div>
<h2><?=$loop->VOTE_DESC;?></h2>
<span><a id="<?=$loop->VOTE_ID;?>_upvote" class="voteMe"><img src="<?= base_url();?>/img/images/up_vote.png"/></a><span id="<?=$loop->VOTE_ID;?>_upvote_result" ><?=$loop->UP_VOTE;?></span></span> |
<a id="<?=$loop->VOTE_ID;?>_downvote" class="voteMe"><img src="<?= base_url();?>/img/images/down_vote.png"/></a><span id="<?=$loop->VOTE_ID;?>_downvote_result" ><?=$loop->DOWN_VOTE;?></span>
</div>
</li>
<?php }?>
</ul>
</div>
<?php }?>
</div>
</body>
</html>