How to I change documents without reloading the page?

GroupDocs.Annotation Product Family
1

I need to change documents without reloading the page.


Previously I did this by removing the annotation-widget element, re-adding it, and calling $(’#annotation-widget’).groupdocsAnnotation({…}) again with a new fileId. However this is no longer working.

I’ve changed two things recently:

1. Moved Groupdocs to an iframe.
2. Upgraded to v1.5

Is there another recommended way to change documents without reloading the page?

Below is my code. It works the first time but not on subsequent calls.

function changeDocument(userId, userName, fileId) {
// Remove the old annotation-widget element to clear data set by groupdocs.
var annotationWidgetElem = document.getElementById(‘annotation-widget’);
if (annotationWidgetElem) {
window.document.body.removeChild(annotationWidgetElem);
}

// Add a new annotation-widget element.
window.document.body.appendChild($.parseHTML(’
’)[0]);

$(’#annotation-widget’).groupdocsAnnotation({
width: 0,
height: 0,
fileId: fileId,
docViewerId: ‘annotation-widget-doc-viewer’,
quality: 90,
enableRightClickMenu: true,
showHeader: true,
showZoom: true,
showPaging: true,
showPrint: false,
showFileExplorer: false,
showThumbnails: true,
showToolbar: true,
openThumbnails: false,
zoomToFitWidth: true,
zoomToFitHeight: false,
initialZoom: 100,
preloadPagesCount: 3,
enableSidePanel: true,
scrollOnFocus: true,
strikeOutColor: ‘’,
highlightColor: ‘#ffff00’,
textFieldBackgroundColor: ‘#f0f0f0’,
enabledTools: 8191,
connectorPosition: 1,
saveReplyOnFocusLoss: true,
clickableAnnotations: true,
disconnectUncommented: true,
enableStandardErrorHandling: true,
strikeoutMode: 1,
minimumImageWidth: 2560,
areaToolOptions: { pen: { width: 1, color: 16711680, dashStyle: 0 } },
polylineToolOptions: { pen: { width: 1, color: 16711680, dashStyle: 1 } },
arrowToolOptions: { pen: { width: 1, color: 16711680, dashStyle: 0 } },
sideboarContainerSelector: ‘div.comments_sidebar_wrapper’,
usePageNumberInUrlHash: false,
textSelectionSynchronousCalculation: true,
variableHeightPageSupport: true,
useJavaScriptDocumentDescription: true,
isRightPanelEnabled: true,
createMarkup: true,
use_pdf: ‘true’,
_mode: ‘annotatedDocument’,
selectionContainerSelector: “[name=‘selection-content’]”,
graphicsContainerSelector: ‘.annotationsContainer’,
userName: userName, userId: userId
});
}

2

Hello Jason,

We are sorry to hear that you have such issue.

You can change document without reloading a web-page using JavaScript and there is no need to remove previously created annotation-widget element, and creating a new one. GroupDocs.Annotation for .NET already contains such functionality.

I’ll show you how to do this in the example below:


@(Html.Groupdocs()
.Annotation()


.ElementId(“annotation-widget”)


.FilePath(“Quick_Start_Guide_To_Using_GroupDocs.pdf”)

)


Change document




In this code the document changing is performing when clicking on the “Change document” button.

If you will have more questions please feel free to contact us.

3

Thank you, this worked.