Atalasoft is a licensed product in which the client side (Web DocumentViewer) is dependent on jqueryUI library. But if the project involves Bootstrap, the application will suffer from jqueryUI and Bootstrap (5.x) New version Issues.
This issue is in reference to the Atalsoft 11.1 version.
The error appears somewhat like “TypeError: Cannot read properties of undefined (reading ‘classes’)”
Loading of JqueryUI and bootstrap script files can affect the generation of the Atalasoft document viewer components.
The generation of the viewer, thumbnails, and other elements should be handled before loading the Bootstrap as for the following sample script. Bootstrap loading should be delayed.
_viewer = new Atalasoft.Controls.WebDocumentViewer({
parent: $('#atala-document-viewer'),
toolbarparent: $('#atala-document-toolbar'),
allowannotations: true,
serverurl:
savepath:
showbuttontext: false,
showerrors: true,
showscrollbars: true
});
For this, you can also manually load bootstrap after the script through javascript.
var tag = document.createElement("script");
tag.src = "Scripts/bootstrap.bundle.min.js";
document.getElementsByTagName("head")[0].appendChild(tag);
But this will not be able to handle all scenarios where elements (eg buttons) are generated as per requirement. Here I was facing an issue: for using annotation of stamps and image type, it was creating buttons in the toolbar menu which was affected by bootstrap. Bootstrap provides a method to reverse the behavior of elements. So this can be used to resolve the conflict of Atalasoft jqueryUI buttons with bootstrap. Menu Buttons in the Atalsoft Viewer Toolbar can be correctly generated by using the following script.
function handleJqueryUIBootstrapConflict() {
var annButtonSets = $('div.atala_annotation_toolbar>span.ui-controlgroup-item');
annButtonSets.button.noConflict();
}