appending multiple elements

[hayzenbairg]

How can I append not one element, but multiple elements into the grid via the append_elements function? the following code doesn't work...

function append2grid() {
    var grid = document.querySelector('#feed');
    var item1 = document.createElement('div');              
    var item2 = document.createElement('div');

            var h = '<div class="entry">';
            h += '<div class="content">';
            h += "TEST";
            h += '</div>';
            h += '</div>';

            var newElements = [item1, item2]

           salvattore['append_elements'](grid, [newElements]);

            item1.outerHTML = h;
            item2.outerHTML = h;
        }

[hayzenbairg]

okey, sorry... solved.

salvattore['append_elements'](grid, [newElements]);

is wrong. it should be

salvattore['append_elements'](grid, newElements);

[hayzenbairg]

next issue:

I am trying to combine infitine-scroll with salvattore.

the append2grid(count_entries)-function appends entries to the grid. when I am calling the function in the callback-part von infinitescroll there are missing entries. I have a grid with 3 columns. the first 9 entries are complete. missing elements begin with the 10th element. I dont know why...

But when I call the append2grid-function via an onClick-event, there are no missing entries.

$('#feed').infinitescroll({
            navSelector  : '.pagination',
            nextSelector : '.pagination a',
            itemSelector : '.entry',
            appendCallback: false,
            dataType: 'html',
            bufferPx     : 100,
            loading: {
                finishedMsg: '',
                img: '<?=$this->webroot;?>img/spinner.gif',
                msgText: "<em><?=__('Weitere Einträge werden geladen...')?></em>"
            }
        },  function( newElements_content ) {
                    append2grid(10);
            }
        );

append2grid-function:

function append2grid(count_elements) {
            var grid = document.querySelector('#feed');
            var i;
            var newElements = new Array(count_elements);
            var newElements_content = new Array(count_elements);

            for (i = 0; i < count_elements; ++i) {
                newElements[i] = document.createElement('div'); 
                newElements_content[i] = '<div class="entry"><div class="content">'+i+'. Element</div></div>';
            }

            salvattore['append_elements'](grid, newElements);

            for (i = 0; i <  count_elements; ++i) {
                newElements[i].outerHTML = newElements_content[i];
           }
           return false;
        }

[daniellelecomte]

Hi @hayzenbairg - have you found a solution yet for this? I am trying to accomplish something similar. Thanks!

[michaeltrilford]

bump

[hayzenbairg]

no... sorry..

[tomdowning82]

Found a solution by converting all elements into DOM objects and pushing to a new array (tested and works):

$('#mydiv').infinitescroll({
                   navSelector  : "div.loadmore",
            nextSelector : "div.wp-pagenavi a:first",
            itemSelector : ".item",
            appendCallback : false,
}, function(newElements) {
    var items = [];
    for(i=0; i < newElements.length; i++) {
        var item_html = $(newElements[i]);
        item_html = item_html.context.innerHTML;
        var item = document.createElement('div');
        item.innerHTML = item_html;
        item.setAttribute('class', 'required-classname');

                items.push(item);
    }

    salvattore['append_elements'](grid, items);
});

[tomdowning82]

Although using the above method i've noticed that if your appending lots of items at the same time in a 3 column setup, most items seem to append to column 1 and 3 leaving big gaps in the middle column.

[tomdowning82]

I've solved the above issue by adding in a timer so theres a slight delay between adding each elements:

var timer = setInterval(function () {
 i++; 
 if(i <= newElements.length-1) {
    addItem();
 } else {
    window.clearInterval(timer);
 }
}, 10);

[strangemethod]

The problem is that infinite-scroll and salvattore are acting on the same element. Infinite-scroll creates a hidden loading div in #feed, which salvattore is then appending posts to. You've basically created a hidden column.

You simply need to set infinite-scroll to work on another arbitrary element:

$('#not-feed').infinitescroll();