Logi c в слушателе $ (window) .scroll () меняет значение только один раз. Никогда не увеличивается каждый раз, как ожидалось - PullRequest
Новая
       6

Logi c в слушателе $ (window) .scroll () меняет значение только один раз. Никогда не увеличивается каждый раз, как ожидалось

0 голосов
/ 09 апреля 2020

У меня короткий блок jQuery, который должен обновлять число строк таблицы после вызова ajax. Этот вызов ajax происходит, когда полоса прокрутки достигает нижней части страницы. Логика c работает при первом достижении дна, но после каждого последующего времени значение застревает. Я не могу понять, почему.

Журналы jQuery: 

$(window).scroll(function(e) {
     //If typing in search field, don't listen for scroll event
     if($('#search_server_ip_input').val()) {
         e.preventDefault();
     } else {
         //else do the things
         let windowHeight = $(window).height();
         let documentHeight = $(document).height();
         let windowScrollTop = $(window).scrollTop();
         let row = Number($('#unused_row').val());
         let allcount = Number($('#unused_all').val());
         let rowperpage = 200;
         let countertext = $('#counter_text');
         let url = 'includes/search_ajax/list-unused-server-addresses.php';
         let tablerow = $('.table-row');


         if (windowScrollTop + windowHeight === documentHeight) {
              //Add 200 more to the value of row
             row += rowperpage;
             $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
              if (row >= allcount) {
                 row = allcount;
                 $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
             }
             if (row <= allcount) {
                 console.log('Reached if (row <= allcount)');
                 $(row).val(row);
                 $.ajax({
                     type: 'post',
                     url: url,
                     data: {row: row},
                     success: function (data) {
                         //Show 200 additional rows of table
                         $('.table-row:last').after(data).show().fadeIn('slow');
                         //Update the text
                         $(countertext).text('Showing ' + row + ' out of ' + allcount + ' results');
                      }
                 })
             }

         }
     }
 })

MySQL показывают то же самое, поэтому я знаю, что значение, переданное в вызове ajax, неверно после первого раза. Это должно быть LIMIT 600,200, но все равно LIMIT 400,200: 

SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 200,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200

Третий запрос должен быть 1 600,200, но остается 400.

1 Ответ

0 голосов
/ 10 апреля 2020

По какой-то причине значение строки не обновлялось после того, как вы впервые достигли нижней части страницы. Итак, я создал отдельный файл php, который извлекал значение stati c из 200 строк при первом нажатии кнопки. Этот php файл был вызван в новой функции. Он был идентичен исходной функции ajax, за исключением того, что не было части data:{row:row}. Вместо того, чтобы иметь значение $row be $_POST['row'], я просто сделал его 200:

Первое нажатие кнопки, вызванное новой функцией: 

$('#server_unused_ip_btn').on('click', function() {
   //getUnused(row);
   getUnused(); //<-- No parameter this time
});

В новой версии функции то есть, вместо этого я присвоил значение row, которое будет отправлено числу строк в таблице, например: 

function getUnused() {
    $('input').not("input[type='hidden']").val('');
    $.ajax({
        url: 'includes/search_ajax/get-unused-server-addresses.php',
        type: 'post',
        success: function(data) {
            $('#server_result_table tbody').html(data);
            let row = $('#server_result_table tr').not('thead tr').length; //<-- Here is how row is calculated now
            $('#unused_row').val(row); //<-- Now give the hidden input the new value
            $('#counter_text').text('Showing '+ row + ' out of <?php echo $allcount; ?> results'); //<-- Correctly update the text with new value of row
        },
        error: function(jqXHR, status, error) {
            console.log('Error: '+error);
        }
    })
}

Теперь мои MySQL запросы отражают изменение, исправившее его: 

SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 200,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 400,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 600,200
SELECT * FROM network_servers where (ping_response = 'N' and mac_address = 'n/a') ORDER BY INET_ATON(ip_address) LIMIT 800,200

Таким образом, короче говоря, при первом нажатии кнопки выполняется запрос, который получает значение stati c 200, а затем при прокрутке вниз страницы это когда новое значение отправляется через ajax путем подсчета количества имеющихся строк. Это работает, если кто-то не предложит лучшего решения, которое я с радостью приму.

...