5 Replies Latest reply on Aug 18, 2016 12:54 PM by javierl37707173

    Novice question: PhoneGap and AJAX

    phillipwu Level 1

      I'm having difficulty even getting basic AJAX to work with PhoneGap Developer and wanted to see if someone could help me.

       

      I'm trying to test using W3Schools' AJAX PHP sample, so I can kind of "build up" my PhoneGap/AJAX abilities to develop user login capability for a mobile app that I've been tasked with creating. But, as someone who's not a programmer by any means (and who tends to be confused by computer networking issues...don't even get started on proxies!), I'm stumped by even trying to get the W3Schools sample to work.

       

      The sample, which can be found here (AJAX PHP), is as follows. (For those who are, like me, also not programmatically-minded and who are better at thinking visually, the sample has a text box where if you type the first letter(s) of a person's name, it will try to find names starting with those letters in a database file that it calls upon. It displays the real-time results of what it finds below the text box as the user is typing.)

       

      HTML/JavaScript/AJAX:

       

      <html>
      <head>
      <script>
      function showHint(str) {
          if (str.length == 0) {
              document.getElementById("txtHint").innerHTML = "";
              return;
          } else {
              var xmlhttp = new XMLHttpRequest();
              xmlhttp.onreadystatechange = function() {
                  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                      document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                  }
              };
              xmlhttp.open("GET", "gethint.php?q=" + str, true);
              xmlhttp.send();
          }
      }
      </script>
      </head>
      <body>

       

      <p><b>Start typing a name in the input field below:</b></p>
      <form>
      First name: <input type="text" onkeyup="showHint(this.value)">
      </form>
      <p>Suggestions: <span id="txtHint"></span></p>
      </body>
      </html>

       

      PHP file:

       

      <?php

      // Array with names

      $a[] = "Anna";

      $a[] = "Brittany";

      $a[] = "Cinderella";

      $a[] = "Diana";

      $a[] = "Eva";

      $a[] = "Fiona";

      $a[] = "Gunda";

      $a[] = "Hege";

      $a[] = "Inga";

      $a[] = "Johanna";

      $a[] = "Kitty";

      $a[] = "Linda";

      $a[] = "Nina";

      $a[] = "Ophelia";

      $a[] = "Petunia";

      $a[] = "Amanda";

      $a[] = "Raquel";

      $a[] = "Cindy";

      $a[] = "Doris";

      $a[] = "Eve";

      $a[] = "Evita";

      $a[] = "Sunniva";

      $a[] = "Tove";

      $a[] = "Unni";

      $a[] = "Violet";

      $a[] = "Liza";

      $a[] = "Elizabeth";

      $a[] = "Ellen";

      $a[] = "Wenche";

      $a[] = "Vicky";

       

      // get the q parameter from URL

      $q = $_REQUEST["q"];

       

      $hint = "";

       

      // lookup all hints from array if $q is different from ""

      if ($q !== "") {

          $q = strtolower($q);

          $len=strlen($q);

          foreach($a as $name) {

              if (stristr($q, substr($name, 0, $len))) {

                  if ($hint === "") {

                      $hint = $name;

                  } else {

                      $hint .= ", $name";

                  }

               }

          }

      }

       

      // Output "no suggestion" if no hint was found or output correct values

      echo $hint === "" ? "no suggestion" : $hint;

      ?>

       

      Testing the HTML file in my browser, everything works perfectly.

       

      However, making the above into a PhoneGap project and testing it on my Android phone, the name-returning capability doesn't work. And this is obviously due to the AJAX command not being executed.

       

      Anyone know how I can solve this issue? I've already put the following in my config.xml file, and nothing has changed:

       

      <access origin="*" subdomains="true"/>

       

       

      Thanks in advance.

        • 1. Re: Novice question: PhoneGap and AJAX
          Chris W. Griffith Adobe Community Professional

          The example you give has both the HTML and PHP code existing on the same server. You can tell that by the short url that the AJAX calls makes. In PhoneGap you can not run PHP code locally, it has to run on a remote server. If you change the xmlhttp.open("GET", "gethint.php?q=" + str, true); to reference the full url, it should work. However, be mindful of security restrictions when expanding your app (Whitelisting and Content Security Policy).

           

          I would also look for a tutorial on Chrome'e remote mobile debugging tooling. You will find it invaluable.

           

          Chris

          • 2. Re: Novice question: PhoneGap and AJAX
            phillipwu Level 1

            Thanks, Chris.

             

            If I have to run PHP code on a remote server, what does that look like as far as developing locally? In other words, what is best practice for where to put PHP files if I'm just testing? Do I need to put the files on a separate computer? And if so, can that computer be on the same network (192.168.1.XX)?

             

            If I don't have a registered domain name, can I use localhost to connect to these PHP files or would I need to put in an IP address? And can the IP address be a local 192.168.1.XX or would it have to be the actual non-local IP address (which may be an issue, I suspect, if I'm using a virtual machine)?

             

            Sorry if these questions seem really novice—I have a hard time wrapping my mind around computer networking and all of its implications.

            • 3. Re: Novice question: PhoneGap and AJAX
              kerrishotts Adobe Community Professional

              You can host PHP files locally on your dev machine, although I suggest setting up a test virtual machine so that you don't have to muck about with your dev machine's primary configuration.  Plus, if your VM is a linux VM, that'll give you practice when you set something up elsewhere, since chances are good you'd be deploying this to a linux machine in the cloud. There are lots of appliances out there that have a LAMP stack set up out-of-the-box (Linux Apache MySQL PHP) -- for example, https://www.turnkeylinux.org/lampstack.

               

              As long as your mobile device is on the same network as your development machine (/VM), you can connect to it with a local IP address (like 192.168.*). You should also be able to connect using your local hostnames (like your-macbook.local) or something similar. Virtual machines will typically live on your network with an IP address different from your dev machine, but this depends on how you set everything up when you create a VM. (This behavior, though, is usually the default.)

               

              You can also use environments like Cloud9 and similar services to test code like this. They aren't suitable for production code, but you can run a PHP script (or Node, etc.) and essentially have a low-powered external server with little to no effort on your part.

               

              Side note: Personally, avoid `localhost` even when testing, because `localhost` can refer to multiple things depending on what you're testing from:

               

              • testing on a physical device: localhost refers to that device
              • testing on an emulator: localhost refers to the emulator
              • testing on iOS simulator: localhost refers to the dev machine
              • testing in a browser on your dev machine: locahost refers to the dev machine

               

              If you use IP addresses/hostnames, there is no ambiguity, hence why I suggest using it.

               

              Finally, Don't forget to make sure your firewall accepts external requests on the port you intend on using.

              • 4. Re: Novice question: PhoneGap and AJAX
                phillipwu Level 1

                Thanks, Kerri. I was able to get it to work using a virtual machine! (It works on PhoneGap, at least, which is where I needed it to work. It doesn't work on my desktop browser anymore unless I just use the local name "gethint.php" without the entire URL...but I can certainly live with that!)

                • 5. Re: Novice question: PhoneGap and AJAX
                  javierl37707173

                  Basic example of how to use Ajax-Jason to communicate Phonegap-Build App with PHP remote file

                  GitHub - javier-lamarca/Phonegap-PHP-Ajax-Json: Conecting Phonegap Build App with remote PHP using Ajax-Json