title: Loading JSON using jQuery Mobile & Phonegap?
body: <p>Basically I have a php script located on a sever that generates a JSON file listing places from a mysql database. Using jQuery Mobile I am developing an application to display these places. My code works in Chrome &amp; Safari, however when I port it over to Phonegap it doesn't work. I have searched all over the internet but can't find an answer :(.</p>
  
  <p>The php file for generating JSON (json.php):</p>
  
  <pre><code>&lt;?php
  header('Content-type: application/json');
  
  
  $server = "localhost";
  $username = "xxx";
  $password = "xxx";
  $database = "xxx";
  
  $con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
  mysql_select_db($database, $con);
  
  $sql = "SELECT * FROM places ORDER BY name ASC";
  $result = mysql_query($sql) or die ("Query error: " . mysql_error());
  
  $records = array();
  
  while($row = mysql_fetch_assoc($result)) {
      $records[] = $row;
  }
  
  mysql_close($con);
  
  echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
  ?&gt;
  </code></pre>
  
  <p>My Javascript file located within my app (Loads JSON and displays it):</p>
  
  <pre><code>$('#places').bind('pageinit', function(event) {
      getPlaces();
  });
  
  
  function getPlaces() {
  
      var output = $('#placeList');
  
      $.ajax({
          url: 'http://www.mysite.com/json.php',
          dataType: 'jsonp',
          jsonp: 'jsoncallback',
          timeout: 5000,
          success: function(data, status){
              $.each(data, function(i,item){
                  var place = '&lt;li&gt;&lt;a href=""&gt;'+item.name+'&lt;span class="ui-li-count"&gt;'
                  + item.checkins+'&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;';
  
                  output.append(place);
              });
              $('#placeList').listview('refresh');
          },
          error: function(){
              output.text('There was an error loading the data.');
          }
      });
  
  }
  </code></pre>
  
  <p>The HTML looks like this:</p>
  
  <pre><code>&lt;div data-role="content"&gt;
              &lt;h3&gt;Places&lt;/h3&gt;
              &lt;ul data-role="listview" id="placeList" data-inset="true"&gt;
  
          &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /content --&gt;
  </code></pre>
  
  <p>This code works in Chrome &amp; Safari, however when run in the xCode simulator with Phonegap it doesn't load the JSON.</p>
  
  <p>Any help would be much appreciated :)</p>