.docViewer is not a function

Doconut Product Family
1

I am trying to set up the document viewer to view the sample doc file included in the .net core example. I have copied the javascript files from the example and set up my program.cs as the documentation suggests and the example shows.

The document viewer does not appear. Using the developer view we can see the errors:
“Uncaught TypeError: $(…).docViewer is not a function
at docViewer.UI.js:114:34”
and
“Uncaught TypeError: $(…).dropzone is not a function
at HTMLDocument. (docViewer.UI.js:201:24)”

Debugging in visual studio confirms that these functions are indeed not running.

2

@shaner_comnav,

The “dropzone” is a javascript library used on the viewer sample, but it has nothing to do with doconut software library. You can disable or remove it and use a classic upload file.

There are tons of websites dedicated to dropzone where you can get a better guide for the Dropzone library. For example https://www.dropzone.dev/

In another scenario, you can remove it altogether, as it is not a requirement or part of the Doconut library.

3

Thank you for your reply.

Thank explains what to do with “dropzone”. The bigger issue is the “docViewer” function not working. It’s my understanding that that is the function that is opening the file for viewing.

4

@shaner_comnav,

I am sorry. I realize I only replied to the later question.

It is hard to figure out what you are missing, the easiest would be to compare your source code with one of the Net Core working samples, but I will copy and paste here what are the scripts we used in the .Net Core samples:

    <!-- jQuery & Bootstrap -->
    <script src="~/scripts/jquery.min.js"></script>
    <script src="~/scripts/bootstrap.min.js"></script>

    <!-- Drop Zone JS (For upload) -->
    <script type="text/javascript" src="~/scripts/dropzone/dropzone.js"></script>

    <!-- Main Viewer Related Scripts -->
    <script src="~/scripts/splitter.js"></script>
    <script src="~/scripts/docViewer.js"></script>
    <script src="~/scripts/documentLinks.js"></script>

    <!-- Viewer functions -->
    <script src="~/scripts/docViewer.UI.js?v=1"></script>

    <!-- search & copy functions -->
    <script src="~/scripts/search.js"></script>

Hopefully, you have all of these scripts.

Let me know if you are missing one of the files.

5

I have all those scripts (copied from the .net core demo) and I’ve included them all in the page with the viewer.

6

@shaner_comnav,

That is all you need. Then the issue is not a missing script.

If you run one of the demos, do you have the same problem?

7

No, I can run the demo just fine.

8

@shaner_comnav,

Okay, it is an issue with that particular project, not the library.

Now it rings a bell that dropzone did not work. It may be something wrong with that particular project.

I would start by adding another external library(javascript) and check if it works, not a function, but a complete library. If it fails, we know where the issue is. How to solve that is up to you since it can be anything, how you set up your MVC path, or routing, which is affecting the UI.

Also, I would create a brand new MVC project, empty. Create a controller with a view. Start adding some backend code and then frontend(adding the js libraries and see if it works) and test that out.

You can also create an MVC default project and change the index page with the code of the sample and see if it works.

This is only the case if you are working on a brand-new project. If you are working on an existing one, you must check what is wrong. But as we tested with the demos, it is not the libraries.

You can also try adding a new MVC Project in the same solution and check if it works.

9

I was able to add a different javascript library to my project with no issue.

I tried completing a completely new project, following the integration guide and copying in the index and javascript libraries from the demo and I got the same issue.

10

@shaner_comnav,

Okay, since it is not a problem from the project, we have to try to figure out what can be.

I haven’t heard anyone else have this issue besides you, so it looks like it is not a bug or the complaints about this would be done by everyone.

If you remove the DLLs, how much is the new project zipped? Maybe you can upload it somewhere so can download it, and then I can review it. I am talking about the new project, which should have no sensible or private data. I do not need the license or the DLLs, just the source code of the new project.

Also, have you run the code on a different machine? have you tried using IIS Express and IIS?

Just trying to figure out what may be the source of the issue.

13

@shaner_comnav,

It was a very tricky issue but I finally found it. The styles are messed up though because of some missing ones but I leave that to you

Here is opening a file:

I had to zoom out so you can see the document is rendered below and you can see the scroll.

The issue is in the layout:

When you remove or comment those files everything start working.

14

That worked! Thank you so much for your help. Do we want to post this as the answer on the forum thread in case anyone else has this issue?

One other thing, is it possible to send a file name to the viewer from the razor page?

1 Like
15

@shaner_comnav,

This is a thread, and it is public. Everyone can see this an benefit from it. But thank you so much for caring!

It should be no problem because remember that on the page itself, you can use the Javascript function and call:

OpenDocument(fileName);

I am referring to this one:

16

Make’s sense. Thank you for your help.