Encountered a problem initializing Rangy.js on Internet Explorer

Currently, I am developing an angular application that utilizes textAngular along with rangy-core and rangy-selectionsaverestore. However, I am encountering some errors specifically on the latest version of Internet Explorer:

Module 'WrappedSelection' failed to load: Unspecified error.
Error: Unspecified error.
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2970:29)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:2923:14)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

Module 'SaveRestore' failed to load: Unable to get property 'isDirectionBackward' of undefined or null reference
TypeError: Unable to get property 'isDirectionBackward' of undefined or null reference
    at Anonymous function (js/plugins/textAngular/rangy-selectionsaverestore.js:30:9)
    at Anonymous function (js/plugins/textAngular/rangy-core.js:415:21)
    at Module.prototype.init (js/plugins/textAngular/rangy-core.js:387:13)
    at init (js/plugins/textAngular/rangy-core.js:294:17)
    at loadHandler (js/plugins/textAngular/rangy-core.js:3825:17)

The issue appears to occur during the initialization of rangy.

An interesting observation is that the TextAngular demo functions smoothly on Internet Explorer. One potential difference between the demo and my project is that I am utilizing the unminified rangy library. Furthermore, these errors do not arise when using Chrome or Firefox.

Despite the application being able to load (with the errors potentially being just warnings in the console), upon interacting with the textAngular field, I encounter the following error:

Object doesn't support property or method 'getSelection' File: textAngular.js, Line: 693, Column: 4

I have scoured through the textAngular and rangy GitHub repositories but found no solutions to address these issues. Have any of you experienced similar challenges before?

If needed, I can share the link to our application for further insight.

Thank you!

javascriptangularjsinternet-explorerrangytextangular

Answer №1

It appears that textAngular is initializing the rangy select too early, causing issues. I was able to resolve this issue by updating line 2036 in textAngular/dist/textAngular.js to wait for the window.onload event before checking for the rangy library.

    window.onload = function() {
        // Making sure that rangy and rangy.saveSelection are available on the global scope.
        // Future update should avoid using the global scope.
        if(!window.rangy){
            throw("Error: rangy-core.js and rangy-selectionsaverestore.js are needed for textAngular to function properly, but rangy-core has not been loaded yet.");
        }else{
            window.rangy.init();
            if(!window.rangy.saveSelection){
                throw("Error: rangy-selectionsaverestore.js is required for textAngular to work correctly.");
            }
        }
    };

Answer №2

Struggling with a similar problem, I experimented with the window.onload solution as recommended. However, this led to a new issue concerning textAngularSetup not being loaded. After retracting the window.onload adjustment and incorporating the textAngularSetup.js file, the functionality is now seamless in both Chrome and IE. It's puzzling since I didn't observe that file in the demonstration.

Answer №3

Dealing with a similar issue in IE 11 (edge mode), I initially tried implementing the solution involving window.onload, but unfortunately, the problem persisted within the application.

To address this issue, I made several adjustments:

  1. Added window.onload to the textangular.js - run() function, following the previous solution.

  2. Substituted textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies.

I also made modifications to the core code to handle exceptions,

Updated File: rangy-core.js, line number:2967-2972

                        var r2;
                        try {
                            // code causing the exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

This approach showed improvement and was tested successfully on both IE11 and Chrome browsers.

Answer №4

Encountered a similar issue when trying to load a third-party tool into a modal popup that relied on textangular-rangy.min.js

To resolve this, I swapped out textangular-rangy.min.js with rangy.core and rangy-selectionsaverestore dependencies, and made modifications to the core code to handle the exception.

For the file rangy-core.js, lines 2967-2972:

 var r2;
                        try {
                            // code generating above exception 
                            r2 = r1.cloneRange()
                            r1.setStart(textNode, 0);
                            r2.setEnd(textNode, 3);
                            r2.setStart(textNode, 2);
                            sel.addRange(r1);
                            sel.addRange(r2);
                            selectionSupportsMultipleRanges = (sel.rangeCount == 2);
                        } catch (e) {
                            selectionSupportsMultipleRanges = false;
                        }

Success! This solution now functions in both IE11 and Chrome :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting Issues with an AngularJS Simple Application

I'm just starting out with angularJS and have been learning recently. While following a video tutorial, I was working on the app at the same time. Unfortunately, I've hit a roadblock and can't seem to figure out where my mistake is. Can anyo ...

angularjs

Are your JavaScript scripts causing conflicts?

My bootstrap Carousel was working perfectly fine until I added a script to modify the navigation bars. The original script for the Carousel looked like this: <script> !function ($) { $(function() { $('#myCar ...

javascriptjquerytwitter-bootstrap

Tips for creating a stylish ReactJs Header component that stays fixed at the top of the page

Having an issue with my Header component - I want it to remain fixed at the top while scrolling down. Here's the current code: I've attempted using "position = fixed", but it caused my header to resize. Then, I tried setting its width to "width ...

javascriptreactjsmaterial-ui

"The controller seems to always return an 'undefined' value for the Angular

Within my project, I have implemented ui-view with the following structure: <main class="content"> <div class="inner" ng-controller="OrderPageController"> <div ui-view="main-info"></div> <div ui-view="comment ...

javascriptangularjsforms

Encountering an issue with undefined property 'path' while attempting to upload an image on the frontend in React

I have encountered an issue while trying to upload an image on the frontend. The error message displayed is: message: "Cannot read property 'path' of undefined" status: "fail" When I log req.file on the backend and attempt to ...

javascriptnode.jsreactjsexpressmulter

Tips for utilizing Angular Js to redirect a webpage

Can someone help me figure out how to redirect to another page using Angular Js? I've searched through various questions here but haven't found a successful answer. This is the code I'm currently working with: var app = angular.module(&ap ...

javascriptangularjs

Utilizing HTML5 to automatically refresh the page upon a change in geolocation

I have a web application built with AngularJS. One of the functionalities is activated only when the user is in close proximity to specific locations. To make this work, I can constantly refresh the page every 5 seconds and carry out calculations to dete ...

javascripthtmlangularjsgeolocation

JavaScript innerHTML not functioning properly when receiving a response from a servlet

Can someone help me troubleshoot the code below? I'm receiving a response from the servlet, but I can't seem to display it inside the div. Here is the response: lukas requests to be your friend &nbsp <button value="lukas"onclick="accfr(th ...

javascripthtml

Issue encountered when upgrading from Angular 4 to Angular 5: Module '@angular/router' is not found

I recently made the switch from angular 2 to angular 5. However, after the upgrade, I encountered some errors in my ts file. Should I remove @angular/core and @angular/router in angular 5? Here is a snippet of my package.json post-upgrade. Below are the de ...

javascriptangularnpmangular2-routingangular5

Using Vue 3, Bootstrap, and Pinia to create an innovative Global Modal experience

After creating a ModalComponent.vue file that I intend to use across different sections, I encountered an issue with closing the modal after calling my Pinia stores. The modal includes slots for the title, body, and footer, along with a standard close butt ...

javascriptvue.jsbootstrap-modalbootstrap-5pinia

Why is it that when I refresh a page on localhost, the file download gets stuck until I close the page?

As I work on my HTML/JS files hosted on localhost with Node, I've noticed that when I make changes to the code, Webpack automatically rebuilds the JS files. However, there are times when, after making updates and trying to refresh the page, the downl ...

javascriptnode.jsgoogle-chromebrowser

Track and manage date ranges inclusive of specific times

http://jsfiddle.net/7vzapm49/1/ var startdatearr = [new Date("04 Dec 2014 14:30:00").toUTCString(), new Date("07 Dec 2014 14:30:00").toUTCString()]; var enddatearr = [new Date("05 Dec 2014 14:30:00").toUTCString(), new Date("08 Dec 2014 14:30:00").toUTCSt ...

javascriptdate

Angular ng-repeat with toggle filter

Looking for a way to display data in an angular application using ng-repeat? Want to add and remove filters on the displayed data with a simple click? You're in luck. Implementing a toggle filter functionality is easier than you think. If you've ...

javascriptangularjsangularjs-ng-repeat

What benefits come with utilizing page objects in Protractor for conducting tests on AngularJS applications?

I've come across two examples demonstrating how to create Page Objects: The initial example showcases the following code snippet: var LoginPage = function() { this.userName = element(by.input('login.userName')); this.password = elem ...

angularjsselenium-webdriverprotractor

When working with jQuery, I encountered the error message "is not a function" because I mistakenly tried to use a function more than

While working on a pager, I encountered an issue with a function that is initially invoked when the document loads. However, when attempting to use it a second time, an error "is not a function" occurs. I am curious about the reason behind this phenomenon. ...

javascriptphpjquerypager

Having trouble with the search functionality in AngularJS while using Angular Bootstrap UI

Using angular-ui bootstrap for pagination in a table, with a separate search input tag. The search input only looks through the initial set of data displayed in the paginated list, not the subsequent pages. How can I make the search input search through al ...

angularjsangular-ui-bootstrap

Discover the ultimate guide to creating an interactive website using solely JavaScript, without relying on any server-side

I'm facing a challenge: I have a desire to create a website that is mainly static but also includes some dynamic components, such as a small news blog. Unfortunately, my web server only supports static files and operates as a public dropbox directory. ...

javascripthtmlajaxweb

Problem encountered when using the Mongoose find() method with the exec() function

Could you please clarify why the code snippet below is returning audiences instead of an empty array? return Audience.find() .exec((err, audiences) => { if (err) return errorHandler.handle('audienceService', err); return Promise.re ...

javascriptmongodbmongoosees6-promise

The function onReady() fails to trigger the execution of $.getJSON() upon page restoration in the browser

Initially, I want to mention that the code below functions perfectly when I launch a new browser tab and enter my web server's URL. It also works fine when I reload the page (using F5 or Ctrl-R). However, it only partially works if I reopen a closed b ...

javascript

The functionality of uploading files in Dropzone.js is not supported on Windows operating systems

I am currently working on a file uploader using dropzone functionality. I will share the code with you shortly, but first let me outline the problem: My setup consists of an Ubuntu machine running the server code in node.js using the multer library. The f ...

javascriptnode.jsubuntufile-uploaddropzone.js