Scripting issues detected in Safari and Microsoft Edge browsers

I recently finished developing an AngularJs Application that works flawlessly on Google Chrome and Mozilla Firefox. However, upon testing it on Safari and IE-11, I encountered errors in the console.

One particular piece of code that causes issues is used multiple times to open a bootstrap modal:

$modal.open({
    templateUrl: "dummyTemplate.html",
    controller: "DummyControllerName",
    controllerAs: "vm",
    windowClass: 'popupModal',
    size: 'sm',
    resolve: {
        dummyData: function(){ return object; }
    }
}).result.then(data => { 

});

Another problematic code snippet involves using $rootScope.$on to display toast messages:

$rootScope.$on("toastIt", (e, d) => { // <- This line triggers an error in IE and Safari
    toaster.pop(d.type || 'success', d.title, d.text);
});

The issue stems from EcmaScript support limitations in Internet Explorer and Safari. Can anyone suggest the best approach to address this problem and ensure my AngularJs Application can run smoothly on all browsers?

If modifying the code structure is the only solution, it would require changes in numerous places and consume a significant amount of time. Are there any alternative methods to resolve this issue efficiently?

Answer №1

It seems like you're running into an issue because of the arrow function usage in IE11. Unfortunately, IE11 doesn't have support for arrow functions and some other ES2015+ features. (But any recent version of Firefox does.)

To fix this, you'll need to transpile your code from ES2015+ to ES5 using a tool like Babel. This transpilation process should be integrated into your build process before deploying the code that is compatible with older browsers.

Alternatively, make sure to only use features that are supported by all your target browsers to avoid compatibility issues. For example, avoid using arrow functions if your target includes IE11.

Answer №2

It appears that there is a missing closing } in your resolve line. Here is the section of code where the issue lies:

$modal.open({
  ...
  resolve: {
    smudgedOut: function(){ return response.data
  }
})

The correct version should look like this:

$modal.open({
  ...
  resolve: {
    smudgedOut: function() { return response.data; }
  }
})

According to the information provided in the chrome dev tools, this seems to be the problem.

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

Using React.js with a PHP backend to create an API ecosystem for

Creating an admin panel for a website with CRUD operations has been quite the journey. I began by setting up API endpoints and hosting them on a subdomain. Fetching data from these endpoints was successful for displaying all contacts (GET), individual cont ...

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...

Why isn't my classList .add method working properly?

I've created a video slider background on my website, but I'm having trouble with the Javacript for video slider navigation. When I click on the button to change the video, nothing happens. The console is showing an error message that says "Canno ...

React.js: Dynamically Highlighting Menu Items Based on Scrolling位置-GaidoWhen a

Having trouble finding a solution for this issue. I'm currently working on creating a navigation bar with scroll-to functionality, where clicking on a menu item scrolls the page to the corresponding section. However, I am unsure how to change the colo ...

Eliminate repeated elements in a selection using an AngularJS custom directive

I am in the process of creating an events app that utilizes JSON data from Drupal to showcase events using AngularJS within a Drupal module. One of the keys in the JSON object is 'genre', which I'm utilizing in a select dropdown to allow use ...

Is it possible to utilize an npm package in TypeScript without a d.ts definition file?

Is it possible to use an npm package in TypeScript and Node.js without a .d.ts definition file? If so, how can I make it work? Currently, my code looks like this and I'm getting an error that says "cannot find module 'node-rest-client'" bec ...

What steps do I need to take to ensure NextJS stores my edits in VSCode?

I have attempted various troubleshooting steps such as changing file extensions from .js to .jsx, turning on Prettier for formatting upon saving, setting it as the default formatter, reloading and restarting the editor. However, the issue with not being ...

The select2 ajax functionality encountered an error: Uncaught TypeError - Unable to access the 'context' property as it is undefined

Trying to make an AJAX request using the Select2 jQuery plugin. The query appears to be functioning properly, but the problem arises when ".context===undefined" is called on the "data" object: Uncaught TypeError: Cannot read property 'context' o ...

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

Enhancing WordPress Menu Items with the 'data-hover' Attribute

Looking for a solution to add "data-hover" to menu items on Wordpress, like: Wanting to insert: data-hover="ABOUT US" into <a href="#">ABOUT US</a> without manually editing the link's HTML to make it: <a href="#" data-hover="ABOU ...

The Google map shifts beyond the perceived limits of the world

Is anyone else encountering an issue with Google Maps where you can now pan beyond the poles? It used to stop at the poles before, correct? The website I'm currently working on runs a location-based query on our server every time a user pans or zooms ...

Utilize the Magento extension to seamlessly integrate JavaScript code into the head section of your website

I am attempting to incorporate JavaScript code into all or some pages of my website using an extension. I require a dynamic version (hosted in a .phtml file) of the following script: <default> <reference name="head"> & ...

Learning to monitor for incoming messages in a Discord channel from the ground up

I am eager to understand how to detect new messages exclusively using requests made to the Discord API. While I have mastered loading messages by fetching , I am struggling to grasp how to listen for incoming messages. It appears that this feature is not ...

Ways to conceal the ng-click attribute within the document object model

I am diving into the world of AngularJS and trying to expand my knowledge. I've encountered a roadblock where I need to trigger a click event without using ng-click="myFunction()". Ideally, I want to keep the function being called hidden. <input t ...

Discovering the XPath of an element

Can anyone help me locate the XPath for the hamburger navigation icon on the website , specifically in the upper left corner? I am developing a Python script using selenium and need it to be able to click this particular button. Here's what I have tr ...

Angular form displayed on the screen

I'm having trouble finding a solution to this issue, as the form data is not being output. var app = angular.module('myApp', []); app.controller('mainController', ['$scope', function($scope) { $scope.update = funct ...

Tips for utilizing the Toggle Slider JS functionality

I'm attempting to change a value using a slider in HTML, here is my approach: html file : <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script scr="./scripts.js" ...

Enhancing User Experience: Creating a Vue Button Component for Adding Items to Cart with the Power of Axios and Laravel Backend Integration

I have recently developed a Vue3 shopping cart with an "Add One" button feature. When the user clicks this button, it updates an input field of type "number" and sends a request to update the database using Axios along with Laravel's createOrUpdate me ...

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

In the setup I have, there is a dropdown responsible for displaying notifications. <li class="notifications dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifi ...