The error message "element.getAttribute is not defined" is common when using the Perfect

I'm facing an issue while trying to implement the perfect-scrollbar plugin on my AngularJS website. The error I encounter is as follows:

TypeError: element.getAttribute is not a function at getId (http://localhost/Myproject/js/lib/perfect-scrollbar.jquery.js:1299:20) at Object.exports.get (http://localhost/Myproject/js/lib/perfect-scrollbar.jquery.js:1334:20)

Here's what I have tried:

// connections
link href="css/perfect-scrollbar.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="js/lib/perfect-scrollbar.jquery.js"></script>
<script src="js/lib/perfect-scrollbar.js"></script>

//styles
.carousel-in-circles {
  position: relative;
  overflow: hidden;
  width: 100%; /* I need horizontal scrollbar only */
}

// directive use
<div class="carousel-in-circles" perfect-scrollbar>...</div>

// angularJS directive
angular.module('myproject.directives').
    directive('perfectScrollbar', function () {
        return {
            link: function (el) {
                $(document).ready(function (){
                    $(el).perfectScrollbar();
                });                
            }
        };
    });

I seem to be stuck with this issue and would greatly appreciate any advice...

Answer №1

For websites built on the angular framework, it is recommended to utilize the angular-specific version of perfect scrollbar:

https://github.com/itsdrewmiller/angular-perfect-scrollbar

Integrating jQuery plugins with angular goes against its intended purpose and functionality.

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

Preparing JSON data for creating a wind map with Leaflet

I am currently working on converting netCDF data to JSON in order to use it with leaflet-velocity. This tool follows the same format as the output of grib2json used by cambecc in earth. An example of sample JSON data can be found at wind-global.json. By u ...

Setting a value to ng-model in AngularJS

I am having some trouble using ng-model with multiple dropdowns. My goal is to have the first select option set to empty, which should then make the rest of the dropdowns also show the empty option. <select ng-model="ddl"> <option></option ...

What is the best way to access the rendered child components within a parent component?

I am seeking a way to retrieve only the visible child components within a parent component. Below is my unsuccessful pseudo-code attempt: parent.component.html <parent (click)="changeVisibility()"> <child *ngIf="visible1"></child> ...

The Kendo UI Combobox triggering the change event twice

After noticing some strange behavior in all the comboboxes within my application, I realized that the Kendo UI ComboBoxes were triggering the change event twice, resulting in two HTTP requests being made when the code inside only required one. Despite cond ...

I am encountering difficulties with hosting a project that was created using Next.js

I am currently working on a Next.js project and I encountered some version compatibility issues when integrating MUI. While my project runs smoothly in localhost, it fails to work when deployed in hosting. I attempted to resolve this by using the --legacy ...

Is transforming lengthy code into a function the way to go?

I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...

React Typescript: Unable to set component as element

Currently, I am working on mapping my JSX component (Functional Component) inside an object for dynamic rendering. Here's what I have devised up to this point: Interface for Object interface Mappings { EC2: { component: React.FC<{}>; ...

Error encountered in Next.js while fetching data: Invalid JSON response received, with an unexpected token "<" at the start of the JSON data

I've been attempting to utilize the getStaticProps function in order to send a request and then pass the retrieved data to a component: However, I keep encountering this error: FetchError: invalid json response body at reason: Unexpected token < ...

Deciphering JSON data within AngularJS

When I retrieve JSON data in my controller using $http.get, it looks like this: $http.get('http://webapp-app4car.rhcloud.com/product/feed.json').success(function(data) The retrieved data is in JSON format and I need to access the value correspo ...

MulterError: Files must be uploaded to designated folders, found at wrappedFileFilter. Detected issue with 2 files

Initially, I want to express my apologies for any language mistakes in this message. I am currently facing difficulties with file uploads using Multer and Express. The issue arises when attempting to upload two files to separate directories; consistently ...

Confirming delete with jQuery and AJAX

Before sending an AJAX request to remove an item from the database, I require an OK/Cancel delete confirmation dialog box. var id=ID; $.ajax({ type: "POST", url: "sample.aspx?Mode=Delete", data: { id: id }, success: function (response) ...

Updating state in React is not possible

I am having trouble updating my state (specifically with setCoords). The API request is returning a 200 status code and the elements I need are present: https://i.stack.imgur.com/a8QzN.png Below is the code I am working with: const App = () => { co ...

What is the method for assigning classes to a Vue.js Functional Component from its parent component?

Imagine a scenario where I have a functional component: <template functional> <div>Some functional component</div> </template> Now, when I render this component within a parent element with classes: <parent> <som ...

Preventing closure of an angular-bootstrap dropdown (Removing a bound event from a directive to keep it open)

Currently, I am working with the Angular-Bootstrap Dropdown feature and I'm looking to make sure it doesn't close when clicked unless the user specifically chooses to do so. By default, the dropdown closes when clicking anywhere on the document. ...

Missing Ajax Functionality in Laravel Application

The code snippet below was created by me... <script> $('#spielAuswahl').on('change', function(e){ console.log(e); var spielID = e.target.value; //ajax $get.('/spieler?spielID=' + sp ...

Content does not become interactive upon the initial loading of the page

I've modified a W3 schools slideshow template to use text instead of dots, but I'm encountering two issues 1: The first image doesn't load when the page loads. Although using a class ID and setting it to active fixes this issue, it leads to ...

The Vue warning indicates that there was a failed type check for the "value" prop. It was expecting an array but received a number with a value of 1

I am facing an issue with an input of type number where I need to restrict the user from entering a number greater than ten. Initially, everything was working fine until I decided to change the value to an array (from value: 1 to value: [1, 1]) After swit ...

Steps for launching a browser using Capybara and Selenium

I am completely new to utilizing Capybara and have not had any experience with Selenium in the past. Currently, I am working on a Ruby on Rails project on MacOSX and encountering an issue where the browser window does not open when I execute my test. My te ...

Can anyone assist with troubleshooting the font size issue for a JavaScript tooltip on Joomla 1.5 with CK Forms?

My Joomla 1.5 site has CK Forms installed and is functioning properly, except for one issue: the tooltip on the captcha is not displaying correctly. It appears in a tiny 1px font size. Even though I have tried debugging using Firebug and confirmed that the ...

Utilizing SetInterval for dynamically changing the CSS background image URL

I'm starting to feel frustrated with this situation... I have a solution where the CSS background is coming from a webservice. Currently, the system refreshes the entire page using HTML: <meta http-equiv="refresh" content="300" /> ... body { ...