Framework7 don't show any data from database

Question

I'm fairly new with Framework7. I would like to get data from the database using AJAX. It's working as intended on the browser, I can get the data and display it on the HTML file, although it can't show any data when I convert it to apk ( using Cordova ). I'm using an external database for testing.

PHP code:

$db['db_host'] = 'remotemysql.com';
$db['db_user'] = 'user';
$db['db_pass'] = 'pass';
$db['db_name'] = 'name';

foreach ( $db as $key => $value ) {
    define( strtoupper( $key ), $value );
}
$connection = mysqli_connect( DB_HOST, DB_USER, DB_PASS, DB_NAME );

if ( !$connection ) {
    die( 'database failed');
}

$result = mysqli_query($connection,"SELECT * FROM users_details WHERE user_id = 1");
$rows = array();
while($row = mysqli_fetch_assoc($result)) {   
   $rows[] = $row;
}

print json_encode($rows);

HTML/AJAX Request:

<template>
<div class="page no-navbar home-user-page">
    <div class="page-content home-user-page-content">
        <div class="user-details-box">
            <div class="user-details">
                <div id="user-name"></div>
                <div id="user-title"></div>
            </div>

            <div class="user-chart-outer-box">
                <div id="user-point"></div>
                <div id="user-level"></div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
return {
    on: {
        pageInit: function() {
            app.request.get('comps/get_user.php', function(response) {
                dataJSON = JSON.parse( response );
                let user_name = dataJSON[0].user_name;
                let user_title = dataJSON[0].user_title;
                let user_points = dataJSON[0].user_points;

                let level = Math.ceil( user_points / 200 );

                $( '#user-name' ).html( user_name );
                $( '#user-title' ).html( user_title );
                $( '#user-point' ).html( user_points );
                $( '#user-level' ).html( "Level " + level );
            });
        }
    }
}
</script>

Thanks in advance,

~ Nathan.

Answer 1

Usually this Issue happen since you try to call php page from local server using apk which its installed on mobile.

so that we can say your issue in this line app.request.get('comps/get_user.php', function(response) { and you can resolve this issue by doing one of these solution:

1. you can setup your php page in real server and call the page like myStaginServer.com/get_user.php .
2. you can connect your mobile and virual server in the same wifi, and give permission to access your virtual server, and you need use IP to access it like 195.155.0.4/get_user.php .

Note: you can debug your work direct from APK by connect device and enable deluging to your development device, and then open chrome, and select remote device, you will see your device and track request from mobile and any error. (Working in debug APK version) .

Good luck.