I am facing an issue with this code. I am attempting to add a new div (newGallery) with images to the div (gallery), but it keeps replacing the old one.
Could you please provide some guidance on how to resolve this? I suspect that the problem lies in being inside an ajax function. 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');
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',
}).done( function( data ) {
var newGallery = $(data).find('.gallery-set');
newGallery.appendTo(gallery);
}).fail( function() {
var msg = $('<div>',{class: 'msg-fail'}),
msgText = 'We apologize, we were unable to display the page',
msgFail = msg.html(msgText);
gallery.html(msgFail);
}).always(function() {
loadingImg.hide();
});
};
});