Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Cчетчик кликов по картинке без перезагрузки php+ajax с записью в БД

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (2): [1] 2 »   

> Без описания
Поиск в теме | Версия для печати
Andruxa
Отправлено: 11 Декабря, 2013 - 18:24:26
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Друзья! Помогите пожалуйста сделать счетчик кликов (что то типа лайков) по картинке, без перезагрузки и с записью значения в БД.
Задание! Сделать систему оценок текстовых поздравлений.
1) при нажатии на картинку(ссылку) заносить/прибавлять +1 в поле таблицы(например counts) соответствующего поздравления (по id поздравления), и думаю здесь же добавлять в отдельную таблицу IP проголосовавшего;
2) если пользователь голосует снова за это же поздравление, вывести сообщение, что он уже голосовал за это поздравление ( IP у нас будет в таблице, т.е при повторном нажатии сделать проверку на существование IP в базе).
3) сделать автоочистку таблицы IP например через сутки.

Думаю задание не сильно сложное, основной вопрос для меня в передаче параметров без перезагрузки, с Ajax пока не дружу Недовольство, огорчение

У кого есть желание и время , буду благодарен за помощь!

(Отредактировано автором: 11 Декабря, 2013 - 18:29:01)

 
 Top
Deonis
Отправлено: 11 Декабря, 2013 - 19:50:30
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Чтоб не повторяться, посмотрите мой ответ на аналогичный вопрос. Это то, что касается вашей "не дружбы" с Ajax-ом. Остальное, я думаю, что для вас не составит труда написать самому.
 
 Top
Andruxa
Отправлено: 11 Декабря, 2013 - 20:00:35
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Deonis
Спасибо! Да, похоже то что искал, буду разбираться...
 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 12:07:02
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Deonis
CODE (html):
скопировать код в буфер обмена
  1.  <button data-rating="1">Лайк</button>
  2.     <button data-rating="-1">Не очень лайк</button>
  3.     <div id="res">Текущая оценка: <span>0</span></div>

Я так понимаю, что data-rating="1" будет передаваться как переменная со значением 1, так!?
Вопрос, такого рода значения можно к любым тегам приклеить?
Так можно ?
CODE (html):
скопировать код в буфер обмена
  1. <a href=' ' class='plus' data-rating='1'></a>


Ваш пример работает на ура, а вот при модернизации под себя, че то возникают трудности
Вот что у меня получается:
CODE (html):
скопировать код в буфер обмена
  1. <div class='dop_blok' ><a href='' class='plus' data-rating='1'></a><b>0</b></div>

CODE (javascript):
скопировать код в буфер обмена
  1.  $(function(){
  2.         var output = $(".dop_blok b"); // элемент, в который будем выводить результат
  3.         $('a .plus').on('click', function(){
  4.             var cRating = $(this).data('rating'); // значение атрибута data-rating нажатой кнопки
  5.             $.ajax({
  6.                 url: 'http://localhost/site.ru/actions.php', // Путь к обработчику
  7.                 type: 'POST', // метод передачи данных
  8.                 dataType: 'json', // формат, в котором ожидается получить ответ с сервера
  9.                 data: {someVal: cRating}, // передаваемые данные
  10.                 success: function(data){
  11.                     // data - сформированный ответ на стороне сервера
  12.                     output.text(output.text()*1 + data); // выводим информацию в нужный блок
  13.                 }
  14.             });
  15.         });
  16.     });

Но результата 0.
И еще такое момент, поясните вот эту запись
CODE (javascript):
скопировать код в буфер обмена
  1.  $(this).data('rating'); // При объявлении переменной у нас же запись в таком формате: data-rating ,  тут в виде .data('rating')  
 
 Top
Deonis
Отправлено: 12 Декабря, 2013 - 12:25:17
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
По поводу атрибутов data-*, пробегитесь по этой статье. Там же найдете ответ по поводу получения значений средствами jQuery.
Andruxa пишет:
при модернизации под себя, че то возникают трудности
Посмотрите в консоле какие данные возвращает сервер, есть ли ошибки. Добавьте в метод $.ajax() параметр error:
CODE (javascript):
скопировать код в буфер обмена
  1. $.ajax({
  2.     /* прочие параметры */
  3.     error: function(req, text, error) {
  4.         alert('Ошибка AJAX: ' + text + ' | ' + error);
  5.     }
  6. });

Покажите, как вы формируете ответ в серверной части.

P.S. Только что обратил внимание на этот кусочек кода - $('a .plus'). Такой селектор указывает, что выбрать элементы с классом "plus", которые являются дочерними тэгов <a>. Но для вашего случая, тэг и класс относятся к одному элементу. Поэтому запись должна быть такой:
CODE (javascript):
скопировать код в буфер обмена
  1. $('a.plus').on(...
  2. // или просто
  3. $('.plus').on(...

(Отредактировано автором: 12 Декабря, 2013 - 12:30:14)

 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 12:39:15
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Цитата:
Посмотрите в консоле какие данные возвращает сервер, есть ли ошибки. Добавьте в метод ;юфофч() параметр error:
Про это вообще ничего не понял Улыбка как это сделать.
Цитата:
Покажите, как вы формируете ответ в серверной части.

Такая же и осталась
PHP:
скопировать код в буфер обмена
  1. if(!empty($_POST['someVal'])) $someVal = (int)$_POST['someVal'];
  2.     if(isset($someVal) && $someVal != 0) {
  3.         // обрабатываем полученные данные, напр. записываем значение в БД
  4.         // и возвращаем ответ
  5.         echo json_encode($someVal); // возвратим то значение, которое получили
  6.         // *передавать можно и массив данных, и одиночные значения
  7.         exit;
  8.     }
 
 Top
Deonis
Отправлено: 12 Декабря, 2013 - 12:46:07
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Andruxa пишет:
Про это вообще ничего не понял
Кракозябры поправил Улыбка ;юфофч() === $.ajax(). Про консоль, я думаю, что значете, остался вопрос по поводу селектора и еще один момент - путь к обработчику: не нужно писать полный адрес, достаточно указать от корня сайта "/action.php".

(Отредактировано автором: 12 Декабря, 2013 - 12:46:47)

 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 13:31:49
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Про консоль все равно не понял Не понял , по поводу селектора, подправил
CODE (javascript):
скопировать код в буфер обмена
  1.  $('.plus').on('click', function(){ ...

Путь прописал полный, что бы уже наверняка Улыбка))
 
 Top
Deonis
Отправлено: 12 Декабря, 2013 - 13:43:28
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Andruxa пишет:
Про консоль все равно не понял
Давайте по другому, чтоб наверняка. Есть разные инструменты для отладки. Если иcпользуете Chrome, то это "Инструменты разработчика" (Ctrl+Shift+I), но лично мне более удобно отладку делать в FireBug (под FireFox). И в Opera есть аналоги, и других браузерах тоже. Что выберите - дело личное. Но в любом случае, эти отладчики, позволят вам видеть какие данные передаются на сервер, что сервер возвращает на запрос и другую полезную инфу тоже можно там получать, и отслеживать различные процессы.

(Отредактировано автором: 12 Декабря, 2013 - 13:44:25)

 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 13:53:31
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
Ну методом научного тыка, вроде нашел консоль ( я мозилой пользуюсь) , только честно говоря, что там смотреть не совсем понимаю
 
 Top
Deonis
Отправлено: 12 Декабря, 2013 - 13:58:13
Post Id



Посетитель


Покинул форум
Сообщений всего: 298
Дата рег-ции: Нояб. 2009  


Помог: 14 раз(а)
Повторю - FireBug для FF
 
 Top
IllusionMH
Отправлено: 12 Декабря, 2013 - 14:04:59
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Andruxa, Ctrl+Shift+I либо F12. Должено сработать в любом браузере.
А там уже по вкладочкам.
Чтобы глянуть ответ от сервера ищите Сеть Network, там ищите запрос к своему php файлу и смотрите что отправили и получили

(Отредактировано автором: 12 Декабря, 2013 - 14:06:16)

 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 17:24:55
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
С горем пополам разобрался Улыбка
Практически достиг нужного результата.
Вот рабочая часть:
PHP:
скопировать код в буфер обмена
  1. echo"<div class='dop_blok'><div class='plus' data-rating='1' data-id='".$info['id']."'></div><b>".get_counts_p($info['id'])."</b></div>";


CODE (javascript):
скопировать код в буфер обмена
  1. $(function(){
  2.       //  var output = $(".dop_blok b"); // элемент, в который будем выводить результат
  3.         $('.plus').on('click', function(){
  4.             var cRating = $(this).data('rating'); // значение атрибута data-rating нажатой кнопки
  5.             var cId = $(this).data('id');
  6.             $.ajax({
  7.                 url: 'http://localhost/site.ru/actions.php', // Путь к обработчику
  8.                 type: 'POST', // метод передачи данных
  9.                 dataType: 'json', // формат, в котором ожидается получить ответ с сервера
  10.                 data: {someVal: cRating, someID: cId}, // передаваемые данные
  11.                 success: function(data){
  12.                     // data - сформированный ответ на стороне сервера
  13.                     output.text(output.text()*1 + data); // выводим информацию в нужный блок
  14.                 }
  15.             });
  16.         });
  17.     });


PHP:
скопировать код в буфер обмена
  1. if(!empty($_POST['someVal']) and !empty($_POST['someID'])) {
  2.      $someVal = (int)$_POST['someVal'];
  3.      $someID = (int)$_POST['someID'];
  4.     }
  5.     if(isset($someVal) && $someVal != 0 ) {
  6.         $counts=get_counts_p($someID);
  7.         $counts++;
  8.         $stm  = db_connect()->prepare("UPDATE pozdravleniya SET counts=:counts WHERE id=:id");        
  9.         $stm->execute(array('counts'=>$counts, 'id'=>$someID));        
  10.        // echo json_encode($someVal); // возвратим то значение, которое получили
  11.         // *передавать можно и массив данных, и одиночные значения
  12.         exit;
  13.     }

Все работает на ура! Но не могу догнать как вернуть кол-во голосов из базы ( с новым записанным значением) без перезагрузки в нужное место? т.е пока реализовал на 50% запись делаю, возврат не получается
Пробовал так
PHP:
скопировать код в буфер обмена
  1. echo json_encode(get_counts_p($someID));
- как то неодекватно ведет себя
 
 Top
IllusionMH
Отправлено: 12 Декабря, 2013 - 17:49:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4254
Дата рег-ции: Февр. 2011  
Откуда: .kh.ua


Помог: 242 раз(а)
Andruxa, сразу после подсчета голосов когда отработали все функции
PHP:
скопировать код в буфер обмена
  1. exit(json_encode(array('newvalue' => $counts)));


на клиенте
CODE (javascript):
скопировать код в буфер обмена
  1. console.log(data.newvalue);
 
 Top
Andruxa
Отправлено: 12 Декабря, 2013 - 18:31:28
Post Id



Частый гость


Покинул форум
Сообщений всего: 140
Дата рег-ции: Март 2010  


Помог: 0 раз(а)
IllusionMH
можно подробнее для тупых Улыбка)
Да, я посмотрел , результат возвращается что надо, но как мне вставить его в это место ?
PHP:
скопировать код в буфер обмена
  1.     echo"<div class='dop_blok'><div class='plus' data-rating='1' data-id='".$info['id']."'></div><b>"Вот сюда!"</b></div>";
 
 Top
Поиск в теме | Версия для печати
Страниц (2): [1] 2 »
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Напишите за меня, пожалуйста »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB