Async routes does not work when installing the app on an android device

Questions
1

Hello

I’m using async option in my routes.js like this:

{
    path: '/articulo/:articleId/',
    async: function (routeTo, routeFrom, resolve, reject) {
        // Router instance
        var router = this;

        // App instance
        var app = router.app;

        // Show Preloader
        app.preloader.show();

        // User ID from request
        var id = routeTo.params.articleId;

        app.request.get('http://mydomain.com?id=' + id, function (res) {

            app.preloader.hide();

            // Resolve route to load page
            resolve(
                    {
                        componentUrl: './pages/articulo.html',
                    },
                    {
                        context: {
                            data: res,
                        }
                    }
            );
        });
    },
},

All is working fine while testing in browser. But when I use phonegap build, after uploading my app and installing it in an Android device this functionality doesn’t work. When I click a related link I can see the preloader, but then the app get locked.

Why it works in browser but not in a device? What can I do in order to see whats going on?

Thanks!

2

Do you see any error when you run the app in mobile?

3

No error is shown. Only I can see the preloader and the screen stays that way indefinitely.

4

Ok, so if the preloader its shown, it menas that f7 async route yts working fine.
you have this line nof code,

// Show Preloader
app.preloader.show();

and then AFTER the app.request.get you hide the preloader. Wich you say its never trigger

app.preloader.hide();

so my guess, with the code you shared, is that the problem is in the ajax call, no the router.

app.request.get(url, data, success, error, dataType)- Load data from the server using a HTTP GET request

url - string - Request url
data - object - A plain object or string that is sent to the server with the request. Optional
success - function (data, status, xhr) - A callback function that is executed if the request succeeds. Optional
error - function (xhr, status) - A callback function that is executed if the request fails. Optional
dataType - string - The type of data that you’re expecting back from the server. Could be text or json. Optional

so can you make a callback for error, and alert the result, maybe it gives you a hint of what is happening.

5

Yes, good idea. I’ll try!

Thank!

6

I have implemented an error function:

function articuloError(err) {
    console.log("articuloError...");
    app.preloader.hide();
    console.log(err);
    app.dialog.alert("status: " + err.status + "<br />statusText: " + err.statusText + "<br />response: " + err.response + "<br />responseText: " + err.responseText);
}

Running in browser all works fine, but an android device alerts:

status: 404 
statusText: Not Found 
response:
responseText:

What is it not found?!? my url is fine, using the device browser I navigate successfully to this url, so why is happening this error!?!?

Help please!
Thanks!

7

so there is your problem, 404 it means that cant find the server.


can you make an alert before the app.request, and show the full url, url + params. maybe is there the problem

8

I made that alert and it shows a valid url. I can navigate to it from device browser… :face_with_raised_eyebrow:

9

Hmm, without fiddling with the code i cannot say whats going on here.
Valid url AND params? or only valid url?

10

url and params. You can check this url:

http://wocmes2018seville.org/go/jqm_app_servicios.php?operacion=APPOP_ARTICULO&id=121

11

can you try like this

app.request.get('http://wocmes2018seville.org/go/jqm_app_servicios.php?operacion=APPOP_ARTICULO&id=121', function (res) {
   ...
})
12

I guess the URL is blocked in android. Check whitelist config, cross-domain setting on server, or check if DNS from a browser on android device can resolve this URL. It’s not an error of F7.

13

Yes I tried thta. Same result.

I have tried changing the url to simply google.es and same result

14

I have this in my config.xml:

<access origin="*" />

But reading here https://cordova.apache.org/docs/en/latest/guide/appdev/whitelist/index.html I thing I have to install cordova-plugin-whitelist.

I’m going to check that.

15

That is!

Installing cordoba-plugin-whitelist and configuring the config.xml now it works!

Thanks!

1 Like