Load multiple data from database with ajax and slickAdd them to existing Slick on success, but only-CodePudding

so I'm using Slick Carousel and I'm showing in it a list of products from my database limited to 24 for performance reasons. But I need to show all of them, so I made a function that ajax loads another 24 products everytime the user is 2 slides before the end and add them with slickAdd function to the existing Slick. Everything is working great but it takes a few seconds till it gets added because the slickAdd function runs for each new product. So I wanted to ask if there is a way to select all the 24 new products, and add them only once with the slickAdd function.

This is my current code

$('.demo').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    var komponent = $(".komponent-container.active").attr("id");

    var slideCount = slick.slideCount-6;

    console.log(slick.slideCount);

    if(nextSlide == slideCount){
        console.log("loadmore");
        $.ajax({
            type: "POST",
            url: "/project/public/konfigurator",
            data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
            dataType: "json",

            success: function (data) {

                var data_parser = JSON.parse(data)[0];

                if (data_parser.length > 0) {

                    for (i = 0; i < data_parser.length; i  ) {
                        var produkt_nazov = 0;
                        if (data_parser[i].produkt.length > 45) {
                            produkt_nazov = data_parser[i].produkt.substring(0, 45)   "...";
                        } else {
                            produkt_nazov = data_parser[i].produkt;
                        }

                        $('.demo').slick('slickAdd', '<div><div><div ><div ><div ><div ><div ><img draggable="false" id="produkt-img" src="img/konfigurator/' komponent '/'   data_parser[i].produkt   '/1.jpg" alt="" /></div><div >'   data_parser[i].cena   ' €</div></div><div ><div ><span >'   produkt_nazov   '</span><span ><span>Výrobca čipu - '   data_parser[i].vyrobca_cipu   '</span><span>Veľkosť pamäte - '   data_parser[i].vram_size   '</span><span>Typ pamäte - '   data_parser[i].vram_type   '</span><span>Frekvencia jadra - '   data_parser[i].gpu_memory_clockrate   '</span></span></div><div ><div ><a >Detail</a><a >Vybrať</a></div></div></div></div></div></div></div></div>');
                        console.log("add");

                    }
                }
            },

            error: function (result) {
                alert('error');
            }
        });
    }
});

And sorry if there is any gramatical mistakes, english is not my first language.

I tried to move the SlickAdd function outside the for(), but it added only 1 product to the Slick.

CodePudding user response：

I figured it out, leaving it here for others.

var html = '';
for (i = 0; i < data_parser.length; i  ) {
    var produkt_nazov = 0;
    if (data_parser[i].produkt.length > 45) {
        produkt_nazov = data_parser[i].produkt.substring(0, 45)   "...";
    } else {
        produkt_nazov = data_parser[i].produkt;
    }

    html  = '<div><div><div ><div ><div ><div ><div ><img draggable="false" id="produkt-img" src="img/konfigurator/'   komponent   '/'   data_parser[i].produkt   '/1.jpg" alt="" /></div><div >'   data_parser[i].cena   ' €</div></div><div ><div ><span >'   produkt_nazov   '</span><span ><span>Výrobca čipu - '   data_parser[i].vyrobca_cipu   '</span><span>Veľkosť pamäte - '   data_parser[i].vram_size   '</span><span>Typ pamäte - '   data_parser[i].vram_type   '</span><span>Frekvencia jadra - '   data_parser[i].gpu_memory_clockrate   '</span></span></div><div ><div ><a >Detail</a><a >Vybrať</a></div></div></div></div></div></div></div></div>';
}

$(".demo").slick('slickAdd', html);
console.log("add");