Looking to retrieve the AssetLoadedFunc properties in the LoadAssets function? Wondering if you should use TypeScript or JavaScript

When I invoke this.AssetLoadedFunc within the function LoadAssets(callback, user_data)

 LoadAssets(callback, user_data) {
      this.glg.LoadWidgetFromURL("assets/Js/scrollbar_h.g", null,
          this.AssetLoaded,
          {
            name: "scrollbar_h", callback: callback,
            user_data: user_data
          });  
      }

AssetLoaded(glg_object, data) {
      if (data.name == "scrollbar_h") {
          if (glg_object != null)
            glg_object.SetResourceObject("$config/GlgHScrollbar", glg_object);
        }
        else
          console.error("Unexpected asset name");

         if (!this.AssetLoaded.num_loaded )
          this.AssetLoaded.num_loaded = 1;
        else
          ++this.AssetLoaded.num_loaded;
      }

ERROR TypeError: Cannot read property

ERROR TypeError: Cannot read property 'AssetLoaded' of null
at AssetLoadedFunc (app.component.ts:540)

javascriptangulartypescriptecmascript-6dom-events

Answer №1

The function AssetLoadedFunc is being called in a different context, making it unable to access the AssetLoaded property with the expression this.AssetLoaded. To resolve this issue, you can bind the context for AssetLoadedFunc and modify your code as follows:

LoadAssets(callback, user_data) {
      this.glg.LoadWidgetFromURL("assets/Js/scrollbar_h.g", null,
          this.AssetLoadedFunc.bind(this),
          {
            name: "scrollbar_h", callback: callback,
            user_data: user_data
          });  
      }
      AssetLoaded: any = { num_loaded: null }
      AssetLoadedFunc(glg_object, data) {
        if (data.name == "scrollbar_h") {
          if (glg_object != null)
            glg_object.SetResourceObject("$config/GlgHScrollbar", glg_object);
        }
        else
          console.error("Unexpected asset name");

         if (!this.AssetLoaded.num_loaded )
          this.AssetLoaded.num_loaded = 1;
        else
          ++this.AssetLoaded.num_loaded;
      }

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

Investigate the CSS display property of an element using JavaScript

Can JavaScript be used to determine if an element's CSS display == block or none? ...

javascriptcss

An issue arose when trying to display React components within an Angular application

Attempting to incorporate React components into an Angular 7 application has been a challenge for me. While I have successfully rendered simple React components, I encountered the following error message (displayed in the browser console) when attempting t ...

javascriptangularreactjsapache-superset

Angular Alert: [$injector:modulerr] Unable to create the angularCharts module because: Error: [$injector:nomod]

Although this question has been asked multiple times, the standard solutions provided did not resolve my issue. Therefore, I am sharing my code along with the error in hopes that it will be self-explanatory. Error: Uncaught Error: [$injector:modulerr] Fa ...

javascriptangularjsangularjs-scope

Experiencing difficulties with managing immutable state within ngrx framework

Hi there, I'm currently exploring ngrx and trying to implement immutable state management. However, I've run into some issues with getting it to work properly. Below is the reducer I am working with: https://stackblitz.com/edit/brewbrut?file=src ...

angularstatengrximmutability

Angular 7: Retrieve the most recent subscription response from an array of observables

Scenario: I am handling multiple POST requests to update a single table with diverse data sets. The response from the request will contain the updated table data. To streamline this process, I stored the observables in an array and employed forkJoin to co ...

angularrxjs

Using jQuery to dynamically insert variables into CSS styles

I am attempting to use jQuery 3 to modify the CSS of a class and change the background color. My first step is converting an rgba color code (properties.color) to a hexadecimal code, which is functioning correctly. Next, I try to change the background co ...

javascriptjquerycss

Ways to Deduct 10 Days from a Date using JavaScript

After receiving some helpful suggestions, I managed to solve my date issue by using moment.js. Here is the snippet of code where I implemented moment.js: var preorderdate = moment(date).subtract('days',10).format('MMMM D, YYYY'); var r ...

javascript

Make sure to wait for the store to finish updating the data before accessing it. Utilize RxJS and Angular

Greetings! I am currently working with Angular and RxJS, and I'm trying to find a solution to wait for the store's data to be updated after an action is dispatched in order to perform some operations using that data. Below you can see a snippet o ...

angulartypescriptrxjs

Recent Google algorithm changes impact websites built on AngularJS and JavaScript

Exciting news from Google today (May 28, 2014) - JavaScript content will now be rendered by the Googlebot itself! This means there's no need to worry about serving pre-rendered pages just for crawling purposes. You can find out more details on this an ...

javascriptajaxangularjsseo

Modify the button's color based on a separate column within the table

Currently, I am implementing Datatables along with X-editable and including some bootstrap buttons within a table. My objective is to change the color of the button in the 'Validated' column to green when the user updates the editable 'Statu ...

javascriptjquerytwitter-bootstrapdatatablesx-editable

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

Incremental migration to Next.js within the current React application

I'm on a quest to uncover practical examples demonstrating the process of gradually transitioning an existing React application towards Next.js. Despite delving into all available Next.js documentation on incremental adoption strategies like subpaths, ...

javascriptreactjsproxynext.jsnetlify

Encountering the following error message: "Received error: `../node_modules/electron/index.js:1:0 Module not found: Can't resolve 'fs'` while integrating next.js with electron template."

I am utilizing the electron template with next.js, and I am trying to import ipcRenderer in my pages/index.tsx file. Below is the crucial code snippet: ... import { ipcRenderer } from 'electron'; function Home() { useEffect(() => { ip ...

typescriptnext.jselectron

Navigating through React Native with TypeScript can be made easier by using the proper method to pass parameters to the NavigationDialog function

How can I effectively pass the parameters to the NavigationDialog function for flexible usage? I attempted to pass the parameters in my code, but it seems like there might be an issue with the isVisible parameter. import React, { useState } from 'rea ...

javascriptreactjstypescriptreact-nativenavigation

Having trouble upgrading to the newest version of angular-cli on my Ubuntu 14.04 system

I'm currently in the process of updating my angular-cli version by running: npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70111e17051c11025d131c11025d14">[email protected]</a> However, I enco ...

angularangular-cli

Error: The property `orderRow` in `_this.Order` is not defined

Currently, I am having some issues while working with classes: The error message displayed is: TypeError: _this.Order.orderRow is undefined The error occurs when attempting to add a new row to the orderRow array. Here is the code snippet: Order Class ...

angulartypescript

The dynamic JavaScript in Bootstrap 4 seems to be malfunctioning, despite working perfectly in Bootstrap 3

I am currently implementing a dynamic modal feature using the code snippet below: // Show Ajax modal with content $(document).on('click', '[data-modal]', function (event) { event.preventDefault(); $.get($(this).data('moda ...

javascriptjqueryajaxtwitter-bootstrap

Mobile devices are unable to properly implement the Jquery show/hide feature

Currently, I am working on a small Russian project and facing some challenges with the mobile version of my website: php8098.github.io/breakfast. The issue lies within the first slider where the play button should trigger a modal window to open. I urgentl ...

javascriptjquerycss

Is there a way to minimize the number of Nuxt pages on a website?

Consider creating a large nuxt application with 100 routes. What strategies would you recommend for effectively managing these routes within the app, excluding micro-frontend solutions? ...

javascriptvue.jsnuxt.js

Bootstrap 5 dual carousel focus

I have implemented a combo carousel that serves as a timeline slider and displays 14 dates. Along with thumbnails, I am also using dates for navigation. To handle the large number of dates, I need to display them in separate rows, but only show one row at ...

javascriptjquerytwitter-bootstrapbootstrap-5