Products Technologies Demo Docs Blog Support Company

New JavaScript API: Working with Callbacks and Promises

TX Text Control X18 provides a complete new and fully-featured JavaScript API. This article explains how to use callbacks and promises and the supported methods.

New JavaScript API: Working with Callbacks and Promises

Besides collections and objects for most document elements, the new JavaScript API implements asynchronous methods with callback functions. As all methods are asynchronous, it is important to wait for the return value which is solved using callbacks.

A callback is essentially a function that is executed after another function has finished executing.

The JavaScript method getStart of the Selection object has the following syntax:

<void> Selection.getStart(<RequestNumberCallback> callback, [<ErrorCallback> errorCallback])

It returns a RequestNumberCallback when successfully executed and an ErrorCallback when failed. The call of this method should look like this:

TXTextControl.selection.getStart(
        function (curSelStart) {
                // success
                console.log(curSelStart);
        },
        function (errArg) {
                // error
                console.log(errArg);
        },
);

The above code returns safely the selection start index of the current input position. Now, what if we need to check the selection length value in the same function? JavaScript is an event driven language. That implies that Javascript is not waiting for a response before moving on. In the following function, we cannot be 100% certain that the value of the first function is returned first.

function GetValues()
{
        TXTextControl.selection.getStart(
                function (curSelStart) {
                        // success
                        console.log(curSelStart);
                }
        );

        TXTextControl.selection.getLength(
                function (curSelLength) {
                        // success
                        console.log(curSelLength);
                }
        );
}

In order to achieve this, the second function should be called in the callback function of the first function:

function GetValues()
{
        TXTextControl.selection.getStart(
                function (curSelStart) {
                        console.log(curSelStart);
                        
                        TXTextControl.selection.getLength(
                                function (curSelLength) {
                                        // success
                                        console.log(curSelLength);
                                }
                        );
                }
        );
}

In case, you need the return values of these two functions in the function itself to do something else, you would have to create a lot of nested functions. That would result in complex structures which makes it the hard to read the code.

Therefore, Promises and async functions can be used. The following function returns a range object with the start and end index of the current selection. The return value itself is a Promise that can be resolved and rejected.

function getSelectionRange() {
    return new Promise(resolve => {
        TXTextControl.selection.getStart(function (curSelStart) {
            TXTextControl.selection.getLength(function (curSelLength) {

                var range = {
                    start: curSelStart,
                    end: curSelStart + curSelLength,
                };

                resolve(range);
            });
        });
    });
}

The calling function must be async in order to wait for Promises:

async function GetValues()
{
        var range = await getSelectionRange();
        console.log(range.start);
        console.log(range.end);
}

The keyword await marks the function to wait for a returned Promise, so that the return value can be used in further code in the same function.

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Also See

This post references the following in the documentation:

  • Javascript: Selection.getLength Method
  • Javascript: Selection.getStart Method

Angular

Integrate document processing, editing, sharing, collaboration, creation, electronic signatures, and PDF generation into your Angular Web applications.

Learn more about Angular

Related Posts

AngularASP.NETJavaScript

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…


AngularASP.NETJavaScript

Observe When the Reporting Preview Tab is Active Using MutationObserver

This article shows how to observe when the Reporting Preview tab is active using MutationObserver. The Reporting Preview tab is a feature of the TX Text Control Document Editor that allows you to…


AngularASP.NETJavaScript

Building an ASP.NET Core Backend Application to Host the Document Editor and…

This article explains how to create an ASP.NET Core backend application to host the Document Editor and Document Viewer. This backend application is required to provide the required functionality…


AngularASP.NETJavaScript

Reuse Angular Document Editor Instances in Bootstrap Tabs

The initialization time of document editor instances is time-consuming and requires resources on both the server side and the client side. To reuse instances, they can be moved within the DOM.…


AngularASP.NETJavaScript

JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps

The JavaScript API can be used to group several steps into one undo action that can be undone with a single undo call. Additionally, those groups are visually updated at once to avoid screen…