Error: Failed to load resource

Ionic Framework ionic-v3
1

I have this error when I’m testing my ionic app in a real device, Error: Failed to load resource and the link to my php script which supposedly retrieves/displays the record from MySQL. But when I’m doing ionic serve the records are displayed.

i.e.

image
image.png335×571 73.3 KB

But when I do ionic cordova run android or if emulated, nothing is shown but ionic app is launched but the Menu shows no records.

Here’s the php code anyway,

<?php  
    header('Access-Control-Allow-Origin:*');
    $hn='localhost';
	$un='root';
	$pwd='';
	$db='orderingsystem';
	$cs='utf8';

   $dsn  = "mysql:host=" . $hn . ";port=3306;dbname=" . $db . ";charset=" . $cs;
   $opt  = array(
            PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
            PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
            PDO::ATTR_EMULATE_PREPARES   => false,
        );
   // Create a PDO instance (connect to the database)
   $pdo  = new PDO($dsn, $un, $pwd, $opt);
   $data = array();

   // Attempt to query database table and retrieve data
   try {
      $stmt=$pdo->query('SELECT * FROM tblproducts ORDER BY PRODUCT_CODE ASC');
      while($row  = $stmt->fetch(PDO::FETCH_OBJ))
      {
         // Assign each row of data to associative array
         $data[] = $row;
      }
      // Return data as JSON
      echo json_encode($data);
   }
   catch(PDOException $e)
   {
      echo $e->getMessage();
   }
?>

Please help me, thank you so much!

2

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.

3

Yes I did and this is what I got.

image

4

Show us the network tab and what is behind “> ERROR” and “> Response”

5

image

6

And the network tab?
Also the code where you request the php script.

7

image

8

This is the red one

image

The code where I requested php; menu.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {
	public items:any=[];

  constructor(public navCtrl: NavController, public navParams: NavParams, public http:Http) {
  }

  load(){
  	this.http.get('http://localhost/try-ionic/retrieve-products.php')
  	.map(res=>res.json())
  	.subscribe(data=>{
  		this.items=data;
  	});
  }

   ionViewWillEnter()
   {
      this.load();
   }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MenuPage');
  }

}

Here’s my ionic info if ever you’ll be needing it.

image

9

I would expect that when you are running ionic serve, “localhost” is the same host that the browser is running in. When on device, “localhost” is now the device. So I would replace “localhost” with the FQDN of whatever host is serving the PHP.

1 Like
10

Thank you, i will try to solve with this solution.

11

Solved it with big help of my friend. Thank you for this! :slight_smile: