`Warning: The alert function is not working properly in the console error

I am currently working on integrating otp functionality into my Ionic 3 project. I am facing an issue where I am able to receive the otp, but it is not redirecting to the otp receive page due to a specific error.

Below is the console error that I am encountering:

ERROR TypeError: alert is not a function at SafeSubscriber._error (home.ts:45) at SafeSubscriber.__tryOrUnsub (Subscriber.js:238) at SafeSubscriber.error (Subscriber.js:197) at Subscriber._error (Subscriber.js:128) at Subscriber.error (Subscriber.js:102) at MapSubscriber._next (map.js:82) at MapSubscriber.Subscriber.next (Subscriber.js:89) at XMLHttpRequest.onLoad (http.js:1556) at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (core.js:4620)

Even though I am successfully receiving the otp, the redirection to the otp receive page is failing because of this error.

Here is my code snippet:

import {Component} from '@angular/core';
import {NavController, Platform, AlertController} from 'ionic-angular';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import {OtpReceivePage} from '../otp-receive/otp-receive';


@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    mobile = '';

    constructor(public alertCtrl: AlertController,
                public http: Http,
                public navCtrl: NavController) {
    }

    sendOTP() {
        if (this.mobile.length != 12) {
            let alert = this.alertCtrl.create({
                title: 'Mobile Number Required!',
                subTitle: 'Please enter your 10 digit mobile number with 91 country code!',
                buttons: ['OK']
            });
            alert.present();
        }
        else {
            this.http.get('http://localhost:8080/nexmosms/send-sms.php')
                .map(res => res.json())
                .subscribe(res => {
                    console.log(JSON.stringify(res));
                    this.navCtrl.push(OtpReceivePage, {mobileno: this.mobile})
                }, (err) => {
                    alert("failed");
                });
        }
    }
}

Answer №1

It appears that your second alert is not defined.

(err) => {  alert("failed");});

To resolve this issue, you should replace it similar to how you handled the first one.

let alert = this.alertCtrl.create({
                title: 'failed'
                buttons: ['OK']
            });
            alert.present();

Furthermore, I suggest creating a function alert( message:string){} to avoid code repetition in the future.

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

Exploring the functionalities of bootstrapFactory with DartAngular 5

Here is a snippet of code showing the main method: Future<Null> main() async { final securityService = new SecurityService(new BrowserClient()); await securityService.getObject(); bootstrapStatic<AppComponent>( AppComponent, ...

Is it possible to customize the design of Angular Material Tabs on a per-page basis?

Currently working on customizing the appearance of a specific mat-tab, I've come to learn that using :ng-deep makes the style apply globally, Is there any method to modify the style only for this particular component? Appreciate any insights or sug ...

Confirm the validity of a data point within the JSON data package

When we send a request using the HTTP GET method, the API responds with the data. I need to ensure that the values of a specific input key match exactly what was specified in the GET URL. The URL that was used for the request: https://dummy.dns.com/Wells ...

Error message: The specified expression cannot be built using Google OAuth authentication in a Node.js environment

I'm currently working on integrating my NodeJS API, which was developed in TypeScript, with Google Oauth2 using Passport. However, when following the documentation written in JavaScript, I encountered an error underlining GoogleStrategy. This expressi ...

Encountering difficulties in updating CSS styles using the useState hook in React

I am currently working on creating a modal in react that changes the background color when opened. The goal is to have the background color darken when the modal is activated and return to normal when the modal is closed. I attempted to achieve this using ...

"Real-time image upload progress bar feature using JavaScript, eliminating the need for

I have successfully implemented a JavaScript function that displays picture previews and uploads them automatically on the onchange event. Now, I am looking to add a progress bar to show the upload status. However, all the solutions I found online are rel ...

Kendo Template Function: Angular JS version 1.6

I'm working with a currency column that looks like this: { field: 'INVOICE_AMOUNT_ORIGINAL', title: $translate.instant('invoiceAmount'), format: '{0:n}', template: '#= currency(dataItem.INVOICE_AMOUNT_ORIGIN ...

Preserve Angular 2 service instances while navigating between routes

I am faced with a scenario where I have three components that are all utilizing the same DataService. This is not because they share the same data, but rather because they use the exact same methods and patterns: @Component({ templateUrl: './data ...

Discover the object in the initial array that is not included in the second array using AngularJS

Imagine having these two sets of objects: first set: [ { id: "123", title: "123", options: [] }, { id: "456", title: "456", options: [ { id: "0123", t ...

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

Activate expansive pop-up windows with primeng's dynamic dialog feature

In my Angular web application, I am using the PrimeNg modal extension to display modal popups. I have successfully passed a component to the modal service with the following code: const ref = this.dialogService.open(LogsComponent, { data: { ...

Guide on integrating an Excel file into the ag-grid-angular platform

I was looking for the import method, but I couldn't seem to find it. Does anyone have any idea where it is located? Please inform me! ...

Whenever I try to run npm start, my webpack is not able to locate my index.html page

Recently delving into the world of node.js and its packages, I initiated by executing npm init to lay out the package.json structure shown below: { "name": "test", "version": "1.0.0", "description": & ...

Employing ng-repeat within a ui-scope

I'm having trouble getting my ui-view to update dynamically using ng-repeat. I'm not sure if what I want to do is even possible because when I add static objects to intro.html, they display properly. Thank you for any assistance, JS }).st ...

What steps should I take to troubleshoot an error with accessing 'request.body' within an async function that is returning a 'ReadableStream' object instead of the data I was expecting?

While developing my CRUD functionality in Next.js with TypeScript and Prisma, I encountered an issue with the PUT method. The GET method handler works fine, but for some reason, the PUT method is causing errors that I'm struggling to resolve. When in ...

Tips for saving HTML code within a concealed field utilizing jQuery

What is the best way to store a string with HTML tags in a hidden field using jQuery? I am attempting to use this code, but it's not functioning as expected: var terms = $('#TermsAndCondition').val(); alert($('#hdnTerms').val( ...

Attempting to abbreviate repetitive Javascript instructions

I have this functional javascript code, but I feel like there might be a more efficient way to write it. Any suggestions on simplifying this? let searchTerm = 'Some search text'; const isMatch = entry.title.toLowerCase().includes(searchTer ...

Communication between a local server and the browser rendering in Angular

It seems like I may be approaching this task in the wrong way. Currently, I have a Nodejs server running that reads data from a DB and serves it locally through express using http. The server sends the data on localhost at a specific port (for example, 80 ...

MyApp is encountering issues resolving all parameters

I'm encountering an issue that none of the other similar questions have been able to help me solve. Can anyone offer assistance? I've already attempted removing parameters one by one, but I'm still stuck. Can't resolve all parameters f ...

Is there a way to update the background dynamically?

I'm currently developing a weather application and I want the background to change dynamically based on the data retrieved from an API. Initially, I set up a variable and utilized an if statement for this purpose. However, I encountered difficulty in ...