0

Ok, primero antes que nada quisiera remarcar que básicamente es una modificación a este artículo. https://code-boxx.com/infinite-page-scroll/#sec-download

function postAjax(url, data, success) {
    var params = typeof data == 'string' ? data : Object.keys(data).map(
        function (k) {
            return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
        }
    ).join('&');

    var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    xhr.open('POST', url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState > 3 && xhr.status == 200) {
            success(xhr.responseText);
        }
    };
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(params);
    return xhr;
}

Esta función es únicamente para hacer el envío de POST C:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
        vars[key] = value;
    });
    return vars;
}

Esta función es para traer los elementos $_GET pero en js y lo regresa en un Object

function clearElement(e) {
    Array.from(e.childNodes).forEach(child => {
        e.removeChild(child);
    });
}

Este es para borrar, estaba creyendo que sería útil para el scroll pero creo que no será así. Pero igual tengo un botón y creo que podría ser útil

El chiste de mi código es parecido al del artículo, solo quiero que de una base de datos me traiga una cantidad de datos y respecto al scroll me vaya actualizando nuevos datos

var scroll = document.getElementById('content-scroll');
if (scroll) {
    var endless = {
        page: 0,
        hasMore: true,
        proceed: true,
        search: document.getElementById('search'),
        load: e => {
            if (endless.proceed && endless.hasMore) {
                endless.proceed = false;
                let url = getUrlVars(),
                    nextPg = endless.page + 1,
                    loading = document.getElementById('loading-scroll');
                loading.style.display = "block";
                postAjax('scroll.php', {
                    action: url.action,
                    page: nextPg,
                    search: search.value
                }, function (data) {
                    if (data === 'error') {
                        loading.innerHTML = 'error';
                        endless.hasMore = false;
                    } else {
                        let obj = JSON.parse(data),
                            tr = document.createElement('tr');
                        clearElement(scroll.querySelector('thead'));
                        Object.keys(obj[0]).map(e => {
                            let th = document.createElement('th'),
                                txt = document.createTextNode(e);
                            th.appendChild(txt);
                            tr.appendChild(th);
                        });
                        scroll.querySelector('thead').appendChild(tr);
                        clearElement(scroll.querySelector('tbody'));
                        obj.map(e => {
                            let tr = document.createElement('tr');
                            Object.values(e).map(e => {
                                let td = document.createElement('td'),
                                    txt = document.createTextNode(e);
                                td.appendChild(txt);
                                tr.appendChild(td);
                            });
                            scroll.querySelector('tbody').appendChild(tr);
                        });
                        loading.style.display = "none";
                    }
                });
            }
        },
        listen: e => {
            var height = document.documentElement.offsetHeight,
                offset = document.documentElement.scrollTop + window.innerHeight;
            if (offset === height) {
                endless.load();
            }
        }
    };
    window.onload = e => {
        window.addEventListener("scroll", endless.listen);
        document.getElementById('buttonSearch').addEventListener("click", endless.load());
        endless.load();
    };
}

Lo que pasa es que en primera instancias si me regresa los valores

introducir la descripción de la imagen aquí

Pero no actualiza nuevos datos cuando bajo el scroll. Y no sé a qué se pueda deber :c

introducir la descripción de la imagen aquí

Y no, no marca ningún error

6
  • Ya verificaste que la consola de las herramientas para desarrollador no te arrojé ningún error support.google.com/dcm/answer/2828688?hl=es Commented el 1 dic. 2019 a las 20:14
  • ¿A qué te refieres específicamente? Disculpa mi ignorancia al respecto Commented el 1 dic. 2019 a las 20:21
  • Click derecho > Herramientas de desarrollador > click en la pestaña console o presiona F12 y click en la pestaña console Commented el 1 dic. 2019 a las 20:35
  • Ahí te mostrará los errores en tiempo real al hacer scroll Commented el 1 dic. 2019 a las 20:35
  • Ah pero usas firefox, entonces presiona ctrl + shift + i y ve a la pestaña console Commented el 1 dic. 2019 a las 20:40

1 respuesta 1

0

Encontré el error, era más sencillo que nada, ok. En dónde se escriben los datos es en Scroll, pero no sólo Scroll, dentro tiene para lo que hago un querySelector, de ahí se tiene que calcular los valores de scrollHeight que sería el total incluyendo lo ocultado, de ahí lo oculto de arriba con scrollTop mas lo visible del cliente clientHeight, de ahí se iguala y después hago el load() y listo

listen: function () {
    var height = scroll.querySelector('tbody').scrollHeight,
        offset = scroll.querySelector('tbody').scrollTop + scroll.querySelector('tbody').clientHeight;
    if (offset === height) {
        endless.load();
    }
}

Si alguien le interesa, lean este artículo, me ayudó demasiado https://javascript.info/size-and-scroll

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.