Гласуване +1 / -1 на снимки малко помощ

vinsbg

Registered
Пак ще се наложи да ви тормозя с този скрипт... Извинявам се за което, но имам нужда от помощ.

На страницата имам 20 снимки и на всяка има палец нагоре и палец надолу, съответно за +1 и –1.

До тук добре и всичко функционира.. снимките са там и вотовете се записват в базата и визуализират на всяка снимка. При първо гласуване ( без значение коя снимка ) се ъпдейтва каунтара и показва новия вот, но при всяко следващо гласуване на друга снимка не се променя и не показва нищо, докато не се рефрешне страницата. След рефреш показва новите стойности.

Ще се опитам да го обясня така.

Снимка 1, Снимка 2, Снимка 3 ... Снимка_N

аз влизам и гласувам на Снимка 1. Гласа се отчита и променя +1 или - 1.. веднага след това натискам +1 на снимка 2, но нищо не се променя. Когато рефрешна страницата показва промяната на снимка 2..

Мисля, че се сещам къде е проблема, но не се сещам как да го оправя. Понеже въртя в цикъл изваждането на снимките и явно от там идва проблема понеже бутоните са с едно ID или и аз не знам точно как да го кажа.

Това е където извеждам съответния брой гласове за една снимка и бутоните на снимката

Код:
$result = $pdo->prepare("SELECT t.* FROM images t order by randorder ASC LIMIT 20");
$result->execute();

for($i=0; $row = $result->fetch(); $i++)
{	           
$cookie_name = 'vote'.$row['image_id']; // Set up the cookie name           
$value = $pdo->prepare('SELECT * FROM voting WHERE image_id= ?'); // BDD query, page ID values
$value->bindParam(1, $row['image_id'], PDO::PARAM_INT);
$value->execute();
$vote = $value->fetch(); 
echo '      

if (isset($_COOKIE[$cookie_name])) { 
    echo '<div class="vote_up_done oneLine"></div>
          <div class="numberVoted oneLine">'.$vote['positive'].'</div>';
}
else 
{
    echo '<div class="vote_up oneLine" id="voteUp"><a href="#" onclick="vote(\'positive\', \'1\', '.$row['image_id'].'); return false;"></a></div>
          <div class="number oneLine" id="positive">'.$vote['positive'].'</div>';
}                       
if (isset($_COOKIE[$cookie_name])) {
    echo '<div class="vote_down_done oneLine"></div>
          <div class="numberVoted oneLine">'.$vote['negative'].'</div>';
}
else 
{ 
    echo '<div class="vote_down oneLine" id="voteDown"><a href="#" onclick="vote(\'negative\', \'1\', '.$row['image_id'].'); return false;"></a></div>
          <div class="number oneLine" id="negative">'.$vote['negative'].'</div>';
}

// snimkata
И това е .js-то
Код:
    function vote(type, value, image_id) {
    	var dataFields = {'type': type, 'value': value, 'image_id': image_id}; 
    	$.ajax({ // Ajax
    		type: "POST",
    		url: "misc/ad_vot.php",
    		data: dataFields,
    		timeout: 3000,
    		success: function(dataBack){
    			$('#' + type).html(dataBack);
    			$('#voteUp').attr('class', 'vote_up_done oneLine');
    			$('#voteDown').attr('class', 'vote_down_done oneLine');
    			$('#positive').attr('class', 'numberVoted oneLine'); 
    			$('#negative').attr('class', 'numberVoted oneLine');
    			$('#message').html('<div id="alertFadeOut" style="color: green">Вашят вот е добавен!</div>');
//    			$('#' + type+"_"+image_id).html(dataBack);
    			$('#alertFadeOut').fadeOut(3000, function () {
    				$('#alertFadeOut').text('');
    			});
    			},
    		error: function() {
    			$('#message').text('Неуспешен вот. Моля опитайте отново.');
    		}
    	});
    }
ajax-a изпраща 3-те аргумента към php-то -
type - Negative или Positive
value - 1/-1
image_id - ID-то на снимката.

success функцията променя бутона на натиснат и ненатиснат.
 
Имам 1 въпрос, защо ползваш for лууп за обхождане на инфото от ДБ ? Не, че имам нещо напротив, просто ми изглежда не е естествено :D

Ajax-а изглежда много добре, ако се съмняваш за функциалноста му, слагай по един арлет за всяка стъпка и виж кой ще се покаже и така ще знаеш каде е проблема.

За php-то, явно имаш проблем при връщането, пробвай при success функцията да изкараш върнатото и да видиш точно какво се връща за всяка снимка и провери дали ИД-тата съответстват или не.

Колкото и добре да ти изглежда ажакса също ме кара да се съмнявам в него защото пак при success ф-цията разни ИД-та получават някакъв клас или им се маха текст, ама си дал 1 ИД, а те не са ли повече ? ако е така скрипта за това се бъгва.

Прегледай си кода пак и ако не се оправиш дай да видя структурата на html-a на снимките :)
 
Благодаря за отговора. Фор луупа е там заради страницирането.. така работи просто.

Да проблема е в аякса понеже така се явява на всички снимки 1 id .. php часта няма проблеми, защото тя винаги си работи...

Проблема е че на всичките 20 снимки id-тата на voteup и votedown бутоните се явяват едно и също. Id-тата на снимките са различни. В изходния код на страницата се получава това:
Снимка 1
Код:
<div class="pull-right">
    <div id="lineBlock">Рейтинг: <div class="vote_up oneLine" id="voteUp"><a href="#" onclick="vote('positive', '1', 1810); return false;"></a></div>
    <div class="number oneLine" id="positive">6</div>
    <div class="vote_down oneLine" id="voteDown"><a href="#" onclick="vote('negative', '1', 1810); return false;"></a></div>
    <div class="number oneLine" id="negative">1</div></div>
 </div>
снимка 2
Код:
<div class="pull-right">
        <div id="lineBlock">Рейтинг: <div class="vote_up oneLine" id="voteUp"><a href="#" onclick="vote('positive', '1', 366); return false;"></a></div>
	<div class="number oneLine" id="positive">4</div>
        <div class="vote_down oneLine" id="voteDown"><a href="#" onclick="vote('negative', '1', 366); return false;"></a></div>
	<div class="number oneLine" id="negative">2</div>
 </div>
1810 и 366 са ID-тата на снимките.
 
Значи веднага стигам до решение, НО, предполагам искаш да си запазиш структурата на фунцията и html-a, нали?

Затова направи следното:
1. На всяка снимка (там кадето ги отделяш със class="pull-right" ) добави и ид-то на снимката като клас или като ИД(ти си избираш) .

Пример : <div id='1810' class='pull-right'>...(кода тук остава не променен)..</div>

2. в функцията се обърни към елемент с ИД-то на картинката и всичко ще е ок.

Ето как ще стане функцията ти :)
[js]

function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id};


// ---------
var ThisImageVotes = $("#"+image_id).find('#'+type).html();
// '#'+type -> shte nameri tochniq konteiner

$.ajax({ // Ajax
type: "POST",
url: "misc/ad_vot.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$("#"+image_id).find('#'+type).html(dataBack); // sushtoto kato gornoto samo che ne e na promenliwa :) Onowa wzima, a towa slaga stoinost
$('#voteUp').attr('class', 'vote_up_done oneLine');
$('#voteDown').attr('class', 'vote_down_done oneLine');
$('#positive').attr('class', 'numberVoted oneLine');
$('#negative').attr('class', 'numberVoted oneLine');
$('#message').html('<div id="alertFadeOut" style="color: green">Вашят вот е добавен!</div>');
// $('#' + type+"_"+image_id).html(dataBack);
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Неуспешен вот. Моля опитайте отново.');
}
});
}[/js]

:?: :?: :?:
 
Това сега работи и ъпдейтва на всяка снимка, НО мога да гласувам колкото си пъти искам за една и съща снимка, докато не рефрешна. Когато рефрешна страницата вече сработва кукито и не може да се гласува...

+ Спря да записва в базата...

edit:
Явно проблема е съществувал от преди това, защото чак сега забелязвам, че не записва в таблицата снимката за която е гласувано :oops:

Ще пробвам да го оправя това и ще пробвам след това твоето предложение.
 
Aми ето го..
Код:
    	$type = $_POST['type'];
    	$value = $_POST['value'];
    	$image_id = $_POST['image_id'];    
    	   	
     			$value = $pdo->prepare('SELECT * FROM voting WHERE image_id= ?');
    			$value->bindParam(1, $_POST['image_id'], PDO::PARAM_INT);
    			$value->execute();
    			$result = $value->fetch();    

    if( $result > 0) {
    
    	$query = $pdo->prepare('UPDATE voting SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
        $query -> execute(array(
                ":image_id"    => $_POST['image_id']               
        ));
    }
    else 
    {
        $type = $_POST['type'];
    	$value = $_POST['value'];
    	$image_id = $_POST['image_id']; 
    	    			   
    	$query = $pdo -> prepare("INSERT INTO voting (image_id,positive,negative)
                                VALUES (:image_id, :positive, :negative)");   
        $query -> execute(array(
                          ":image_id"           => $_POST['image_id'],
                          ":positive"          => '0',
                          ":negative"          => '0'
        ));     
        
       	$query = $pdo->prepare('UPDATE voting SET '.$type.' = '.$type.' + 1 WHERE image_id= :image_id');
        $query -> execute(array(
                ":image_id"    => $_POST['image_id']               
        ));    
    }
    
    	$value = $pdo->prepare('SELECT * FROM voting WHERE image_id= ?'); 
    	$value->bindParam(1, $_POST['image_id'], PDO::PARAM_INT);
    	$value->execute();
    	$result = $value->fetch();   
    	
    	$expire = 24*3600; 
    	setcookie('vote'.$image_id, 'voted', time() + $expire, '/');
    	
    	echo $result[$type];
 
Ами това пак е Js кода, аз ти предлагам или да замениш натиснатия ЛИНК с спан или да му махнеш просто атрибута onclick, за да може при 2-ро натискане, да не става нищо.

Пример: [js] $("#"+image_id).find('#voteUp a').replaceWith('<a href="#" onclick="return false;"></a>');[/js]

И така кода ти ще стане така :

[js] function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id};


// ---------
var ThisImageVotes = $("#"+image_id).find('#'+type).html();
// '#'+type -> shte nameri tochniq konteiner

$.ajax({ // Ajax
type: "POST",
url: "misc/ad_vot.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$("#"+image_id).find('#'+type).html(dataBack); // sushtoto kato gornoto samo che ne e na promenliwa Smile Onowa wzima, a towa slaga stoinost

if(type=='positive')
{
$("#"+image_id).find('#voteUp a').replaceWith('<a href="#" onclick="return false;"></a>');
}
else if(type=='negative')
{
$("#"+image_id).find('#voteDown a').replaceWith('<a href="#" onclick="return false;"></a>');
}

else { alert('You can only vote UP or DOWN !! '); }

$('#voteUp').attr('class', 'vote_up_done oneLine');
$('#voteDown').attr('class', 'vote_down_done oneLine');
$('#positive').attr('class', 'numberVoted oneLine');
$('#negative').attr('class', 'numberVoted oneLine');
$('#message').html('<div id="alertFadeOut" style="color: green">Вашят вот е добавен!</div>');
// $('#' + type+"_"+image_id).html(dataBack);
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Неуспешен вот. Моля опитайте отново.');
}
});
}[/js] :?: :?:

ЕДИТ: вече е ЪПДЕЙТНАТО и изпровано :)
 
Струва ми се, че почти е готово, но има нещо, което ме притеснява и не ми харесва как работи...

На първата снимка на която се гласува всичко е наред. Гласува си се и повече не може.
На всяла следваща обаче мога да гласувам веднъж +1 и веднъж -1 преди бутоните да станат неактивни. Тоест трябва да се натисне всеки бутон по веднъж, а не би трябвало да е така.
 
Това е защото тези редове също трябва да се променят.
$('#voteUp').attr('class', 'vote_up_done oneLine');
$('#voteDown').attr('class', 'vote_down_done oneLine');
$('#positive').attr('class', 'numberVoted oneLine');
$('#negative').attr('class', 'numberVoted oneLine');
$('#message').html('<div id="alertFadeOut" style="color: green">Вашят вот е добавен!</div>');
// $('#' + type+"_"+image_id).html(dataBack);
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},

трябва да стане:

[js] function vote(type, value, image_id) {
var dataFields = {'type': type, 'value': value, 'image_id': image_id};


// ---------
var ThisImageVotes = $("#"+image_id).find('#'+type).html();
// '#'+type -> shte nameri tochniq konteiner




$.ajax({ // Ajax
type: "POST",
url: "misc/ad_vot.php",
data: dataFields,
timeout: 3000,
success: function(dataBack){
$("#"+image_id).find('#'+type).html(dataBack); // sushtoto kato gornoto samo che ne e na promenliwa :) Onowa wzima, a towa slaga stoinost

if(type=='positive')
{
$("#"+image_id).find('#voteUp a').replaceWith('<a href="#" onclick="return false;"></a>');
}
else if(type=='negative')
{
$("#"+image_id).find('#voteDown a').replaceWith('<a href="#" onclick="return false;"></a>');
}

$("#"+image_id).find('#voteUp$("#"+image_id).find('#voteUp a')').attr('class', 'vote_up_done oneLine');
$("#"+image_id).find('#voteDown').attr('class', 'vote_down_done oneLine');
$("#"+image_id).find('#positive').attr('class', 'numberVoted oneLine');
$("#"+image_id).find('#negative').attr('class', 'numberVoted oneLine');

$('#message').html('<div id="alertFadeOut" style="color: green">Вашят вот е добавен!</div>');
//
$('#alertFadeOut').fadeOut(3000, function () {
$('#alertFadeOut').text('');
});
},
error: function() {
$('#message').text('Неуспешен вот. Моля опитайте отново.');
}
});
}[/js] :!: :idea: :?: :?:
 
Здравей, нямах възможност почивните дни да го погледна и сега го пробвах, но получавам следното:
Uncaught SyntaxError: missing ) after argument list
на ред 29, който е:
Код:
$("#"+image_id).find('#voteUp$("#"+image_id).find('#voteUp a')').attr('class', 'vote_up_done oneLine');

edit:

Оправих го като смених единичните кавички с двойни ето тук:
find("#voteUp a")

обаче сега получавам следната грешка в конзолата
Код:
Uncaught Error: Syntax error, unrecognized expression: #voteUp$("#"+image_id).find("#voteUp a")

edit2:
Оправи се така
Код:
$("#"+image_id).find('#voteUp').find("#"+image_id).find("#voteUp a").attr('class', 'vote_up_done oneLine');
Мерси за помощта :?:
 

Back
Горе