I have problem with this code. I am trying to append new div (newGallery) with pictures to div (gallery) but it is still replacing old one.
Can you please advice me how to solve it? I think it has some trouble that it is inside ajax funcion. I am using jquery v3.5.1.
menu.on('click', 'a', function(event) {
event.preventDefault();
var a = $(this),
li = a.parent(),
href = a.attr('href'),
loadingImg = $('<img>', {src: 'img/5.svg', class: 'loading-img'}),
id = '#' + href.slice(0, -5),
isLoaded = gallery.find(id),
currentGallery = gallery.find('.gallery-set'),
galleries = $('.gallery-set');
if (li.hasClass('selected')) return;
li.addClass('selected')
.siblings().removeClass('selected');
//zobrazenie loading ikony pokial sa obsah nenacita
gallery.html(loadingImg).show();
gallery.find('div').fadeOut();
if ( galleries.attr("id") == id ) {
currentGallery.hide();
gallery.find(id).fadeIn();
} else {
loadNewGallery(href);
};
function loadNewGallery (href) {
var gallery = $('.gallery');
$.ajax({
url: href,
data: 'GET',
dataType: 'html',
// ak sa data nacitaju vykona sa funkcia v done
}).done( function( data ) {
var newGallery = $(data).find('.gallery-set');
//nacitany kus stranky cez ajax sa vlozi do gallery natrvalo
newGallery.appendTo(gallery);
// ak sa data nenacitaju vykona sa funkcia vo fail
}).fail( function() {
// sprava o zlyhani prenosu
var msg = $('<div>',{class: 'msg-fail'}),
msgText = 'Je nám ľúto, danú stránku sa nepodarilo zobraziť',
msgFail = msg.html(msgText);
gallery.html(msgFail);
// aj ked sa data nacitaju alebo nenacitaju vykona sa funkcia v always
}).always(function() {
// skrytie loading ikonky
loadingImg.hide();
});
};
});