title: Connecting to a MySQL database using PhoneGap, AJAX, and JQuery Mobile
body: <p>I'm in a team developing an Android application that will rely greatly on the use of a remote database. We are using PhoneGap and Jquery Mobile and have been attempting to connect to our MySQL database using AJAX and JSON calls. Currently, we are having trouble in our testing phase, which is to verify we even have a connection at all by pulling a hard-coded user of "Ted" from mySQL / input via MySQL Workbench.</p>
  
  <p>From what we have gathered, the process of data transmission works as this:</p>
  
  <ol>
  <li><p>On our html file, we have a </p>
  
  <pre><code>&lt;script type="text/javascript" src="Connect.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>^ Which should run the Connect.js script, correct? So from there, Connect.js is ran?</p></li>
  <li><p>Connect.js runs, connecting it to our ServerFile.php that is hosted on an external web service, allowing it to run PHP to connect to the MySQL database and pull information. </p>
  
  <pre><code>//run the following code whenever a new pseudo-page is created
  $('#PAGENAME').live('pageshow', function(event)) {
  
      // cache this page for later use (inside the AJAX function)
      var $this = $(this);
  
      // make an AJAX call to your PHP script
      $.getJSON('http://www.WEBSITENAME.com/ServerFile.php', function (response) {
  
          // create a variable to hold the parsed output from the server
          var output = [];
  
          // if the PHP script returned a success
          if (response.status == 'success') {
  
              // iterate through the response rows
              for (var key in response.items) {
  
  
                   // add each response row to the output variable
                   output.push('&lt;li&gt;' + response.items[key] + '&lt;/li&gt;');
              }
  
          // if the PHP script returned an error
          } else {
  
              // output an error message
              output.push('&lt;li&gt;No Data Found&lt;/li&gt;');
          }
  
          // append the output to the `data-role="content"` div on this page as a
          // listview and trigger the `create` event on its parent to style the
          // listview
          $this.children('[data-role="content"]').append('&lt;ul data-role="listview"&gt;' + output.join('') + '&lt;/ul&gt;').trigger('create');
      });
  });
  </code></pre></li>
  </ol>
  
  <p>Here is ServerFile.php. This should connect to the MySQL Database, make the Select statement, and then send the output to the browser encoded in the JSON format. </p>
  
  <pre><code>&lt;?php
  
  //session_start();
  $connection = mysql_connect("csmadison.dhcp.bsu.edu", "clbavender", "changeme"); 
  $db = mysql_select_db("cs397_clbavender", $connection); 
  
  //include your database connection code
  // include_once('database-connection.php');
  
  //query your MySQL server for whatever information you want
  $query = mysql_query("SELECT * FROM Users WHERE Username ='Ted'", $db) or trigger_error(mysql_error());
  
  //create an output array
  $output = array();
  
  //if the MySQL query returned any results
  if (mysql_affected_rows() &gt; 0) {
  
  
      //iterate through the results of your query
      while ($row = mysql_fetch_assoc($query)) {
  
          //add the results of your query to the output variable
          $output[] = $row;
      }
  
  
      //send your output to the browser encoded in the JSON format
      echo json_encode(array('status' =&gt; 'success', 'items' =&gt; $output));
  
  } else {
  
      //if no records were found in the database then output an error message encoded in the JSON format
      echo json_encode(array('status' =&gt; 'error', 'items' =&gt; $output));
  }
  ?&gt;
  </code></pre>
  
  <p>Yet nothing is showing here. What do we do from here? </p>