`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

Issue encountered: Unable to access the property 'loadChildren' as it is undefined, while attempting to configure the path

How can I conditionally load the route path? I've attempted the code below, but it's throwing an error. Can someone guide me on how to accomplish this task? [ng] ERROR in Cannot read property 'loadChildren' of undefined [ng] i 「w ...

Tips for setting up npm dependencies in a subfolder

Within the main directory, I have a package.json file that contains this command: "install": "cd packages/my-package && yarn". Every time I execute yarn run install, my intention is for it to enter into the specified package, set up the node modul ...

Effortless integration of jQuery with Google Maps autocomplete feature

I've successfully implemented Google Maps Autocomplete on multiple input tags like the one below: <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" /> To enable Google Maps au ...

I'm unsure of the most efficient way to condense this statement

$(document).ready(function(){ if ($(window).width() <961){ $('.item').on('click',function(){ /*---do something---*/ }) }else{ $('.item').on('click',function(){ ...

Creating a custom hook to detect when multiple elements are hovered over

I am currently working on creating a hook that can identify when hover is triggered over specific buttons. Here is what I have so far: enum options { buttonOne: 'buttonOne', buttonTwo: 'buttonTwo' } type HoverType= { [key in opti ...

If you click outside of a Div element, the Div element will close

I am looking for a way to implement a function that will hide a specific div when I click outside of its area. The div is initially set to Position: none and can be made visible using the following function: Div Element: <div id="TopBarBoxInfo1" oncli ...

Difficulty Loading Static JavaScript File in Express.js

Currently in the process of setting up an express server with create-react-app. Encountering this error in the console: Uncaught SyntaxError: Unexpected token < bundle.js:1 Upon clicking the error, it directs me to the homepage htm ...

JavaScript code to find a date within a specified range

I have developed a script that calculates the number of weeks between two specified dates. It then generates a table where the number of rows equals the number of weeks. The script can be viewed on JSFIDDLE Script: $('#test').click(function ...

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

What is the proper way to access the global `angular` variable in Angular and TypeScript when using AngularJS?

I'm currently integrating an Angular 4 component into a large monolithic AngularJS application. The challenge I face lies in the restrictions of the AngularJS project's build system, which limits me to only modifying the project's index.html ...

deliver a precise observable

Recently, I spent hours following a tutorial on jwt refresh tokens, only to discover that the code was outdated and some changes were required. As a result, I created an interceptor which encountered an issue with the Observable component, leaving me unsur ...

Triggering the onClick event in React to invoke another class components

I'm currently working on implementing a modal popup (stored in the PostView class) so that it appears when any post in the postcontainer class is clicked. As I am new to React, I would greatly appreciate any suggestions for enhancing the code. Post C ...

Transferring a JSON object to a PHP script

I am attempting to send a JSON object with a structure like this: {"service": "AAS1", "sizeTypes":[{"id":"20HU", "value":"1.0"},{"id":"40FB","2.5"}]} Just to note: The sizeTypes array contains a total of approximately 58 items. Upon clicking the submit ...

Firebase web authentication is most effective upon the second attempt

I am currently working on a website that interacts with Google's firebase to read and write data. The website has both anonymous and email authentication enabled. Users can view the data anonymously, but in order to edit or write new data, they must s ...

What does the underscore before a function in JavaScript or PHP signify?

I am curious about the significance of the underscore symbol (_) when it is placed before a function or variable. Does it serve to simply describe something, or is it required for executing specific functions or calling certain methods? In JavaScript: va ...

Guide on using JavaScript to extract and display a random text from a datalist upon clicking with the onclick event

Is there a way for a JavaScript function to select a random sentence from a datalist within the same file and display it upon clicking a button with an "onclick" event? I'm new to JavaScript and seeking the simplest solution. Can anyone provide an exa ...

Stub Node - Constructor Implementation

I've been searching for a solution for quite some time with no success, I have the following code that I want to test: some_script.js var Model = require('./models') exports.tokenizeCard = function (args) { var model = new Model(&apos ...

Title remains consistent | Angular 4

Struggling to change the document title on a specific route. The route is initially set with a default title. { path: 'artikel/:id/:slug', component: ArticleComponent, data: {title: 'Article', routeType: RouteType.ARTICLE, des ...

Navigating a JSON array using the Handlebars template engine

I have a JSON file and I am looking for guidance on how to display the information from it using the handlebars template engine: This is the template code: <script id="template-app" type="text/x-handlebars-template"> {{#each data}} Emai ...

Using jQuery and AJAX manipulates the value of my variable

My AJAX request seems to be causing jQuery to change the variable that is passed to it. Here is the JavaScript code: <script type="text/javascript"> function ResolveName(id) { $.ajax({ url : 'resolvename.php', ...