Using the Document Editor in SPA Applications using the removeFromDom Method
This article shows how to use the removeFromDom method to remove the Document Editor from the DOM when it is no longer needed. This is useful when the Document Editor is used in a Single Page Application (SPA) and the component is not needed anymore.
Up to date?
This article applies to TX Text Control 32.0 versions after Service Pack 4.
In SPA (Single Page Application), the page is loaded only once and the content is updated dynamically. This is done by using JavaScript to retrieve data from the server and update the page without reloading it. This makes the application faster and more responsive because the user does not have to wait for the page to reload every time they interact with it.
When using the Document Editor in a SPA, or when loading the editor using MVC partial views when using ASP.NET Core, you must ensure that the editor is properly initialized and destroyed when the page is loaded and unloaded. This is important to prevent multiple JavaScript and CSS references from being loaded and the editor from not being properly destroyed when the page is unloaded.
Partial Views in ASP.NET Core
Consider the following sub-view that implements a Document Editor instance. The component was added to the project using the NuGet package.
@using TXTextControl.Web.MVC
@Html.TXTextControl().TextControl().Render()The following code shows the view that contains two buttons, adds a Document Editor instance to the view by loading the partial view, and removes the Editor from the DOM.
<input type="button" onclick="loadEditor()" value="Load Editor" />
<input type="button" onclick="removeEditor()" value="Remove Editor" />
<div id="editor"></div>
<script>
function loadEditor() {
// checks if editor exists and
// gracefully close the WebSocket connection
// and remove the entire editor from the DOM
if (typeof TXTextControl !== 'undefined')
TXTextControl.removeFromDom();
// load the partial view
$('#editor').load('@Url.Action("EditorPartial")');
}
function removeEditor() {
if (typeof TXTextControl !== 'undefined')
TXTextControl.removeFromDom();
}
</script>The loadEditor function checks if the TXTextControl object exists and if it does, the removeFromDom method is called to remove the entire object from the DOM. This method also removes event handlers added by the Document Editor and removes added CSS references.
The removeEditor method simply calls the removeFromDom method to remove the editor.
JavaScript SPA Applications
When using the document editor in a JavaScript SPA application, the editor must be properly initialized and destroyed, and the initial JavaScript must be dynamically added and removed. But the rest is the same as in the example above, where removeFromDom is used to remove the instance from the current DOM.
The following code shows how to add the editor to a SPA application and how to remove it from the DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TX Text Control Document Editor Remove From DOM Demo</title>
<style>
#txDocumentEditor {
height: 800px;
width: 800px;
}
</style>
</head>
<body>
<div id="txDocumentEditor"></div>
<button onclick="createEditor()">Add Editor</button>
<button onclick="removeEditor()">Remove Editor</button>
<script>
var scriptUrl = "https://localhost:7015/api/TXWebSocket/GetResource?name=tx-document-editor.min.js";
var wssUrl = "wss://localhost:7015/api/TXWebSocket";
function removeEditor() {
removeScript();
TXTextControl.removeFromDom();
}
function createEditor() {
loadScript(scriptUrl, addEditor);
}
function loadScript(url, callback) {
const script = document.createElement("script");
script.type = "text/javascript";
script.onload = function() {
callback();
};
script.onreadystatechange = function() {
if (this.readyState === "loaded" || this.readyState === "complete") {
this.onreadystatechange = null;
callback();
}
};
script.src = url;
document.head.appendChild(script);
}
function removeScript() {
const script = document.querySelector("script[src='" + scriptUrl + "']");
if (script) {
script.remove();
}
}
function addEditor() {
TXTextControl.init({
containerID: "txDocumentEditor",
webSocketURL: wssUrl
});
}
</script>
</body>
</html>Conclusion
When using the Document Editor in a SPA or when loading the editor using MVC partial views when using ASP.NET Core, you must ensure that the editor is properly initialized and destroyed. This is important to prevent multiple JavaScript and CSS references from being loaded and the editor from not being properly destroyed when the page is unloaded.
ASP.NET
Integrate document processing into your applications to create documents such as PDFs and MS Word documents, including client-side document editing, viewing, and electronic signatures.
- Angular
- Blazor
- React
- JavaScript
- ASP.NET MVC, ASP.NET Core, and WebForms
Related Posts
TXTextControl.Web: Creating a Custom ButtonBar using the InputFormat Class
TX Text Control X18 implements the InputFormat class in the JavaScript API that enables developers to build custom button bars.
New JavaScript API Calls for Typical MailMerge Tasks
This article shows how to use the improved JavaScript API for typical MailMerge tasks such as inserting merge blocks.
TX Text Control 33.0 SP3 is Now Available: What's New in the Latest Version
TX Text Control 33.0 Service Pack 3 is now available, offering important updates and bug fixes for all platforms. If you use TX Text Control in your document processing applications, this service…
TX Text Control 33.0 SP2 is Now Available: What's New in the Latest Version
TX Text Control 33.0 Service Pack 2 is now available, offering important updates and bug fixes for all platforms. If you use TX Text Control in your document processing applications, this service…
Service Pack Releases: What's New in TX Text Control 33.0 SP1 and 32.0 SP5
TX Text Control 33.0 Service Pack 1 and TX Text Control 32.0 Service Pack 5 have been released, providing important updates and bug fixes across platforms. These service packs improve the…