20 Replies Latest reply on Sep 16, 2016 2:41 AM by prashantm10419319

    How to call external web service in phonegap?

    prashantm10419319 Level 1

      Hello Guys,

       

      I am new to Phonegap. I want to call external server side web service in my phonegap application. Actually, code is ready with AJAX and JQuery but it works with browser and Phonegap Developement App only. Means If i make a .APK file from Phonegap Build console and run on android device. It won't work means its not calling web service part.

      For this problem i referred stackoverflow posts and tried different solutions but no luck. I have added solutions which i tried, please check and tell me is i did anything wrong. And also suggest some other solutions for my question. Its very urgent for me to do this. My code solutions as follows:

      Solution 1:

           Change config.xml file as

                Add <access origin="*" /> to support for all URLs in application. And also told this is a valid solution to work. Because it gives access to all URLs, it won't restrict to any specific IP Address.

       

      Solution 2:

           Change config.xml file as

             Add <access origin="http://yourserveripaddress/*" /> to call only specific IP URLs in your application. It will give access to those URLs which contains mentioned #IP Address. This is also not working in mobile app.

       

      Solution 3:

          Use .get() or .getJSON()

             In some posts, they have mentioned to use .get() or .getJSON() functions in order work your application. Even this is not works for me.

       

      Solution 4:

           Use AngularJS

                In order to call web service in phonegap and make workable in mobile application as native app. $http() method is used to call web service. I tried this too, added angular minified js and use $http() code with data as GET request but it works only in browser and phonegap developer app.

       

       

      I am trying this for simple login page. I have other pages too but if its not working login then how it can be work on others. So please give me right solution for my question. It will good if u help me. Thanks in advance.

        • 1. Re: How to call external web service in phonegap?
          VectorP Level 4

          You most likely didn't whitelist correctly, or you didn't wait for the deviceready event to fire before attempting to send the ajax request.

           

          - make sure you have the whitelist plugin from npm included

          - make sure you have a reference to cordova.js, without actually adding such file to your assets

          - make sure you wait for the deviceready event to fire before attempting to send a request to your server.

          - make sure no CSP blocks comunication with your server

          • 2. Re: How to call external web service in phonegap?
            prashantm10419319 Level 1

            Hello #VectorP,

             

            Thanks for immediate reply.

            I have created basic project with no other changes. I have not changed any single thing in pre given project structure. For plugin, I have checked all plugins are loaded in config.xml file.

             

            1. Yes i have added whitelist plugin in my application.

            2. Cordova.js is added before all my other .js files.

            3. I have kept separate .js file for this deviceready and other events. So when page loads this .js file load before all other js an all. So its working.

            4. At server we have core PHP files which handles request ,process it and send back response in JSON format.

             

            Now, i don't know what is going wrong.

            • 3. Re: How to call external web service in phonegap?
              VectorP Level 4

              Let's start at the beginning. Do you have both config.xml and index.html in the root directory of your zip file?

              • 4. Re: How to call external web service in phonegap?
                prashantm10419319 Level 1

                yes. Both are in root folder. Index.html is on /www directory.

                • 5. Re: How to call external web service in phonegap?
                  VectorP Level 4

                  I don't understand this answer.

                  Is index.html in the root or in /www?

                  • 6. Re: How to call external web service in phonegap?
                    prashantm10419319 Level 1

                    Sorry for late reply.

                    index,html is in /www directory. When i create project first time, it gives me structure as below.

                    • .cordova
                    • hooks
                    • platforms
                    • plugins - It contains pre loaded plugins and it already have whitelist plugin.
                    • www - It contains index file and /js, /css folder and other files.
                    • 7. Re: How to call external web service in phonegap?
                      VectorP Level 4

                      But why do you "create a project" when you choose to build with Phonegap Build?

                      PGB requires your assets and a config file, only. You can't upload a full Cordova project (with hooks, platforms, etc) to PGB, so it doesn't make sense to "create a project" and/or use the Phonegap Desktop App.

                       

                      Do it this way:

                      1. Move config.xml into /www

                      2. Adjust the paths in config for your icons and splashes accordingly

                      3. Zip up the contents of /www (not the directory itself)

                       

                      As a result, your zip will not have any Cordova-typical directories, no .cordova file, etc.

                      This would also be a good time to read the Getting Started PGB Docs (not the Phonegap/Cordova docs)

                      • 8. Re: How to call external web service in phonegap?
                        prashantm10419319 Level 1

                        For PGB, i am zipping /www directory only. And it contains only /js, /css , index.html. Let me try procedure which you said and get back to you in few minutes.

                        • 9. Re: How to call external web service in phonegap?
                          prashantm10419319 Level 1

                          What about /plugins folder? We have added plugins to our applicaition. And that folder is outside of /www dir? So how it will connect plugins to our application?

                          • 10. Re: How to call external web service in phonegap?
                            VectorP Level 4

                            You don't add plugins to your application (when using Phonegap Build). You just specify them in your config.xml and PGB will do the rest.

                             

                            Really, it wouldn't be a bad idea to read and apply the documentation, instead of just guessing what to do.

                            See PhoneGap Build | PhoneGap Docs

                            • 11. Re: How to call external web service in phonegap?
                              prashantm10419319 Level 1

                              No. It's not the thing that i have not referred phonegap docs. I gone through docs before starting my application. But i am not getting right doc for calling web service part in phonegap applicaiton.

                              • 12. Re: How to call external web service in phonegap?
                                VectorP Level 4

                                OK. Please do this:

                                 

                                1. Confirm that you have both index.html and config.xml in the root directory of your zip file

                                (not in some other directory like /www or so).

                                2. Confirm that you have a reference of cordova.js in your html, without actually including such file in your assets

                                3. Confirm that you are getting the 'deviceready' event

                                4. Confirm that you are only performing ajax requests after receiving that deviceready event

                                5. Post your full config.xml here.

                                • 13. Re: How to call external web service in phonegap?
                                  prashantm10419319 Level 1

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

                                    <name>MyAppname</name>

                                    <description>Hello World sample application that responds to the deviceready event.</description>

                                    <author href="" email="prashant.mangale@noeticsystems.biz">Developed by Noetic Systems</author>

                                    <content src="index.html"/>

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

                                    <preference name="android-minSdkVersion" value="14"/>

                                    <preference name="android-build-tool" value="gradle" />

                                    <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>

                                    <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>

                                    <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>

                                    <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>

                                    <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1"/>

                                    <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>

                                    <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>

                                    <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>

                                    <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>

                                    <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>

                                    <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>

                                    <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0"/>

                                    <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>

                                    <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>

                                    <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

                                    <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0"/>

                                    <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>

                                    <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>

                                    <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>

                                    <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

                                    <plugin name="phonegap-plugin-push" spec="~1.6">

                                    <param name="SENDER_ID" value="576568923702" />

                                    </plugin>

                                    <plugin name="cordova-plugin-calendar" />

                                   

                                    <!-- <access origin="http://188.95.36.67:86/ishwar_parmar_group/*"/> -->

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

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

                                    <access origin="*" />

                                    <allow-intent href="tel:*" launch-external="yes" />

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

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

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

                                    <icon src="icon.png"/>

                                   

                                    <platform name="browser">

                                      <preference name="SplashScreen" value="/images/browser/splashscreen.jpg" /> <!-- defaults to "/img/logo.png" -->

                                    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->

                                      <!-- <preference name="FadeSplashScreen" value="false" /> -->

                                  <!--     <preference name="AutoHideSplashScreen" value="true" />

                                  -->    <preference name="SplashScreenBackgroundColor" value="green" /> <!-- defaults to "#464646" -->

                                      <preference name="ShowSplashScreen" value="false" /> <!-- defaults to "true" -->

                                      <preference name="SplashScreenWidth" value="600" /> <!-- defaults to "170" -->

                                      <preference name="SplashScreenHeight" value="300" /> <!-- defaults to "200" -->

                                    </platform>

                                   

                                   

                                    <platform name="android">

                                    <preference name="orientation" value="portrait" />

                                      <preference name="android-minSdkVersion" value="15"/>

                                    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->

                                      <!-- <preference name="FadeSplashScreen" value="false" /> -->

                                      <!-- <preference name="AutoHideSplashScreen" value="true" /> -->

                                      <icon src="res/icon/android/drawable-ldpi-icon.png" density="ldpi"/>

                                      <icon src="res/icon/android/drawable-mdpi-icon.png" density="mdpi"/>

                                      <icon src="res/icon/android/drawable-hdpi-icon.png" density="hdpi"/>

                                      <icon src="res/icon/android/drawable-xhdpi-icon.png" density="xhdpi"/>

                                      <icon src="res/icon/android/drawable-xxhdpi-icon.png" density="xxhdpi"/>

                                      <icon src="res/icon/android/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>

                                      <splash src="res/screen/android/drawable-land-ldpi-screen.png" density="land-ldpi"/>

                                      <splash src="res/screen/android/drawable-land-mdpi-screen.png" density="land-mdpi"/>

                                      <splash src="res/screen/android/drawable-land-hdpi-screen.png" density="land-hdpi"/>

                                      <splash src="res/screen/android/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>

                                      <splash src="res/screen/android/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>

                                      <splash src="res/screen/android/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>

                                      <splash src="res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                                      <splash src="res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                                      <splash src="res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                                      <splash src="res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                                      <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                                      <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

                                    </platform>

                                    <platform name="ios">

                                    <preference name="orientation" value="portrait" />

                                    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->

                                      <!-- <preference name="FadeSplashScreen" value="false" /> -->

                                      <!-- <preference name="AutoHideSplashScreen" value="true" /> -->

                                   

                                   

                                      <icon src="res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                                      <icon src="res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                                      <icon src="res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                                      <icon src="res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                                      <icon src="res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                                      <icon src="res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                                      <icon src="res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                                      <icon src="res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                                      <icon src="res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                                      <icon src="res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                                      <icon src="res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                                      <icon src="res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                                      <icon src="res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                                      <icon src="res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                                      <icon src="res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                                      <icon src="res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                                      <splash src="res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                                      <splash src="res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                                      <splash src="res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                                      <splash src="res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                                      <splash src="res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                                      <splash src="res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                                      <splash src="res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                                      <splash src="res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                                      <splash src="res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                                      <splash src="res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

                                    </platform>

                                    <platform name="wp8">

                                      <icon src="res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>

                                      <icon src="res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>

                                      <splash src="res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>

                                    </platform>

                                    <platform name="windows">

                                      <icon src="res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>

                                      <icon src="res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>

                                      <icon src="res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>

                                      <splash src="res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>

                                      <icon src="res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>

                                      <icon src="res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>

                                      <icon src="res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>

                                      <icon src="res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>

                                      <icon src="res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>

                                      <icon src="res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>

                                      <icon src="res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>

                                      <icon src="res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>

                                      <icon src="res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>

                                      <icon src="res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>

                                      <splash src="res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>

                                    <preference name="SplashScreenDelay" value="3000" /> <!-- defaults to "3000" -->

                                      <!-- <preference name="FadeSplashScreen" value="false" /> -->

                                      <!-- <preference name="AutoHideSplashScreen" value="true" /> -->

                                    </platform>

                                   

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

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

                                    <preference name="FadeSplashScreenDuration" value="750"/>

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

                                   

                                   

                                    <platform name="android">

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

                                    </platform>

                                    <platform name="ios">

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

                                      <allow-intent href="itms-apps:*"/>

                                    </platform>

                                  </widget>

                                  • 14. Re: How to call external web service in phonegap?
                                    VectorP Level 4

                                    Although I see several strange things in your config, the ajax request should work fine, unless:

                                    - your CSP is blocking it

                                    - you are not waiting for the deviceready event

                                    - your config changes are not used during Build due to Hydration

                                     

                                    What is to be noticed (probably not related):

                                    - you specify landscape splashes, although you only want portrait orientation

                                    - you specify 'density' whyile using compound qualifiers

                                    - you are pinning previous versions for most plugins (why?)

                                    These need to be corrected, anyway.

                                     

                                    Also: are you sure the ajax request is not even issued? Or do you simply get nothing returned?

                                    If the former: have you checked that the ajax request code is reached by your app code at all? And if that's indeed the case, what is the error message you receive?

                                    • 15. Re: How to call external web service in phonegap?
                                      prashantm10419319 Level 1

                                      Hi,

                                       

                                      Thanks for suggestions. I will definitely change as per your instructions.

                                      About AJAX request, Its not getting called in mobile app .APK file. But it works very well in browser. I am loading JS file which contains device ready events and other events which are related to device. Then other JS are getting load.

                                      On mobile application i am not getting error related to request.

                                      • 16. Re: How to call external web service in phonegap?
                                        VectorP Level 4

                                        Sorry, but this is not quite precise enough to spot the problem cause.

                                         

                                        About AJAX request, Its not getting called in mobile app .APK file.

                                        From your statement, I really can't tell whether the xmlHttpRequest is reached in your code execution, or not. And if reached, it is "called", so you would see the request in a console.

                                         

                                        I am loading JS file which contains device ready events

                                        There are no multiple 'device ready events', And what javascript file exactly 'contains' a deviceready event? Did you perhaps include cordova.js and/or phonegap.js in your assets?

                                        Or are you perhaps referring to your eventhandler? If so, what code makes sure that you are indeed attempting the ajax request after having received the deviceready event? (Be aware of the asynchronous nature of javascript!)

                                         

                                        On mobile application i am not getting error related to request.

                                        ...which still does not make clear whether or not the code line for the xmlHttpRequest is reached and whether or not the server receives the request.

                                         

                                        It would probably speed up this conversation if you could make your zip file available online somewhere, so I could have a look.

                                        • 17. Re: How to call external web service in phonegap?
                                          prashantm10419319 Level 1

                                          Ok. I will make available zip file to you. Actually, my system is getting down. But can you tell me what is necessary for external web service in order to work properly in mobile app using phonegap development?

                                          • 18. Re: How to call external web service in phonegap?
                                            VectorP Level 4

                                            What is basically necessary is mentioned in my reply of

                                             

                                            • 19. Re: How to call external web service in phonegap?
                                              prashantm10419319 Level 1

                                              Ok. Will get back to you.

                                              • 20. Re: How to call external web service in phonegap?
                                                prashantm10419319 Level 1

                                                Hello VectorP,

                                                My application running now. I have used AngularJs to do this task. My friend suggested me that solution. But other things that you were told me for setting up files on right places will help me too.

                                                Thanks for your help.