@Web-Building

Кнопки Like / DisLike. При клике на Like, стили на ней появляются, все файлы POST 200, но +1 голос не отображается! Почему?

Доброго времени суток всем!
Один вопрос уже написал в заголовке.
Теперь второй: А при нажатии на кнопку DisLike, страница просто перезагружается ( хотя в Ajax чёткая адресация на PHP-обработчик like_dislike.php ) и данная страница POST 200, а остальные файлы на ней GET 200 ( на 2--ом скрине ). Ну и соответственно, после нажатия нет никаких стилей на DisLike и +1 голос тоже не отображается!

Всего 4 файла: revealator.php - html форма
main.js - Ajax код отправки ( кликов по кнопкам Like / disLike )
like_dislike.php - обработчик и соединение с БД
rating.php - обрабочик like / dislike

Help! SoS!! Помогите пожалуйста разобраться!!! :)

Вначале 1-й скрин ...

5fe7a7aadb4d5666496555.png

Теперь 2ой скрин ...

5fe7aaf1722d0814956148.png

revealator.php - html форма

<div class="block-up">
    <form action="" method="post" id="ratingsLike" onSubmit="ratingLike(<?php echo $trow['id']; ?>,1,'like_count<?php echo $trow['id']; ?>')"> 
        <button type="submit" id="btnLike"><i id="thumbs-up" class="far fa-thumbs-up"></i></button>
    </form> 
     
    <div class="content-like-dislike">
        <span class="thanks">&#160;Thank you very much!</span>&#160;       
        <p id="like_count<?php echo $trow['id']; ?>"><?php echo $trow['like_num']; ?></p>   <!-- Счётчик подсчёта голосов Like -->
    </div>
</div>

<div class="block-down">
    <form action="" method="post" id="ratingsDislike" onSubmit="ratingDisLike(<?php echo $trow['id']; ?>,0,'dislike_count<?php echo $trow['id']; ?>')">
        <button type="submit" id="btnDislike"><i id="thumbs-down" class="far fa-thumbs-down"></i></button>
    </form> 
    
    <div class="content-dislike-like">
        <span class="holding">I'm not holding a grudge...&#160;</span>&#160;         
        <p id="dislike_count<?php echo $trow['id']; ?>"><?php echo $trow['dislike_num']; ?></p>  <!-- Счётчик подсчёта голосов Dislike -->
    </div>
</div>


main.js - Ajax код отправки ( кликов по кнопкам Like / disLike )

$(document).ready(function() {
    
           // Блок - Лайк ( Like )
    $("#ratingsLike").on('submit', function(e) {    
       e.preventDefault();  
// Стили для кнопки Like ....
// Стили для кнопки Like ....        
        function ratingLike(id,type,target){
        $.ajax({
            type:'POST',
            method: "post",
            url: 'https://mysite.com/revealator.php/like_dislike.php',
	    cache: false,
            data:'id='+id+'&type='+type,
            success:function(msg){
                if(msg == 'err'){
                    alert("We're really sorry, but the vote didn't happen!  Please try again.");   
                }
            
                else {
                    $('#'+target).html(msg);
                   
                    $('#btnLike').unbind('click');   
                    $('#btnDislike').unbind('click');  
                    jQuery.get('/do/request');   
                }
            }
        });
        
        $("#ratingsLike").submit();
        
        }
        ratingLike();
        
    });



            // Блок - ДизЛайк ( DisLike )
    $("#ratingDisLike").on('submit', function(e) {    
       e.preventDefault(); 
// Стили для кнопки DisLike ....
// Стили для кнопки DisLike ....
        function ratingDisLike(id,type,target){
        $(this).preventDefault();   
           $.ajax({
            type:'POST',
            method: "post",
            url: 'https://mysite.com/revealator.php/like_dislike.php',
	   cache: false,
            data:'id='+id+'&type='+type,
            success:function(msg){
                if(msg == 'err'){
                    alert("We're really sorry, but the vote didn't happen!  Please try again.");   
                }
            
                else {
                    $('#'+target).html(msg);
                    
                    $('#btnDislike').unbind('click');  
                    $('#btnLike').unbind('click');   
                    jQuery.post('/do/request');   
                }
            }
        });
        
        $("#ratingsDislike").submit();
          
        }
        ratingDisLike();
        
    });

});


like_dislike.php - обработчик и соединение с БД

class Tutorial{
    
    function __construct(){
            // конфигурация базы данных
        $dbHost = 'XXXXXX';  //  Имя БД
        $dbUsername = 'XXXXXX';  // имя пользователя БД  (Логин)
        $dbPassword = 'XXXXXX';  // пароль от mysql
        $dbName = 'XXXXXX';  // название БД
        
            // подключиться к базе данных
        $conn = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
        if($conn->connect_errno){
            echo "Failed to connect to database: (" . $conn->connect_errno . ") " . $conn->connect_error;  // Не удалось подключиться к базе данных
        }else{
            $this->db = $conn;
        }
    }
    
    function get_rows($id = ''){
        if($id != ''){
                // получить одну строку
            $query = $this->db->query("SELECT * FROM tutorials WHERE id = $id");
            $data = $query->fetch_assoc();
        }else{
                // получить все строки
            $query = $this->db->query("SELECT * FROM tutorials");
            if($query->num_rows > 0){

                while($row = $query->fetch_assoc()){
                    $data[] = $row;
                }
            }else{
                $data = array();
            }
        }
        return $data;
    }
    
    function update($data = array(), $conditions = array()){
        $data_array_num = count($data);
        $cols_vals = "";
        $condition_str = "";
        $i=0;
        foreach($data as $key=>$val){
            $i++;
            $sep = ($i == $data_array_num)?'':', ';
            $cols_vals .= $key."='".$val."'".$sep;
        }
        foreach($conditions as $key=>$val){
            $i++;
            $sep = ($i == $data_array_num)?"":" AND ";
            $condition_str .= $key."='".$val."'";
        }
            // обновить данные
        $update = $this->db->query("UPDATE tutorials SET $cols_vals WHERE $condition_str");
        return $update? TRUE : FALSE;
    }
}


rating.php - обрабочик like / dislike

$tutorial = new Tutorial();

/* При нажатии на значок «Нравится» или «Не нравится» вызывается файл rating.php. В этом файле мы получим предыдущее количество лайков или антипатий, увеличим количество лайков или антипатий и вернем текущее количество лайков или антипатий. */

if($_POST['id']){
    $prev_record = $tutorial->get_rows($_POST['id']);  // данные предыдущего руководства
    $prev_like = $prev_record['like_num'];   // предыдущее общее количество лайков
    $prev_dislike = $prev_record['dislike_num'];  // предыдущее общее количество дизлайков
    
       // подсчитывает количество симпатий или антипатий
    if($_POST['type'] == 1){
        $like = ($prev_like + 1);
        $dislike = $prev_dislike;
        $return_count = $like;
    }else{
        $like = $prev_like;
        $dislike = ($prev_dislike + 1);
        $return_count = $dislike;
    }
    
     
    $data = array('like_num'=>$like,'dislike_num'=>$dislike,'modified'=>date("Y-m-d H:i:s"));  // хранить данные обновления
    $condition = array('id'=>$_POST['id']);  // условие обновления
    $update = $tutorial->update($data,$condition);  // обновить учебник, как нелюбовь
        echo $update? $return_count: 'err';  // вернуть номер нравится или не нравится, если обновление прошло успешно, в противном случае вернуть ошибку
}
  • Вопрос задан
  • 373 просмотра
Пригласить эксперта
Ответы на вопрос 1
Решили вопрос? мне кажется у вас в структуре jq кода нарушена последовательность. Я несколько уже подзабыл все нюансы, но
("#ratingDisLike").on('submit', function(e) {
и
$("#ratingsDislike").submit();
это разве не одно и то же?
а у вас одно в другом...

вынесите сами функции выше обработчиков событий - так будет проще понять где что не так...
п.с. вообще задача like/dislike проще несколько должна решаться) но это уже к делу не относится
UPDATE.

Фух... ну что сказать, чтобы не обидеть... надеюсь либо Вы учитесь, либо чей-то код разгребаете... потому что пусть я-не-гуру-но-что-то-умею пришлось повозиться. Как я и предполагал - код jquery неверный от и до.

Я искренне не смотрел Ваши скриншоты, что и куда отправляется и в отличии от многих никогда никого не критикую, ибо сам могу легко ошибаться. Плюс я не сторонник теорий и прочей правильности - главное "штоб работало". Поэтому еще раз - могу быть в корне не прав, но оно работает. Итак, к делу.
1) Код в форме
<form action="" method="post" id="ratingsLike" onSubmit="ratingLike(1,2,3);return false;">

я не уверен onSubmit или onsubmit (мне vscode показывает, что onsubmit корректнее). Далее прописываете функцию и параметры. Добавляете return false. Это вроде как preventDefault срабатывает.
Итого - форма.
<form id="ratingsLike" onsubmit="ratingLike(1,2,3);return false;">
        <button id="btnLike"><i id="thumbs-up" class="far fa-thumbs-up"></i></button>
    </form>

2) Здесь я не уверен почему так (у меня проект на laravel и blade шаблонах), но onsubmit срабатывает корректно (без перезагрузки) когда функция находится вне document.ready.
Скрипт.
<script type="text/javascript">
     function ratingLike(id,type,target){
                    console.log('внутри функции ratingLike' ,id,type,target)
                        $.ajax({
                            method: "POST",
                            url: "/like-dislike", //здесь адрес к обработчику. в вопросе вы написали rating.php а в jquery отправляли на revealator.php/like_dislike.php - это вообще винегрет по-моему(
                            data: { id: id, type:type } // можно еще dataType добавить в зависимости от ответа. 
                            })
                            .done(function( data ) {
                                $('#'+target).html(data.msg)  //вывод - мне приходит json поэтому через дату.
                        });
        }
     $(document).ready(function() {
        $('#btnLike').on('click',function(event){ //клик по кнопке. я убрал type=submit. Можно оставить и тогда этот блок вообще не нужен. Но так больше управляемости.
            event.preventDefault() 
            $('#ratingsLike').submit()
        })
    });

          </script>

в общем не хочу конечно показаться грубым, но проще все или почти все удалить и заново выстроить цепочку. Очень все перемешано и замешано, только чтобы like/dislike сделать.
Но если копаться дальше - ориентируйтесь на то, что я написал по поводу jq. Надеюсь не обидел
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы