Моментальное обновление счётчика рейтинга

Livandey · October 28, 2012

На сайте есть кнопочка "мне нравится" - http://livandey.ru

Но при нажатии значение не изменяется сразу, а лишь при обновлении страницы и то не факт... Мне сказали что при помощи скрипта можно сделать чтобы значение изменялось сразу.

При помощи какого скрипта и как его там прописать?

Radiocity · October 28, 2012

C помощью ajax запроса

Livandey · October 28, 2012

C помощью ajax запроса

будьте добры, расскажите подробнее.

moron · October 28, 2012

C помощью ajax запроса

Зачем огородить лишний запрос, в случае если число уже увеличивается и отдаётся сервером. Можно просто получать содержимое, где находится число и увеличивать на 1, потом вставлять увеличенное число...

Автору: реализовать, описанное мной выше можно следующим образом:

У вас есть код такого содержания:

<a href="javascript://" id="golike" onclick="$.get('/news/0-0-1-100-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});">  <div id="rating_l" align="center">Mне нравится</div></a></div></td><td rowspan="1"><img src="/diz/serdce.png" alt="" style="margin-top: 1px; margin-bottom: 1px; margin-left: 1px; margin-right: 1px"></td><td rowspan="1" align="left" style="text-align: left; letter-spacing: 0px; word-spacing: 0px; vertical-align: middle; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px; background-image: none; background-repeat: repeat; background-position: 0% 0%"> <span style="font-size: 12pt"><span style="font-size: 10pt"><span>+0</span>

Начет жс кода - я не представляю что он делает, но однозначно связан с каким-то рейтингом. Рейтинг один же? "Мне нравится"?

Элемент span, который выступает в качестве кнопки "Мне нравится" имеет ид rating_1,мы получим этот элемент.

Элемент который содержит количество людей, которым нравится не имеет ид, поэтому поставьте ему ид: <span id="ILikeIt">+0</span>

Очевидно, что спан-кнопка "Мне нравится" уже имеет обработчик на событии, я не хочу разбираться в куче кода, поэтому мы добавим ему еще один обработчик, делать мы это будем с помощью AddEventListener во избежание конфликта.

Код, мы предполагаем, что вы дали ид спан-кнопке:

function MoronsHandler(idInput, idVote){
  var inputVote = document.getElementById(idInput);
  var voteVisibly = document.getElementById(idVote);
  var oneVote = 'yes';
  function handler(){
    if(oneVote == 'yes'){
      var count = voteVisibly.innerHTML.slice(1);
      count++;
      voteVisibly.innerHTML = '+'+count;
      oneVote = 'no';
    }else{
      alert('Вы уже голосовали, редиска!!')
    }
  }
  inputVote.addEventListener('click', handler);
}
MoronsHandler('rating_1', 'ILikeIt');

http://jsfiddle.net/vfcKb/

п.с верстка показалась мне ужасной.

--спустя 1мин:

Ие ранее 9 версии код не поймет, мне просто впадлу сделать по-нормальному

--спустя 2мин:

Можно конечно доработать серверный скрипт, так что бы он делал еще один запрос к бд и возвращал значение, но зачем нагружать сервер.

При перезагрузке страницы, можно будет снова визуально увеличить рейтинг на+1, но только визуально.

Edited October 28, 2012 by moron

Livandey · October 28, 2012

Рейтинг один же? "Мне нравится"?

да, рейтинг один.

мой мозг пробует понять, то что вы посоветовали, но покачто до конца не доходит.

в CSS у меня прописано:

#rating_os { 
 float: left; 
 color: #727272;font-size: 12px;padding: 3px 0px;
} 

#rating_os a:link,
#rating_os a:visited,
#rating_os a:hover {text-decoration:none; color:#727272;} 

#rating_l { 
 float:left; 
 padding: 3px 5px 3px 5px; 
} 

#rating_l:hover {color: #fff; text-decoration: none; background: #7f4984;border-radius: 8px;-moz-border-radius: 8px;} 
} 

#rating_p { 
 float:right; 
 color:#235e9b; 
 padding: 3px 5px 3px 5px; 
 background:#b5d9ee; 
}

а код информера такой:

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tbody><tr><td style="padding:3px;">
<div style="float:right">$MODER_PANEL$</div>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>

 <div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><table style="border-collapse: collapse" width="" align="left"><tbody><tr align="center"><td style="background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat"><div id="rating_os"> 
 <a href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('уже оценивали')>-1) _uWnd.alert('Вы уже оценивали данный материал!','Ошибка',{w:270,h:60,t:8000}); else {_uWnd.alert('Вы успешно оценили!','Успех',{w:270,h:60,t:8000})};});"> 
<div id="rating_l" align="center">Mне нравится</div></a></div></td><td rowspan="1"><img src="/diz/serdce.png" alt="" style="margin-top: 1px; margin-bottom: 1px; margin-left: 1px; margin-right: 1px"></td><td rowspan="1" align="left" style="text-align: left; letter-spacing: 0px; word-spacing: 0px; vertical-align: middle; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px; background-image: none; background-repeat: repeat; background-position: 0% 0%"> <span style="font-size: 12pt"><span style="font-size: 10pt"><span>+$RATED$</span></span></span></td></tr></tbody></table></div><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>
<!--IF--><div class="eAttach" align="right"> <a href="$COMMENTS_URL$"><em><span style="font-size: 8pt">Комментарии ($COMMENTS_NUM$)</span></em></a>
</div></td></tr></tbody></table><br>

и я непонимаю куда что нужно дописать.

п.с верстка показалась мне ужасной.

и не удивительно. я не разбираюсь в этом нифига, а это шаблонный хостинг от ucoz.

и там я наверное уже много чего перекорявила. но вроде визуально не заметно =)

мне можно и другой вариант, чтобы при нажатии "мне нравится" человек попадал на саму страницу записи к коментариям. но как это реализовать, я тоже не понимаю.

moron · October 28, 2012

Объясните мне что за рейтинг у вас вешается на элемент с ид golike.

Ксс мне ваш не нужен вобщем-то..

и я непонимаю куда что нужно дописать.

Добавьте ид к спану, в котором находится число людей которым нравится(там где +0).

<span id="ILikeIt">+0</span>

Засуньте куда-нибудь вниз:

<script type="text/javascript">
function MoronsHandler(idInput, idVote){
  var inputVote = document.getElementById(idInput);
  var voteVisibly = document.getElementById(idVote);
  var oneVote = 'yes';
  function handler(){
    if(oneVote == 'yes'){
      var count = voteVisibly.innerHTML.slice(1);
      count++;
      voteVisibly.innerHTML = '+'+count;
      oneVote = 'no';
    }else{
      alert('Вы уже голосовали, редиска!!')
    }
  }
  inputVote.addEventListener('click', handler);
}
MoronsHandler('rating_1', 'ILikeIt');
</script>

мне можно и другой вариант, чтобы при нажатии "мне нравится" человек попадал на саму страницу записи к коментариям. но как это реализовать, я тоже не понимаю.

Ну можно реализовать и это. Надо знать: каким образом генерируются случайные цитаты и как устроена файловая система. Ну или я могу написать дикий бред, который будет брать атрибут href из номера над цитатой и менять location при клике. И в том и в другом случае надо знать, где находится аякс запрос, который обращается к серверному скрипту,увеличивающему счетчик "Мне нравится", чтобы предубедить преждевременную переадресацию. :lol:

Давайте подождем более умных людей, нежели я.

Livandey · October 28, 2012

Ну можно реализовать и это. Надо знать: каким образом генерируются случайные цитаты и как устроена файловая система. Ну или я могу написать дикий бред, который будет брать атрибут href из номера над цитатой и менять location при клике. И в том и в другом случае надо знать, где находится аякс запрос, который обращается к серверному скрипту,увеличивающему счетчик "Мне нравится", чтобы предубедить преждевременную переадресацию.
Давайте подождем более умных людей, нежели я.

я тут подумала, второй вариант наверное будет лучше...

там есть универсальный код для перехода к комментариям новости:

$COMMENTS_URL$

только как его добавить я непонимаю. у меня получается либо рейтинг, либо переход к комментариям при нажатии "мне нравится" без добавления голоса вообще.

moron · October 29, 2012

Я немного подумал и понял, что знать где аякс запрос нам не нужено.

либо переход к комментариям при нажатии "мне нравится" без добавления голоса вообще.

Как вы делали этот переход? вы меняли тег спан на а? оставляли ли вы при этом атрибут ид?

Livandey · October 29, 2012

moron я делала это через визуальный редактор.

под слово "Мне нравится" подставляла этот код:

$COMMENTS_URL$

но ничего не получилось. поэтому я это убрала.

<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tbody><tr align="right"><td style="padding:3px;">
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;"><table style="border-collapse: collapse" width=""><tbody><tr align="center"><td style="background-position: 0% 0%; letter-spacing: 0px; word-spacing: 0px; background-image: none; background-repeat: repeat"><div id="rating_os"> 
 <a href="javascript://" id="golike" onclick="$.get('/news/0-0-1-$ID$-15-1',function(data) {if($(data).text().indexOf('Оцени что-нибудь еще..')>-1) _uWnd.alert('Это ты уже оценил..','Ура',{w:270,h:60,t:8000}); else {_uWnd.alert('Оцени что-нибудь еще..','БлагоДарю!',{w:270,h:60,t:8000})};});"> 
<div id="rating_l" align="center">Mне нравится</div></a></div></td><td rowspan="1"><img src="/diz/serdce.png" alt="" style="margin-top: 1px; margin-bottom: 1px; margin-left: 1px; margin-right: 1px"></td><td rowspan="1" align="left" style="text-align: left; letter-spacing: 0px; word-spacing: 0px; vertical-align: middle; padding-left: 1px; padding-right: 1px; padding-top: 1px; padding-bottom: 1px; background-image: none; background-repeat: repeat; background-position: 0% 0%"> <span style="font-size: 12pt"><span style="font-size: 10pt"><span>+$RATED$</span></span></span></td></tr></tbody></table></div><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>
<a href="$COMMENTS_URL$"><em><span style="font-size: 8pt">Комментарии ($COMMENTS_NUM$)</span></em></a>
</td></tr></tbody></table><br>

я непоняла какой спан вы имеете ввиду.

Edited October 29, 2012 by Livandey

nerv · October 29, 2012

Зачем огородить лишний запрос, в случае если число уже увеличивается и отдаётся сервером

затем, что на момент изменения числа на клиенте, оно уже может быть изменено на сервере

moron · October 29, 2012

затем, что на момент изменения числа на клиенте, оно уже может быть изменено на сервере

И что? Наша цель состоит в визуальном отображении того, что мы проголосовали. А проголосовали ли на самом деле это задача не нашего скрипта, как и то, сколько вообще голосов и что там твориться на сервере. Достаточно всего-лишь показать "ага, мы засчитали твой голос". Разве я не правильно рассуждаю?

Автор: вообще я не знаю, что сейчас вам предлагаю, но замените:

<a href="javascript://" id="golike" onclick="......

на это:

<a href="$COMMENTS_URL$" id="golike" onclick=".....

Livandey · October 29, 2012

moron получилось. благодарю!

сразу двух зайцев... на новой странице уже обновленная информация о кол-ве голосов.

moron · October 29, 2012

благодарю!

Ура, у меня получилось :lol: поставь тогда мне плюсик.

Livandey · October 29, 2012

благодарю!
Ура, у меня получилось поставь тогда мне плюсик.

да я пробовала, но мне не дает. сообщений еще мало =((((

но у меня еще есть вопрос =)

у меня на сайте есть кнопочки вперед и назад. как им настоить внешний вид в CSS ?

http://livandey.ru/news/2012-10-19-785 вот тут например. как к ним обратиться, чтобы было понятно что я их имею ввиду. я им дизайн хочу как кнопочке "мне нравится"

спустя время:

______________

уже сама сделала =)

Edited October 29, 2012 by Livandey

Sign In

Моментальное обновление счётчика рейтинга

Question

Link to comment

Share on other sites

13 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information