$('#userGuideModal').on('show.bs.modal', function (e) {
// Show the preloader
$('#preloader').show();
var scriptLoaded = false;
// Check if Dropbox script is already loaded
if (!document.getElementById('dropboxjs')) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.id = 'dropboxjs';
script.dataset.appKey = 'KEY';
script.onload = function() {
console.log('Dropbox script loaded successfully.');
scriptLoaded = true;
embedDropboxContent();
};
script.onerror = function() {
console.error('Error loading Dropbox script.');
$('#preloader').hide();
};
document.body.appendChild(script);
// Set a timeout to handle cases where the script doesn't load
setTimeout(function() {
if (!scriptLoaded) {
console.error('Dropbox script loading timed out.');
$('#preloader').hide();
}
}, 5000); // Adjust the timeout duration as needed
} else {
scriptLoaded = true;
embedDropboxContent();
}
});
function embedDropboxContent() {
var element = document.getElementById('dropbox-embedder-container');
var options = {
link: "URL",
file: {
zoom: "best"
},
folder: {
view: "list",
headerSize: "normal"
},
success: function() {
console.log('Dropbox content embedded successfully.');
// Hide the loader when embedding is successful
$('#preloader').hide();
},
error: function(errorMessage) {
console.error('Error embedding Dropbox content:', errorMessage);
// Hide the loader on error
$('#preloader').hide();
}
};
Dropbox.embed(options, element);
}
there is a delay before i frame appending to div, so i want to show a preloader, once append completed i want to remove the preloader, so i was trying with 'success' function, but its not working as expected