За последние 24 часа нас посетили 17539 программистов и 1627 роботов. Сейчас ищут 1987 программистов ...

Конфликт? лайки и прокрутка ajax

Тема в разделе "JavaScript и AJAX", создана пользователем EvilScorpion, 15 окт 2016.

Метки:
  1. EvilScorpion

    EvilScorpion Новичок

    С нами с:
    15 окт 2016
    Сообщения:
    44
    Симпатии:
    1
    Привед Уважаемые программисты.
    Делаю вывод новостей каждые 6 постов, но тут походу конфликт или я не пойму в чем дело, перестает работать "лайк и дизлайк" после вывода 6 новых новостей при скролинге т.е все новости которые выводятся через ajax скрилинг лайки и дизлайки прекращают работать а первые 6 новостей работают.

    Вот два когда, первый скролинг и второй //VOTE лайки и дизлайки
    Код (Javascript):
    1.                
    2.             //####### on page load, retrive votes for each content
    3.     $.each( $('.voting_wrapper'), function(){
    4.        
    5.         //retrive unique id from this voting_wrapper element
    6.         var unique_id = $(this).attr("id");
    7.        
    8.         //prepare post content
    9.         post_data = {'unique_id':unique_id, 'vote':'fetch'};
    10.        
    11.         //send our data to "like_dislike.php" using jQuery $.post()
    12.         $.post('like_dislike.php', post_data,  function(response) {
    13.        
    14.                 //retrive votes from server, replace each vote count text
    15.                 $('#'+unique_id+' .up_votes').text(response.vote_up);
    16.                 $('#'+unique_id+' .down_votes').text(response.vote_down);
    17.             },'json');
    18.     });
    19.    
    20.    
    21.     //####### on button click, get user vote and send it to like_dislike.php using jQuery $.post().
    22.     $(".voting_wrapper .voting_btn").click(function (e) {
    23.          
    24.         //get class name (down_button / up_button) of clicked element
    25.         var clicked_button = $(this).children().attr('class');
    26.        
    27.         //get unique ID from voted parent element
    28.         var unique_id     = $(this).parent().attr("id");
    29.        
    30.         if(clicked_button==='down_button') //user disliked the content
    31.         {
    32.             //prepare post content
    33.             post_data = {'unique_id':unique_id, 'vote':'down'};
    34.            
    35.             //send our data to "like_dislike.php" using jQuery $.post()
    36.             $.post('like_dislike.php', post_data, function(data) {
    37.                
    38.                 //replace vote down count text with new values
    39.                 $('#'+unique_id+' .down_votes').text(data);
    40.                
    41.                 //thank user for the dislike
    42.             //    alert("Thanks! Each Vote Counts, Even Dislikes!");
    43.                
    44.             }).fail(function(err) {
    45.            
    46.             //alert user about the HTTP server error
    47.             //alert(err.statusText);
    48.             });
    49.         }
    50.         else if(clicked_button==='up_button') //user liked the content
    51.         {
    52.             //prepare post content
    53.             post_data = {'unique_id':unique_id, 'vote':'up'};
    54.            
    55.             //send our data to "like_dislike.php" using jQuery $.post()
    56.             $.post('like_dislike.php', post_data, function(data) {
    57.            
    58.                 //replace vote up count text with new values
    59.                 $('#'+unique_id+' .up_votes').text(data);
    60.                
    61.                 //thank user for liking the content
    62.                 //alert("Thanks! For Liking This Content.");
    63.             }).fail(function(err) {
    64.            
    65.             //alert user about the HTTP server error
    66.             alert(err.statusText);
    67.             });
    68.         }
    69.  
    70.     });
    71.     //end
    72.    
    73. /* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */    
    74. var inProgress = false;
    75. /* С какой статьи надо делать выборку из базы при ajax-запросе */
    76. var startFrom = 6;
    77.  
    78.     /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    79.     $(window).scroll(function() {
    80.  
    81.                
    82.         /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
    83.         if($(window).scrollTop() + $(window).height() >= $(document).height() && !inProgress) {
    84.    
    85.         $.ajax({            
    86.             /* адрес файла-обработчика запроса */
    87.             url: 'obrabotchik.php',
    88.             /* метод отправки данных */
    89.             method: 'POST',
    90.             /* данные, которые мы передаем в файл-обработчик */
    91.             data: {"startFrom" : startFrom},
    92.             /* что нужно сделать до отправки запрса */
    93.             beforeSend: function() {
    94.                
    95.             /* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
    96.             inProgress = true;}
    97.            
    98.             /* что нужно сделать по факту выполнения запроса */            
    99.             }).done(function(data){
    100.                
    101.            
    102.             /* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
    103.             data = jQuery.parseJSON(data);
    104.            
    105.             /* Если массив не пуст (т.е. статьи там есть) */
    106.             if (data.length > 0) {
    107.                          
    108.             /* Делаем проход по каждому результату, оказвашемуся в массиве,
    109.             где в index попадает индекс текущего элемента массива, а в data - сама статья */
    110.                
    111.             $.each(data, function(index, data){
    112.                    
    113.             /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
    114.             $("#articles").append("<div  class='webo4ka1'><div class='webo4ka2'>\
    115.            <img class='mem'  src='uploads/"+ data.path +"' title='"+ data.description +"' /></div><div class='my_bot'>\
    116.            <div class=\"voting_wrapper\" id=\""+ data.id +"\">\
    117.            <div class=\"voting_btn\"><div class=\"down_button\"><span class=\"dis_like\"><img src=\"img/happy.png\"/></span></div><span class=\"down_votes\">0</span></div>\
    118.            <div class='voting_btn'><div class='up_button'><span class='like'><img src='img/happy.png'/></span></div><span class='up_votes'>0</span></div>\
    119.            <span class=report'></span>\
    120.            </div></div></div>");
    121.             });
    122.    
    123.                    
    124.             /* По факту окончания запроса снова меняем значение флага на false */
    125.             inProgress = false;
    126.             // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
    127.             startFrom += 6;
    128.  
    129.      
    130.             }});  
    131.         }
    132.     });
    133. });  
     
  2. denis01

    denis01 Суперстар
    Команда форума Модератор

    С нами с:
    9 дек 2014
    Сообщения:
    12.227
    Симпатии:
    1.714
    Адрес:
    Молдова, г.Кишинёв
    ну тут же сам пишешь on page load, когда подгружаешь ajax новые данные, ты опять вызываешь тот each?
    есть в jquery метод on, на него можешь действие повесить, если новый элемент появится, то он при действии click и т.д. сработает по этому элементу, или опять each запускай после загрузки ajax
     
  3. EvilScorpion

    EvilScorpion Новичок

    С нами с:
    15 окт 2016
    Сообщения:
    44
    Симпатии:
    1
    Сделал функции из лайков, потом добавил в скрилинг
    Вроде заработало, но правильно ли... не знаю.
    Код (Javascript):
    1.  
    2.  
    3.      $.each(data, function(index, data){
    4.            
    5.             /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */    
    6.             $("#articles").append("<div  class='webo4ka1'><div class='webo4ka2'>\
    7.            <img class='mem'  src='uploads/"+ data.path +"' title='"+ data.description +"' /></div><div class='my_bot'>\
    8.            <div class=\"voting_wrapper\" id=\""+ data.id +"\">\
    9.            <div class=\"voting_btn\"><div class=\"down_button\"><span class=\"dis_like\"><img src=\"img/happy.png\"/></span></div><span class=\"down_votes\">0</span></div>\
    10.            <div class='voting_btn'><div class='up_button'><span class='like'><img src='img/happy.png'/></span></div><span class='up_votes'>0</span></div>\
    11.            <span class=report'></span>\
    12.            </div></div></div>");
    13.  
    14.             });
    15.                 $( window ).trigger( "click", my__load_Button());
    16.                 $(window).trigger( "click", my__Button());
    17.             /* По факту окончания запроса снова меняем значение флага на false */
    18.             inProgress = false;
    19.             // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
    20.             startFrom += 10;