2 Replies Latest reply on Feb 19, 2017 10:37 PM by Himanshu Joshi

    Ajax Error while running Phone Gap Build apk in android device

    Himanshu Joshi Level 1

      Hi All,

       

      I hope you all are in doing fine and are in fine spirits.

       

      I have been building a subscription based daily needs app(For Android device) for POC. This is my first venture with this, hence kindly forgive my ignorance.

       

      The front end used is APP JS and backend used is php on server side and Mongodb as the database.

      The current architecture is running fine on desktop.

       

      Then i created a config.xml for phone gap and then built the same with Phone Gap build. Then i installed generated apk on my Android device which installed successfully . Now when i try to login from the home page using username and password it throws Ajax error. (I am using Ajax to send GET request to the server where php script will fetch the given username and password from GET parameters and take appropriate action but unfortunately the request is getting failed.)

       

      I have searched many blogs which stated it is related to config.xml access and CONTENT SECURITY POLICY. I tried various solutions offered but to no avail.

       

      NOTE: I am running my apache server on local host and the url used for GET request from AJAX call is http://192.168.1.4/dailyneedapp/appjs/index1.php?callback=response .

       

      Below i am attaching my APPJS and config.xml code below for reference.

      Thanks in advance guys.

       

       

      APPJS CODE BELOW

       

      <!DOCTYPE html>

      <html>

        <head>

          <title>Daily Needs App</title>

       

          <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

          <link rel="stylesheet" href="app.min.css">

          <style>

       

           #head1{

        background-color:skyblue;

        text-align:center;

        height:50px;

        margin-bottom:60px;

        font-size:25px;

        padding-top:20px;

        color:teal;

         text-shadow: 1px 1px orange;

         text-decoration:underline;

        }

        #p1{

        text-align:center;

        padding-top:20px;

        font-size:18px;

        color:maroon;

        }

        #message{

        text-align:center;

        background-color:gray;

        color:orange;

        }

        @-webkit-keyframes pulse {

        0% {

        background-color: #CCC;

        }

        25% {

        background-color: #EEE;

        }

        50% {

        background-color: #CCC;

        }

        75% {

        background-color: #EEE;

        }

        100% {

        background-color: #CCC;

        }

          </style>

        </head>

       

       

        <body>

          <div class="app-page" data-page="home">

            <div class="app-topbar">

              <div class="app-title">Daily Needs</div>

            </div>

            <div class="app-content">

              <div class="app-section" id="head1">All Your Daily Needs at your Door Step

               

              </div>

        <div class="app-section" id="message"></div>

        <form class="app-section" id="formsection"><p id="p1">Enter your credentials to Login</p>

        <input class="app-input" name="username" id="username" placeholder="Enter Your Username">

        <input class="app-input" name="password" type="password" id="password" placeholder="Enter Your Password">

        <div class="app-button green app-submit" name="submit" id="submit">Login</div>

        </form>

              </div>

          </div>

       

       

          <div class="app-page" data-page="page2">

            <div class="app-topbar">

              <div class="app-button left" data-back data-autotitle></div>

              <div class="app-title">Page 2</div>

            </div>

            <div class="app-content">

              Page 2 is lonely

            </div>

          </div>

       

       

          <script src="zepto.js"></script>

          <script src="app.min.js"></script>

          <script>

            App.controller('home', function (page) {

        

         $(page).find("#message").hide();

             

        if (typeof localStorage !== 'undefined') {

                   

        

                   $(page).find("#submit")

                      .clickable()

                      .click(function () {

                       

                       var error = "";

                   

                    if ($("#username").val() == "") {

                       

                        error += "<br>The Username is required.<br>"

                       

                    }

        

                   

                    if ($("#password").val() == "") {

                       

                        error += "The Password field is required.<br>"

                       

                    }

                   

                   

                    if (error != "") {

                       

                        $(page).find("#message").html("There were errors in your submission:" + error).show();

                       

                        return false;

                       

                    } else {

                       

                        $.ajax({

         type: 'GET',

         url: 'http://192.168.1.4/dailyneedapp/appjs/index1.php?callback=response',

         // data to be added to query string:

         data: { username: $("#username").val(), password: $("#password").val()},

         // type of data we are expecting in return:

         dataType: 'jsonp',

         timeout: 300,

         context: $('body'),

         success: function(data){

           

         if (data.success == true) {

        

         $(page).find("#message").html("You have successfully logged in").show();

        

         App.load('page2');

        

          }

         

          else {

        

         if (data.fail == true){

        

               $(page).find("#message").html("Username does not belong to any account").show();

          

            }

       

        if (data.success == false){

       

         $(page).find("#message").html("Username and password does not match. Pls check").show();

       

            }

               } 

         

         },

         error: function(xhr, type){

       

        $(page).find("#message").html("Action can`t be completed as of now - please try again later.").show();    

        

         }

        })

                       

                    }

       

        

           }) 

       

        }

            });

       

       

            App.controller('page2', function (page) {

              // put stuff here

            });

       

       

            try {

              App.restore();

            } catch (err) {

              App.load('home');

            }

          </script>

        </body>

      </html>

       

       

       

      CONFIG.XML CODE BELOW

       

       

      <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0"  version="1.0.0">

      <name>Daily Needs App</name>

      <description>A sample PhoneGap application.</description>

      <content src="index.html"/>

       

      <access origin="*"/>

      <allow-navigation href="*" />

      <allow-intent href="http://*/*" />

      <allow-intent href="https://*/*" />

       

       

      <platform name="android">

      <!-- a preference specific to android only here -->

      </platform>

       

      <feature name="Device">

      <param name="android-package" value="org.apache.cordova.device.Device"/>

      </feature>

       

      <!-- Core/Common Preferences -->

       

      <preference name="BackgroundColor" value="0xff0000ff"/>

       

       

      <!--Android Preferences-->

       

      <preference name="KeepRunning" value="false"/>

       

      <preference name="LoadUrlTimeoutValue" value="10000"/>

       

      <preference name="SplashScreen" value="Loading...."/>

       

      <preference name="SplashScreenDelay" value="10000"/>

       

      <preference name="InAppBrowserStorageEnabled" value="true"/>

       

      <preference name="LoadingDialog" value="My Title,My Message"/>

       

      <preference name="LoadingPageDialog" value="Daily Needs App,Wait your App is Loading"/>

       

      <preference name="ShowTitle" value="true"/>

       

      <preference name="LogLevel" value="VERBOSE"/>

       

      <preference name="AndroidLaunchMode" value="singleTop"/>

       

      </widget>

        • 1. Re: Ajax Error while running Phone Gap Build apk in android device
          VectorP Level 4

          Well:

          you didn't include the Whitelist plugin from npm. You should, in order for the whitelisting to work.

           

          Unrelated: you can't use feature elements. If you want device functions, use the Device plugin from npm.

          1 person found this helpful
          • 2. Re: Ajax Error while running Phone Gap Build apk in android device
            Himanshu Joshi Level 1

            Hi,

             

            Well it was naive of me to miss that.

             

            I added the following plugins in my config.xml and it worked. Thanks a lot.

             

            <plugin name="cordova-plugin-battery-status" spec="~1.2.2" />

            <plugin name="cordova-plugin-camera" spec="~2.3.1" />

            <plugin name="cordova-plugin-console" spec="~1.0.5" />

            <plugin name="cordova-plugin-contacts" spec="~2.2.1" />

            <plugin name="cordova-plugin-device" spec="~1.1.4" />

            <plugin name="cordova-plugin-device-motion" spec="~1.2.3" />

            <plugin name="cordova-plugin-device-orientation" spec="~1.0.5" />

            <plugin name="cordova-plugin-dialogs" spec="~1.3.1" />

            <plugin name="cordova-plugin-file" spec="~4.3.1" />

            <plugin name="cordova-plugin-file-transfer" spec="~1.6.1" />

            <plugin name="cordova-plugin-geolocation" spec="~2.4.1" />

            <plugin name="cordova-plugin-globalization" spec="~1.0.5" />

            <plugin name="cordova-plugin-inappbrowser" spec="~1.6.1" />

            <plugin name="cordova-plugin-media" spec="~2.4.1" />

            <plugin name="cordova-plugin-media-capture" spec="~1.4.1" />

            <plugin name="cordova-plugin-network-information" spec="~1.3.1" />

            <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />

            <plugin name="cordova-plugin-vibration" spec="~2.1.3" />

            <plugin name="cordova-plugin-statusbar" spec="~2.2.1" />

            <plugin name="cordova-plugin-whitelist" spec="~1.3.1" />