Phonegap Ajax request not executing

Question

I have an Android app that I have been building on phoengap. I upgraded to the newest version on phoengap build:

<preference name="phonegap-version" value="cli-5.2.0" />

And my config looks like this:

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

    <preference name="phonegap-version" value="cli-5.2.0" />

    <name>Beer Portfolio</name>
    <description>Know Your Beer</description>
    <author href="http://www.beerportfolio.glass" email="mike@beerportfolio.glass">Mike</author>
    <content src="index.html" />

    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="false" />
    <preference name="disallowOverscroll" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="10" />
    <preference name="android-targetSdkVersion" value="19" />
    <preference name="android-installLocation" value="auto" />

    <gap:plugin name="org.apache.cordova.camera" source="npm"/>
    <gap:plugin name="org.apache.cordova.media-capture" source="npm"/>
    <gap:plugin name="org.apache.cordova.console" source="npm" />
    <gap:plugin name="org.apache.cordova.device" source="npm" />
    <gap:plugin name="org.apache.cordova.device-motion" source="npm"/>
    <gap:plugin name="org.apache.cordova.device-orientation" source="npm"/>
    <gap:plugin name="org.apache.cordova.dialogs" source="npm"/>
    <gap:plugin name="org.apache.cordova.file" source="npm"/>
    <gap:plugin name="org.apache.cordova.file-transfer" source="npm"/>
    <gap:plugin name="org.apache.cordova.geolocation" source="npm"/>
    <gap:plugin name="org.apache.cordova.globalization" source="npm"/>
    <gap:plugin name="org.apache.cordova.inappbrowser" source="npm"/>
    <gap:plugin name="org.apache.cordova.media" source="npm"/>
    <gap:plugin name="org.apache.cordova.network-information" source="npm"/>
    <gap:plugin name="org.apache.cordova.splashscreen" source="npm"/>
    <gap:plugin name="org.apache.cordova.vibration" source="npm"/>
    <icon src="icon.png" />

    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-ldpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-mdpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-hdpi" />
    <gap:splash src="splash.png" gap:platform="android" gap:qualifier="port-xhdpi" />
    <gap:splash src="splash.png" gap:platform="blackberry" />
    <gap:splash src="splash.png" gap:platform="ios" width="320" height="480" />
    <gap:splash src="splash.png" gap:platform="ios" width="640" height="960" />
    <gap:splash src="splash.png" gap:platform="ios" width="640" height="1136" />
    <gap:splash src="splash.png" gap:platform="ios" width="768" height="1024" />
    <gap:splash src="splash.png" gap:platform="ios" width="1024" height="768" />
    <gap:splash src="splash.png" gap:platform="winphone" />
    <access origin="*" />

    <gap:plugin name="com.phonegap.plugins.barcodescanner" source="npm" />
    <gap:plugin name="uk.co.workingedge.phonegap.plugin.launchnavigator" source="npm" />


    <!-- iPhone / iPod Touch  - lower 4s -->
    <icon src="icon-57.png" gap:platform="ios" width="57" height="57" />
    <icon src="icon.png" gap:platform="ios" width="114" height="114" />
    <icon src="icon-72.png" gap:platform="ios" width="72" height="72" />

    <!-- iPhone / iPod Touch - 5-5s -->
    <icon src="icon.png" gap:platform="ios" width="60" height="60" />
    <icon src="icon.png" gap:platform="ios" width="120" height="120" />
    <!-- iPhone6-6+ -->
    <icon src="icon.png" gap:platform="ios" width="180" height="180" />

    <!-- Settings Icon -->
    <icon src="icon.png" gap:platform="ios" width="29" height="29" />
    <icon src="icon.png" gap:platform="ios" width="58" height="58" />

    <!-- Spotlight Icon -->
    <icon src="icon.png" gap:platform="ios" width="40" height="40" />
    <icon src="icon.png" gap:platform="ios" width="80" height="80" />

    <plugin name="cordova-plugin-whitelist" version="1" source="npm"/>

    <gap:plugin name="org.apache.cordova.device" version="0.2.3" source="npm"/>
    <gap:plugin name="org.apache.cordova.geolocation" source="npm"/>

    <feature name="http://api.phonegap.com/1.0/battery" />
    <feature name="http://api.phonegap.com/1.0/camera" />
    <feature name="http://api.phonegap.com/1.0/geolocation" />
    <feature name="http://api.phonegap.com/1.0/network" />
    <feature name="http://api.phonegap.com/1.0/notification" />

    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>

When I try and execute a button to log in now, it never executes the ajax request. My html looks like this:

<body>

    <div class="row">
        <div class="col s12 m7">
            <div class="card">
                <div class="card-image">
                    <img src="img/logo.png">

                </div>
                <div class="card-content">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input id="email" type="text" class="validate">
                                    <label for="email">Username</label>
                                </div>

                                <div class="input-field col s12">
                                    <input id="example" type="password" class="validate">
                                    <label for="example">Password</label>
                                </div>
                            </div>

                        </form>
                        <a id="login" class="waves-effect waves-light white-text btn orange">Login</a>

                        <a id="register" class="orange-text" style="float: right;" href="register.html">Register</a>



                    </div>

                </div>

            </div>
        </div>
    </div>



    <!--  Scripts-->

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/init.js"></script>
    <script src="js/materialize.js"></script>
    <script src="js/home.js"></script>



</body>

And my JS looks similar to this:

$(document).ready(function () {


    //check if user has already logged in once
    if (localStorage.getItem("userID") != null) {
        window.localStorage.setItem("userID", localStorage.getItem("userID"));
        window.location.replace("stats.html");
    }

    //if user has logged in go to stats page

    $("#login").click(function () {
        var u = $('#email').val();
        var p = $('#example').val();
        alert("test1");
        $.get("http://www.beerportfolio.glass/app_login2.php", {
                ex1: example1,
                ex2: example
            })
            .done(function (data) {
                alert("test2");
                if (data.status == "no") {
                    alert("test3");
                    mixpanel.track("Wrong User Name or password");
                    alert("Wrong username and password");
                } else {
                    alert("test4");
                    mixpanel.track("User logged In");
                    //todo: store user name
                    mixpanel.identify(data.userID);
                    window.localStorage.setItem("userID", data.userID);
                    //redirect to statistics page
                    window.location.replace("stats.html");
                }
            });

    });

When I execute in my browser on my desktop all works perfect. But when I execute after building with phonegap build, It only shows "test1" on execute which shows its not executing the ajax call.

});

try adding to your config file – Diptox Sep 26 '15 at 22:12 — Diptox, Sep 26 '15 at 22:12
trying that now, thanks. Whats it do? – Mike Sep 26 '15 at 22:13 — Mike, Sep 26 '15 at 22:13
ow , let me search for another solution – Diptox Sep 26 '15 at 22:18 — Diptox, Sep 26 '15 at 22:18
Check this http://stackoverflow.com/a/30066390/5365770 – Diptox Sep 26 '15 at 22:19 — Diptox, Sep 26 '15 at 22:19

score 1 · Answer 1 · 2015-09-27T23:17:03.727

@Mike,
you have two options, rollback before 4.0 or move forward.

To move forward, you need to read deeper into documentation. You need to add header information in your HTML page.

See: Cordova Whitelist Guide. or the npm version

Here is an example of what you need to add to your webpage from the documentation:  <meta http-equiv="Content-Security-Policy" content="default-src 'self' foo.com">

Even more details are available at:
Top Mistakes by Developers new to Cordova/Phonegap See #10

Best of Luck

score 0 · Answer 2 · answered Sep 26 '15 at 22:51

0

Recently i just read that all http requests must be https... take a look at https://dev.twitter.com/mopub/ios/ios9

answered Sep 26 '15 at 22:51

SirCharles

315
2
5

Just to clarify: the https requirement is iOS 9 only right now. – Josh Buchea Sep 27 '15 at 01:46
any CA you recommend? – Mike Sep 30 '15 at 00:42

score 0 · Answer 3 · edited Mar 27 '18 at 00:37

0

The whitelist plugin has moved out of cordova/phonegap. You need to add it yourself. A good choice is cordova-plugin-whitelist.

edited Mar 27 '18 at 00:37

Pang

9,564
146
81
122

answered Sep 27 '15 at 00:11

P-H

43
8

score 0 · Answer 4 · answered Oct 02 '15 at 12:56

The reason is now phonegap does not allow cors ajax if you did not explicitly allow the origing like this:

<access origin="*" />

The fastest solution is to compile against an older phonegap version. For example just add this in your config.xml

<preference name="phonegap-version" value="3.6.3" />

score 0 · Answer 5 · answered Oct 02 '15 at 17:03

recently i had the same problem, i just change my config.xml and it works, i use ajax, my config.xml is like this.

<gap:plugin name="cordova-plugin-camera" version="1.2.0" source="npm"  />
<gap:plugin name="cordova-plugin-whitelist" source="npm" /> 
<gap:plugin name="cordova-plugin-device" version="1.0.1" source="npm" />
<gap:plugin name="cordova-plugin-device-motion" version="1.1.1" source="npm" />
<gap:plugin name="cordova-plugin-device-orientation" version="1.0.1" source="npm"  />
<gap:plugin name="cordova-plugin-dialogs" version="1.1.1" source="npm"  />
<gap:plugin name="cordova-plugin-file" version="3.0.0" source="npm"  />
<gap:plugin name="cordova-plugin-inappbrowser" version="1.0.1" source="npm" />
<gap:plugin name="cordova-plugin-splashscreen" version="2.1.0" source="npm" />
<gap:plugin name="cordova-plugin-vibration" version="1.2.0" source="npm"  />
<gap:plugin name="cordova-plugin-sms" version="1.0.4" source="npm" />
<gap:plugin name="phonegap-plugin-barcodescanner" version="4.0.2" source="npm"/>
<gap:plugin name="com.phonegap.plugins.pushplugin" version="2.5.0"  />
<gap:plugin name="cordova-plugin-network-information" version="0.2.12" source="npm"/>
<gap:plugin name="com.admob.plugin" version="5.0.4" source="plugins.cordova.io"/>

my request:

$.ajax({
            beforeSend: function() {$('#div_carga').show();},
            complete: function(){$('#div_carga').hide();},
            type: "post",
            url:"https://www.example.net/get_form.php",
            data:{id:id},
            success: function(datos){
                $("#obten").remove();
                $("#contenidoForm").append("<div id='obten' name='obten'></div>");
                $('#prospectos').html(datos);
            }
        });

if i use httpRequest also it works.

score -1 · Answer 6 · edited Sep 28 '15 at 06:17

-1

$.get("http://www.beerportfolio.glass/app_login2.php", {
                ex1: example1,
                ex2: example
})

Check your get request params.

example1 and example are undefined.

edited Sep 28 '15 at 06:17

Stunner

12,025
12
86
145

answered Sep 28 '15 at 06:11

Maruthi Gongadi

67
8

Phonegap Ajax request not executing

6 Answers6