APP works on XDK debug but does not work on smartphone

Asked

Viewed 136 times

1

Hello!

I’m new to mobile development.

I’m writing an app that should consume a webservice in PHP and from the Json that this webservice will return, popular a listview. Simpleton.

The webservice is working and has the following return: [{"id_uf":"1","ds_uf":"Acre"}]

When I emulate the app by XDK works all right and on several devices but when I try to test by smartphone via USB or wifi the list is not populated and the app shows the programmed error message: $("#situacao").html("<center>O servidor não conseguiu processar o pedido. Tente novamente mais tarde...</center>");).

In debug, the app is error free.

I did a search and found possible solutions such as putting either the domain or an asterisk in the "Network Request" and "Navigation" fields of the "Hybrid mobile app build Settings" section, as well as starting Jquery before any other script but was unsuccessful.

Does anyone have a light? What else can I do?

Follow the code below:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css">
        <title>Blank App Designer Packaged Web App Project Template</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

        <!-- <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1"> -->
        <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, minimum-scale=1, maximum-scale=2"> -->

        <style>
                @-ms-viewport { width: 100vw ; min-zoom: 100% ; zoom: 100% ; }          @viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
                @-ms-viewport { user-zoom: fixed ; min-zoom: 100% ; }                   @viewport { user-zoom: fixed ; min-zoom: 100% ; }
                /*@-ms-viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }   @viewport { user-zoom: zoom ; min-zoom: 100% ; max-zoom: 200% ; }*/
        </style>

        <link rel="stylesheet" href="css/app.css">
        <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">

        <!--
          * cordova.js is a phantom lib for "Cordova HTML5 web app," it does nothing in a "Standard HTML5 web app"
          * Seeing a "Failed to load resource: net::ERR_FILE_NOT_FOUND" message ca used by this "cordova.js" script?
          * The cordova.js script is required if you convert your "Standard HTML5" project into a "Cordova" project.
          * You can safely ignore the error or comment out this line if you will not be developing a Cordova app.
          <script src="cordova.js" id="xdkJScordova_"></script>
        -->

        <!-- Recommended location for your JavaScript libraries -->
        <!-- These library references (below) are just examples to give you the general idea... -->
        <!-- <script src="lib/mc/hammer.js"></script> -->
        <!-- <script src="lib/ft/fastclick.js"></script> -->

        <script type="application/javascript" src="lib/jquery.min.js"></script>
        <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script>


        <script src="js/app.js"></script>
        <!-- for your event code, see README and file comments for details -->
        <script src="js/init-app.js"></script>
        <!-- for your init code, see README and file comments for details -->
        <script src="xdk/init-dev.js"></script>
        <!-- normalizes device and document ready events, see file for details -->

        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work below -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
        <script src="http://debug-software.intel.com/target/target-script-min.js#EfRwxwimVoYW6a-RqxEMm0Ru0gjBV88ZrQGusNM-1Us"></script>

        <script type="application/javascript">
            $.ui.useOSThemes=false;
            $(document).on("click", "#btnuf", function(evt)
            {
                $("#listaufs").empty();
                $("#situacao").html("<center>Buscando UF´s...</center>");
                $.ajax({
                    type: "GET",
                    url: "http://meuservidor/webserviceuf.php?parametros",
                    timeout: 3000,
                    contentType: "application/json; charset=utf-8",
                    //dataType: "jsonp",
                    success: function (result, jqXHR) {
                        var ufs = JSON.parse(result);
                        $.each(ufs,function(i, uf){
                            var item = "<p><b>ID:</b> "+uf.id_uf+"</p><p><b>DS:</b> "+uf.ds_uf+"</p></li>";
                            $("#listaufs").append(item);
                        });
                        $("#situacao").html("<center>Foram encontrado "+ufs.length+" UF´s</center>");
                    },
                    error: function (jqXHR, status) {
                        // Exibir mensagem de erro, caso aconteça...
                        $("#situacao").html("<center>O servidor não conseguiu processar o pedido. Tente novamente mais tarde...</center>");
                    },
                });
            });
        </script>

    </head>

    <body>
        <!-- IMPORTANT: Do not include a weinre script tag as part of your release builds! -->
        <!-- Place your remote debugging (weinre) script URL from the Test tab here, if it does not work above -->
        <!-- <script src="http://debug-software.intel.com/target/target-script-min.js#insertabiglongfunkynumberfromthexdkstesttab"></script> -->
        <script src="http://debug-software.intel.com/target/target-script-min.js#EfRwxwimVoYW6a-RqxEMm0Ru0gjBV88ZrQGusNM-1Us"></script>

        <div class="upage" id="mainpage" data-role="page">
            <div class="upage-outer">
                <div data-role="header" class="container-group inner-element uib_w_1" data-uib="jquery_mobile/header" data-ver="0">
                    <h1>MobUF</h1>
                    <div class="widget-container wrapping-col single-centered"></div>
                    <div class="widget-container content-area horiz-area wrapping-col left"></div>
                    <div class="widget-container content-area horiz-area wrapping-col right"></div>
                </div>
                <div class="upage-content ac0 content-area vertical-col left" id="page_57_62">

                    <div class="tarea widget uib_w_6 d-margins" data-uib="media/text" data-ver="0" name="uib_w_6" id="situacao">
                        <div class="widget-container left-receptacle"></div>
                        <div class="widget-container right-receptacle"></div>
                        <div class="text-container"></div>
                    </div>
                    <div class="widget uib_w_7 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0" id="listaufs">
                        <ul data-role="listview">
                            <li class="widget uib_w_8" data-uib="jquery_mobile/listitem" data-ver="0"><span></span>
                            </li>
                            <li class="widget uib_w_9" data-uib="jquery_mobile/listitem" data-ver="0"><span></span>
                            </li>
                            <li class="widget uib_w_10" data-uib="jquery_mobile/listitem" data-ver="0"><span></span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div data-role="footer" data-position="fixed" class="container-group inner-element uib_w_11" data-uib="jquery_mobile/footer" data-ver="0">
                    <h1></h1>
                    <div class="widget-container wrapping-col single-centered"><a class="widget uib_w_12 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" id="btnuf" data-icon="refresh" data-mini="true" data-iconpos="notext">Listar UF´s</a>
                    </div>
                    <div class="widget-container content-area horiz-area wrapping-col left"></div>
                    <div class="widget-container content-area horiz-area wrapping-col right"></div>
                </div>
            </div>
        </div>
    </body>

</html>

Thanks for your help!

1 answer

0

To better see the error it would be better to run the app in the XDK debug, go to the tab Network and see what is returning, or give a console.log(jqXHR) in its ajax error function. I’ve had a problem like this, I can’t access the project now to see, but it was in the php file, put at the top of the file:

 header('Access-Control-Allow-Origin: *');  

or

header('Access-Control-Allow-Origin: *'); 
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Content-Type: application/json'); 

Even better and pass the correct error that is returning, try to see by debug the XDK direct on your mobile.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.