Skip to main content
error
Origen Enlace

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

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Y no, no marca ningún error

Lo que pasa es que en primera instancias si me regresa los valores  introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Y no, no marca ningún error

Origen Enlace

Scroll Infinito Js Vanilla no funcionando

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