APP works on XDK debug but does not work on smartphone

1

Hello

I'm new to mobile development.

I'm writing an app that should consume a webservice in PHP and from Json this webservice will return a popular listview. Simple thing.

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

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

No debugging, the app is error-free.

I have researched 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, in addition to starting JQuery before any other script I did not succeed.

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

The following is 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>--><scriptsrc="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>--><scriptsrc="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 the help!

    
asked by anonymous 12.05.2016 / 02:59

1 answer

0

To see the error better it would be better to run the app in the XDK debug, go to the Network tab and see what is returning, or give a console.log (jqXHR) in its ajax error function. I've already had a problem like this, I can not access the project now to see, but it was in the php file, put it 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'); 

Best of all and get the correct error that is returning, try to see by debugging the XDK directly on your mobile phone.

    
12.05.2016 / 14:23