2 Replies Latest reply on Jun 2, 2017 4:32 PM by godilo

    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.