Javascript event questions

GroupDocs.Viewer Product Family
1
How can I set (change) displayed document in the viewer from the javascript?

Thank you,
Igor

2

Hello Igor,

Thank you for your interest in GroupDocs. You can switch displayed document in the GroupDocs.Viewer from client-side using the next JS-code:

You should place this code after all JS- and CSS-inclusions and after a “div” block where target document should be displayed. Here “{{@documentName}}” is a name of the target document, and ‘#test’ is a identifier (ID) of the “div” block where target document should be displayed.

This “div” block can be like this:



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

3

Thank you Denis.


Some additional information about this question.
In Global_asax defined:
Groupdocs.Web.UI.Viewer.SetRootStoragePath(@"\OUR-COMPANY-IP\Archives");


But in this “Archives” directory we have many sub-directories (“Test”, “Prod”) and in all of them we already have files.
I am trying to set
$(’#test’).groupdocsViewer({ filePath: ‘Test\filename.pdf’,

but it doesn’t work. Is it possible to display documents from sub-directories of RootStoragePath?

Thank you in advance,
Igor
4

The javascript doesn’t work even if I set only file name that resides in the RootStoragePath directory and I do not see any error. How can I see errors?


I use SetGroupDocsViewer function when a user clicks on button.

function SetGroupDocsViewer(path) {

var localizedStrings = null;
var thumbsImageBase64Encoded = null;
$(’#viewerGroupDocs’).groupdocsViewer({
filePath: path,
docViewerId: ‘doc_viewer1’,
quality: 100,
showThumbnails: true,
openThumbnails: true,
initialZoom: 100,
zoomToFitWidth: true,
zoomToFitHeight: false,
backgroundColor: ‘’,
showFolderBrowser: true,
showPrint: true,
showDownload: true,
showZoom: true,
showPaging: true,
showViewerStyleControl: true,
showSearch: true,
preloadPagesCount: 0,
viewerStyle: 1,
supportTextSelection: true,
usePdfPrinting: false,
localizedStrings: localizedStrings,
thumbsImageBase64Encoded: thumbsImageBase64Encoded,
toolbarButtonsBoxShadowStyle: ‘’,
toolbarButtonsBoxShadowHoverStyle: ‘’,
thumbnailsContainerBackgroundColor: ‘’,
thumbnailsContainerBorderRightColor: ‘’,
toolbarBorderBottomColor: ‘’,
toolbarInputFieldBorderColor: ‘’,
toolbarButtonBorderColor: ‘’,
toolbarButtonBorderHoverColor: ‘’,
thumbnailsContainerWidth: 0,
jqueryFileDownloadCookieName: ‘jqueryFileDownloadJSForGD’,
showDownloadErrorsInPopup: false,
showImageWidth: false,
showHeader: true,
minimumImageWidth: 0,
enableStandardErrorHandling: true
});
}
5

Hello Igor,

We are sorry to hear that you have such issue. We checked your code and it looks like you are using GroupDocs.Viewer for .NET library. You should follow the next steps in order to make it work properly:
1. You should have an inclusion block in the “head” section of your page. Like this: <%=Viewer.CreateScriptLoadBlock().LoadJquery(true).LoadJqueryUi(true).UseHttpHandlers()%>

2. You should not have a server control <%=Viewer.ClientCode().TargetElementSelector("#test") … %> on your page.

3. You should have a “div” block at your page where the target document will be displayed.

4. You should have a JavaScript-code from my post above and this code must be placed under the “div” block.

5. In order to display documents from subfolders you should specify subfolder with slash symbol

For example I have Viewer.SetRootStoragePath(Server.MapPath("~/testfiles/")); in my Global.asax and in the “testfiles” folder I have a “sub” subfolder, so my path specification will be filePath: ‘sub/doc.pdf’.

6

Thank you Denis, it works!


I hope the last question :slight_smile:

After the first document is loaded (all from javascript) I want to reload the viewer with another document. I call the same function but with another file name but the viewer is not reloaded. Should I “remove” the existed viewer and only then to load the new one (with the same SetGroupDocsViewer(path) functions)?

Igor

7

Hello Igor,

In order to reload function you need to place GroupDocs.Viewer window in the new “div” block with another ID.

I suggest you to rewrite your function SetGroupDocsViewer as next:
SetGroupDocsViewer(ID, path)
{
var localizedStrings = null;
var thumbsImageBase64Encoded = null;
$(ID).groupdocsViewer({
filePath: path,
…
}
and transfer ID and path to it.

In this case when you need to switch the document on the client-side, you should:
1. Erase old div (let’s name it ‘test1’) - $("#test").empty();
2. Invoke SetGroupDocsViewer with “div” and new path - SetGroupDocsViewer(’#test2’, ‘candy.pdf’);
Of course, you can create new “div” in the JS code.

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

8

Thank you, it works.


Now I added an additional GroupDocs viewer to our project. The first one is opened on the main page of the project and the second one inside the popup (requirement of the client). In both viewer the same file is displayed (should be displayed).
But in the second viewer I get the following exception:
[IOException: Cannot create “\IP\Archives\Client-1\Company-46\Archive-2051\In\exam_monitor_igor.pdf” because a file or directory with the same name already exists.]
System.IO.__Error.WinIOError(Int32 errorCode, String maybeFullPath) +10526732
System.IO.Directory.InternalCreateDirectory(String fullPath, String path, Object dirSecurityObj, Boolean checkHost) +10997041
System.IO.Directory.InternalCreateDirectoryHelper(String path, Boolean checkHost) +136
System.IO.Directory.CreateDirectory(String path) +33
Groupdocs.Storage.LocalFileStorage2.CreateFolder(String path) +89

[: Unable to create folder in the local file storage: path = \IP\Archives\Client-1\Company-46\Archive-2051\In\exam_monitor_igor.pdf\2014-04-29T07_47_37\100@x.Pdf.]
Groupdocs.Storage.LocalFileStorage2.CreateFolder(String path) +172
..(String filePath,  options, String outputFolderParam) +583
..(String filePath,  options, String outputFolder) +243
Groupdocs.Web.UI.Handlers.ViewDocumentHandler.ProcessRequest(HttpContext context) +2681
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +341
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +69

What can be a reason? Thank you, Igor

9

Hello Igor,

We are sorry to hear that you have such issue. This issue is strange one, it seems that there is a conflict between GD.Viewer’s client-side scripts.

The best way it to transfer your project to us. If you are able to deliver this sample project for us, it will be very helpful. We will review it, fix and enlight the reason of issue. You can upload it to any resource you can: Dropbox, Google Drive, Rapidshare or any other.

Howewer, if you cannot share your project, we can suggest the next. The best way is to create a special web-page which should contain the GD.Viewer and nothing more: layout, JS-code, styles and so on. This page should receive name of a target document through URL (GET-parameter), and the JS-code (which we discussed above) should invoke GD.Viewer.

In that case you will be able to use GD.Viewer using iFrames. Inside your popup window you can invoke GD.Viewer, and these should not be conflicts and collisions between GD.Viewer scripts and your own.