Error: Attempting to access the 'presence' property of an undefined value

Question

Error: Attempting to access the 'presence' property of an undefined value

Having trouble with calling loading/Toast/Alert in Ionic2 under the current scenario. Being a newcomer to Ionic development, I'm struggling to understand it. I realize it's a trivial mistake.

 var dg = document.getElementById('btnregis');
   dg.onclick =()=> this.presentLoading();


   presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading);
    this.Reg_success();
}


    Reg_success() {
console.log("registration success");
        this.Billerlabelview = false;
        let toast = Toast.create({
            message: "Registering...",
            duration: 3000
        });
        this.navController.present(toast);
    }

The reg_Success() function isn't being triggered. It results in a similar error. Could there be something that I'm overlooking?

javascript typescript angular ionic2

Answer 1

Answer №1

When can you find the navController in action? You have the option to connect the db.onclick method with it.

var dg = document.getElementById('btnregis');
 dg.onclick = this.launchRegistrationLoading.bind(this);

launchRegistrationLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading);
}

Answer 2

When can you find the navController in action? You have the option to connect the db.onclick method with it.

var dg = document.getElementById('btnregis');
 dg.onclick = this.launchRegistrationLoading.bind(this);

launchRegistrationLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading);
}

Answer 3

Answer №2

When you pass the reference to a function, the this context is not available.

It is recommended to use lambdas (or fat arrow functions) when passing functions as parameters. This way, you can maintain the correct this context from the relevant class/scope, making your code more readable and consistent.

dg.onclick = () => this.presentLoading();

For further insights on the usage of lambdas, check out:

Answer 4

When you pass the reference to a function, the this context is not available.

It is recommended to use lambdas (or fat arrow functions) when passing functions as parameters. This way, you can maintain the correct this context from the relevant class/scope, making your code more readable and consistent.

dg.onclick = () => this.presentLoading();

For further insights on the usage of lambdas, check out:

Answer 5

Answer №3

Before anything else, make sure that you have properly set up the present() method in your constructor when using it with NavController:

class MyClass{
   constructor(navController: NavController) {
      // To ensure clarity and understanding, follow this recommended line from Ionic docs http://ionicframework.com/docs/v2/2.0.0-beta.9/api/components/nav/NavController/#present
      this.navController = navController;
   }    
}

In response to your inquiry, as indicated in the Ionic documentation, the present() function returns a promise. Therefore, you should wait for its resolution before proceeding to invoke your Reg_success method:

presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading).then(() => {
        this.Reg_success();
    });        
}

Additionally, consider optimizing how you handle the click event. Instead of setting it like this:

dg.onclick = this.presentLoading.bind(this);

You can adopt the more streamlined approach in Angular/Ionic by incorporating this snippet within your button tag:

<button (click)="presentLoading()">Click me!</button>

Answer 6

Before anything else, make sure that you have properly set up the present() method in your constructor when using it with NavController:

class MyClass{
   constructor(navController: NavController) {
      // To ensure clarity and understanding, follow this recommended line from Ionic docs http://ionicframework.com/docs/v2/2.0.0-beta.9/api/components/nav/NavController/#present
      this.navController = navController;
   }    
}

In response to your inquiry, as indicated in the Ionic documentation, the present() function returns a promise. Therefore, you should wait for its resolution before proceeding to invoke your Reg_success method:

presentLoading() {
    console.log("Registered");
    let loading = Loading.create({
        content: "Please wait...",
        duration: 3000
    });
    this.navController.present(loading).then(() => {
        this.Reg_success();
    });        
}

Additionally, consider optimizing how you handle the click event. Instead of setting it like this:

dg.onclick = this.presentLoading.bind(this);

You can adopt the more streamlined approach in Angular/Ionic by incorporating this snippet within your button tag:

<button (click)="presentLoading()">Click me!</button>

Error: Attempting to access the 'presence' property of an undefined value

Answer №1

Answer №2

Answer №3

Similar questions

Ways to eliminate the dotted line from the image map in Internet Explorer 11

Retrieving the value of a <select> element using React.useState in a Nextjs environment

Is there a way to imitate a method that initiates an AJAX request?

Vertical Orientation in HTML

What is preventing form validation from functioning properly with both built-in and cross-field validators?

Utilize Javascript to extract real-time information from MySQL database

What is the method in JavaScript to display the information stored in a title attribute?

Effective strategies for organizing component features in React

Unable to subscribe due to the return value being an AnonymousSubject rather than an Observable

How to handle redirects based on status codes in AngularJS $http requests

Understanding DefinitelyTyped: Deciphering the explanation behind 'export = _;'

Attempting to connect JQuery to a different page through a data attribute connection

Adjusting value of one input field according to the content of another text field in an

Revise/Add ng-submit and service for an enhanced system

I am looking to attach a Bootstrap 4 class to the form input field

Dependency of multiple objects in Webgl three.js

Tips for displaying Vue Components on an HTML5 canvas surface

Guide on creating a line chart resembling the one in Highcharts library

Create a package that is compatible with both node and browser environments

What causes my ready function to consistently execute upon controller or directive reinitialization?