Alert is not function

[sagarkodte]

Getting below error on sending otp

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)

I’m receiving the otp but page is not redirecting to the otp receive page because of this error

below is my code

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");
        });
      }
    }

}

Please help

[romulus64]

Hello, change

let alert = this.alertCtrl.create

by

let alertct = this.alertCtrl.create

and

alert.present();

by

alertct .present();

[wiredmartian]

Here you used ‘alert’ as a variable.

@sagarkodte

let alert = this.alertCtrl.create({});

And here, you’re using ‘alert’ as a function. I know your intention was probably the default js alert() function. But the compiler is thinking you’re talking about the above alert which is indeed not a function.

@sagarkodte

alert(“failed”);

Just change the variable name ‘alert’ to something else and you’ll be good.

[sagarkodte]

Yes. It works. But now page is not redirecting to the OtpReceivePage. Even I’m getting the OTP whenever i send otp. Anything is wrong?

[wiredmartian]

If your “else” clause is not executed, then the page will not redirect to ‘OtpReceivePage’… And the way to see that is by this line below. If you see the data on your browser console, then the page should redirect. Can you see the ‘res’ you console logged?

@sagarkodte

console.log(JSON.stringify(res));

[sagarkodte]

Getting res is not defined error when i put this in console.

[wiredmartian]

No, I didn’t mean stick the line in the Console. I meant when you run your app and enter the 12 digit numbers and click “Ok” or “Submit”, do you get or see any data on the browser console after that or you get an alert with “failed”?

[sagarkodte]

doesn’t see anything in console. Getting failed alert directly. But otp is working

[wiredmartian]

That’s exactly what I thought, your ‘OptReceivePage’ isn’t the problem. If ‘http:…localhost:8080’ is running then your problem is on your ‘send-sms.php’ file.

Replace the line below with console.log(err); the console will give more details on what the problem is.

@sagarkodte

alert(“failed”);

[sagarkodte]

Yes. Did this. Got below errors in console.

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.Body.json (http.js:1063)
    at MapSubscriber.project (home.ts:39)
    at MapSubscriber._next (map.js:79)
    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)
    at t.invokeTask (polyfills.js:3)
    at r.runTask (polyfills.js:3)

[wiredmartian]

Looks like your ‘send-sms.php’ isn’t returning the correct data format (JSON). And it needs to return JSON for this to work. Whatever your file is returning begins with ‘<’ and it could be XML or HTML.

You need your function on your PHP file to return json data format.

[sagarkodte]

I have use below php code for sms api

<?php
require_once 'vendor/autoload.php';

header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

$NEXMO_TO=$_GET['mobile'];
$NEXMO_FROM='Ampersand OTP';
$MESSAGE='1551 Ampersand OTP';

$client = $client = new Nexmo\Client(new Nexmo\Client\Credentials\Basic('xx', 
'xx'));


$message = $client->message()->send([
'to' => $NEXMO_TO,
'from' => $NEXMO_FROM,	
'text' => $MESSAGE
]);

echo "Sent message to " . $message['to'] . ". Balance is now " . 
$message['remaining-balance'] . PHP_EOL;

?>

[wiredmartian]

Sorry dude, I’ve never used PHP in my life. But if you wanna see your Response (returned data). Run your app, before entering the 12 numbers and firing the request (Send)

Click F12 to go to browser dev tools, click the Network tab.
Enter the 12 digit number on your form and submit… On your Network click on the last request’s name, its gonna open another window, then click on ‘Reponse’ and you should be able to see where you went wrong… Example below

[sagarkodte]

Thank you so much for the help…

[yatindradhurwe23]

can you solve this error?