Back to Community Threads
1
JavaScript errors with using DU in a modal populated by AJAX.
Problem reported by Stuart - 7/29/2020 at 3:54 AM
Not A Problem
We have a document repository in our application and we use the last build of version 4 to allow users to view documents.

There is a large list of docuements and when the user clicks to view the document a modal is opened and the content of the modal is fetched from the server via ajax using the MVC methodology.

1: User clicks 'view doc' button, modal appears, DU generated in MVC View, content transferred by AJAX: No JavaScript error.

2: User closes the modal.   

3: User clicks 'view doc' button, modal appears, DU generated in MVC View, content transferred by AJAX: Single JavaScript error. Cannot read property 'docViewer' of undefined, But modal is displayed and content is visible.

4: User closes the modal.  

5: User clicks 'view doc' button, modal appears, DU generated in MVC View, content transferred by AJAX: Two new JavaScript errors. both say: Cannot read property 'docViewer' of undefined, But modal is displayed and content is visible.

6: User closes the modal.   

7: User clicks 'view doc' button, modal appears, DU generated in MVC View, content transferred by AJAX: Three new JavaScript errors. both say: Cannot read property 'docViewer' of undefined, But modal is displayed and content is visible.

Every time a doc viewer is removed from the DOM and a new doc viewer added to the DOM it is like the documents that were disposed of were not destroyed in the JavaScript, and a method is looking for their 'docViewer' property which cannot be found as the docs are no longer on the DOM.

1 Reply

Reply to Thread
0
Cem Alacayir Replied
8/1/2020 at 9:58 PM
Employee Post
> we use the last build of version 4 to allow users to view documents. 

This may be a problem in older versions or you may be calling RenderHead multiple times in same page or outside of <head> tag.

As you can see in the demo, using a partial view and loading DocumentViewer multiple times do not cause JS errors:

You can use a PartialView with RenderBody for your DocumentViewer and put RenderHead in your main view. Then you can reload PartialView with jQuery everytime you need to change the loaded document. 

Or you can use an iframe in your modal which loads url of a dedicated host page for DocumentViewer. Then you can load different documents by passing document name or some kind of id to your url via querystring.  

More details:

It is already possible to get RenderHead in your main page’s / layout’s <head> tag.
You can either use a section or you can simply put a RenderHead(new DocumentViewer()) with empty model in your layout’s <head> tag.

See below for the all the details.

Regarding RenderHead method:

  • It should be only inside <head> tag and should not be added multiple times inside <body> tag. This is how browsers work.

  • if you are calling RenderHead multiple time in the same page, the same JS includes will be put in the page and browser will misbehave (you could see errors in the console).
Back to Community Threads

Reply to Thread