4 Replies Latest reply on Aug 29, 2017 5:48 AM by kerrishotts

    Unable to retrieve and display records from my external database in my phonegap app

    godilo Level 1

      Good day everyone.

      I am trying to retrieve and display records in my phonegap app from my external database.  I got a useful tutorial and followed all the steps and it worked perfectly in my ripple emulator.  But when i uploaded the project to my phonegap build account and rebuilt it, installed it in my android phone.  I was not able to retrieve any record.

      I do not see any error message.

       

      Please below is my scripts that worked perfectly with the ripple emulator:

       

      getrecord.php

       

      I uploaded this file to my online web server. Never mind the script i am testing to display everything in the "pforumtopics" table and it actually retrieved and displayed all records when i tested with ripple emulator.

       

      <?php

      require_once("include/newconns2.php");

       

      $q = $_GET['q'];

      $sql = $db->query("SELECT * FROM pforumtopics");

      //$sql->execute(array($q));

      while($nrow=$sql->fetch(PDO::FETCH_ASSOC)){

         @$imgtopic = $nrow['imgtopic'];

         @$briefs = $nrow['briefs'];

         echo "<img src='$imgtopic' width='250' height='150'/>";

         echo "<div class='colome180'><span class='curme40 themsgs'>$briefs</span></div>";

       

      }

      ?>

      I have also modified the  " .htaccess" file in my web server.

       

      example2.html

       

      This is the file in my phonegap app where i want to retrieve and display records from my external database.

       

      <!DOCTYPE html>

      <html>

      <head>

      <title>external database display records</title>

      <meta name='viewport' content='width=device-width, initial-scale=1'>

      <!--

      Main Page

      Include the jQuery and jQuery Mobile JavaScript files:

      -->

       

      <link href="jquery-mobile/jquery.mobile-1.3.2.min.css" rel="stylesheet" type="text/css"/>

      <script src="cordova.js"></script>

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

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

      </head>

       

      <body>

      <div class="segment">

       

      <h2>Serving Data from External Server</h2>

       

      <form action="" method="GET" id="formPowerType">

      <input type="button" class="buttonClass" onclick='window.location="index.html"' value="Return">

      <select name="q" onchange="showUser(this.value)">

      <option value="">Select power type</option>

      <option value="Olalekan Paul Akande">Olalekan Paul Akande</option>

      <option value="Godwin Nwanekpe">Godwin Nwanekpe</option>

      </select>

      </form>

       

      <br>

      <div id="txtHint">(Data will be displayed here)</div>

      </div>

              

      <script type="text/javascript">

      // ————————— CORS begin

      // Create the XHR object.

      function createCORSRequest(method, url) {

      var xhr = new XMLHttpRequest();

      if ("withCredentials" in xhr) {

      // XHR for Chrome/Firefox/Opera/Safari.

      xhr.open(method, url, true);

      console.log('withCredentials');

      }

      else if (typeof XDomainRequest != "undefined") {

      // XDomainRequest for IE.

      xhr = new XDomainRequest();

      xhr.open(method, url);

      }

      else {

      // CORS not supported.

      xhr = null;

      }

      return xhr;

      }

      function makeCorsRequest() {

      var xhr = createCORSRequest('GET', url);

      if (!xhr) {

      alert('CORS not supported');

      return;

      }

      xhr.onload = function() {

      console.log("onloadn");

      }

      xhr.onerror = function() {

      alert('Error accessing database.');

      }

      xhr.send();

      }

      // ————————— CORS end

      function showUser(str) {

      if (str == "") {

      document.getElementById("txtHint").innerHTML = "Please make a selection.";

      return;

      }

      document.getElementById("txtHint").innerHTML = "Getting data …";

      xmlhttp = new XMLHttpRequest();

      xmlhttp.onreadystatechange = function() {

      if (xmlhttp.readyState==4 && xmlhttp.status==200) {

      var txt = xmlhttp.responseText;

      document.getElementById("txtHint").innerHTML = xmlhttp.responseText;

      }

      }

      // Need full URL to page, since this HTML page is not on a server

      xmlhttp.open("GET","https://exportgist.com/getrecord.php?q='+str'", true);

      xmlhttp.send();

      }

      // Start the CORS on startup

      var url = "https://exportgist.com/getrecord.php";

      var method = "GET";

      createCORSRequest(method, url);

      </script>

      </body>

      </html>

       

      Please can anyone help me and see what is missing my script that is making it not to work in my android phone.

      Note that the same scripts worked perfectly well in with ripple emulator.

      Thanks.

        • 1. Re: Unable to retrieve and display records from my external database in my phonegap app
          kerrishotts Adobe Community Professional

          First, Ripple != device, so as you've discovered just because something works in Ripple doesn't mean it will work on the device. Remember that going forward -- always test on a real device.

           

          Second, my guess is whitelisting. You didn't share your config.xml, so I can't be sure, but you do need to add the whitelist plugin and configure it appropriately as described here: Whitelist - Apache Cordova

          • 2. Re: Unable to retrieve and display records from my external database in my phonegap app
            godilo Level 1

            You are right  Kerrishotts.  I setup "cordova-plugin-whitelist" in my xml file and it worked perfectly. 

            Thank you so much for helping me learn phonegap.

            • 3. Re: Unable to retrieve and display records from my external database in my phonegap app
              reginalds14121849

              I'm new to PhoneGap.  I have build the App but its not finish.  I have the same problem with External Links.  In the Development App, The external links will not open.  On the computer, There is no problem. They will open.  When The app is sync to the computer, the app on my IPAD will not allow connection to external links.  I'm trying the basic   Help!

               

              http://www.BubbaTunes.com

               

                  BubbaTunes            Hello World sample application that responds to the deviceready event.                 PhoneGap Team                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

              • 4. Re: Unable to retrieve and display records from my external database in my phonegap app
                kerrishotts Adobe Community Professional

                In the future, create a new post for your issue. Answered posts aren't apt to get a lot of eyeballs.

                 

                Without seeing your config.xml and how you're using external links, there's little I can do except to suggest that you make sure the whitelist plugin is installed and properly configured.