Phonegap/AJAX/Codeigniter - Ajax post not working

Question

I'm trying to post data from a form to a codeigniter controller in a web server I deployed on a host online. It works when I use it on my laptop, but after I build it in build.phonegap.com and install it in my phone, it doesn't work. Here's the code in the index.html file:

Javascript:

function sendMessage(){
            //get values from the form
            var msgFrom = $('#msgFrom').val();
            var msgTo = $('#msgTo').val();
            var msg = $('#msg').val();

            //works up to here only after building on build.phonegap.com
            $.ajax({
                traditional: true,
                type: 'POST',
                dataType:'json',
                url: '<...>/welcome/savePostData', 
                data: 'numberTo='+msgTo+'&numberFrom='+msgFrom+'&message='+msg, 

                success: function(resp) { 
                    Materialize.toast("Posted", 5000);

                }

            });

        }

Here are the resources in my HTML code:

    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.js"></script> 
    <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>

Other details:

• I have created the app in ubuntu using this command only: cordova create <appname>
• I'm still running on android kitkat (lol )
• I deployed my controller in freewebhostingarea.com

Answer 1

it sounds like the mobile ajax isn't enabled. have you set $.support.cors to true?

source: http://demos.jquerymobile.com/1.0/docs/pages/phonegap.html

Answer 2

In order to use cross-domain AJAX requests you need to add the following code at the end of your config.xml file. This is what worked for me:

  <access origin="*"/>
  <gap:plugin name="cordova-plugin-whitelist" source="npm"/>
  <access url="*" subdomains="true"/>
  <allow-intent href="http://*/*"/>