0 Replies Latest reply on Feb 22, 2018 5:26 PM by benr48764503

    Ajax not working in Phonegap

    benr48764503 Level 1

      Hello,

       

      I have been for hours on this problem and cannot find the solution.

       

      I am trying to initiate a simple ajax call when the submit button is clicked, when I click at the moment, nothing happens, no ajax calls/responses.

       

      Does anyone spot my mistake please?

       

      Here is my code:

      In the head I have this:

       

      <head>
      
        <meta charset="utf-8">
      
        <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
      
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
      

       

       

       

       

       

      The html:

       

                     <form id="form-items">
      
                          <div class="list">
      
                            <ul>
      
                              <li class="item-content item-input">
      
                                <div class="item-inner">
      
                                  <div class="item-input-wrap">
      
                                    <input type="text" name="username" placeholder="Username" id="username">
      
                                    <span class="input-clear-button"></span>
      
                                  </div>
      
                                </div>
      
                              </li>
      
                              <li class="item-content item-input">
      
                                <div class="item-inner">
      
                                  <div class="item-input-wrap">
      
                                    <input type="password" name="password" placeholder="Password" id="password">
      
                                    <span class="input-clear-button"></span>
      
                                  </div>
      
                                </div>
      
                              </li>
      
                            </ul>
      
                          </div>
      
                          <div class="list">
      
                            <ul>
      
                              <li>
      
                                <button type="button" class="col button button-big button-raised button-fill button-green signIn">Sign In</button>
      
                              </li>
      
                            </ul>
      
                            <div class="block-footer">
      
                              <a href="/login/" class="text-align-left md color-indigo">Forgot Password</a> -
      
                              <a href="/register/" class="text-align-right md color-indigo">Register</a>
      
                            </div>
      
                          </div>
      
                        </form>
      

       

       

      The ajax

       

       

      document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
      
      $('.signIn').click(function(e)  {
      alert("hello!");   // test
      e.preventDefault();
      
      
      var usernameInput = $('#username').val();
      var passwordInput = $('#password').val();
      
      
      $.ajax({
        url: serverUrl + '/api/login',
        method: 'POST',
        data: {
          'username': usernameInput,
          'password': passwordInput,
          'client_id': clientId,
          'client_secret': clientSecret
        },
        dataType: "json",
      
      
        beforeSend: function () {
          app.dialog.progress('Connecting....');
        },
        statusCode: {
          //If status is 200
      
      
          200: function (response) {
      
      
       //code here
      
      
            }, function (error) {
              console.log('transaction error: ' + error.message);
            }, function () {
              console.log('transaction ok');
              app.dialog.close();
              app.router.navigate('/createreport/');
            });
      
      
          },
      
      
          401: function (response) { //Unauthenticated
            app.dialog.close();
            console.log("error 401 Unauthenticated");
            app.router.navigate('/');
      
      
          },
          500: function (response) { //error
            app.dialog.close();
            console.log("error 500");
            app.router.navigate('/');
          },
          404: function (response) { //Not found
            app.dialog.close();
            console.log("error 404 Not found");
            app.router.navigate('/');
          }
        }
      });
      });
      

       

      In my config.xml I have this:

       

      <access origin="*" />
      
          <allow-intent href="http://*/*" />
      
          <allow-intent href="https://*/*" />
      
          <allow-intent href="tel:*" />
      
          <allow-intent href="sms:*" />
      
          <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>
      
          <plugin name="cordova-sqlite-evcore-extbuild-free" spec="^0.9.2" />
      
          <plugin name="cordova-plugin-battery-status" spec="~1.1.1" />
      
          <plugin name="cordova-plugin-camera" spec="~2.1.1" />
      
          <plugin name="cordova-plugin-media-capture" spec="~1.2.0" />
      
          <plugin name="cordova-plugin-console" spec="~1.0.2" />
      
          <plugin name="cordova-plugin-contacts" spec="~2.0.1" />
      
          <plugin name="cordova-plugin-device" spec="~1.1.1" />
      
          <plugin name="cordova-plugin-device-motion" spec="~1.2.0" />
      
          <plugin name="cordova-plugin-device-orientation" spec="~1.0.2" />
      
          <plugin name="cordova-plugin-dialogs" spec="~1.2.0" />
      
          <plugin name="cordova-plugin-file" spec="~4.1.1" />
      
          <plugin name="cordova-plugin-file-transfer" spec="~1.5.0" />
      
          <plugin name="cordova-plugin-geolocation" spec="~2.1.0" />
      
          <plugin name="cordova-plugin-globalization" spec="~1.0.3" />
      
          <plugin name="cordova-plugin-inappbrowser" spec="~1.3.0" />
      
          <plugin name="cordova-plugin-media" spec="~2.2.0" />
      
          <plugin name="cordova-plugin-network-information" spec="~1.2.0" />
      
          <plugin name="cordova-plugin-splashscreen" spec="~3.2.1" />
      
          <plugin name="cordova-plugin-statusbar" spec="~2.1.2" />
      
          <plugin name="cordova-plugin-vibration" spec="~2.1.0" />
      
          <plugin name="cordova-plugin-whitelist" spec="~1.2.1" />
      
      </widget>
      

       

       

       

      Thank you!